usefulweb.appDependable little tools for people and AI agents. Sketchboard Auto Layout
Theme: Auto

Theme

Apps Part of Sketchboard

Sketchboard Auto Layout

Tidy up a diagram automatically: layered flowchart layout or a balanced mind map.

For example “Idea -> Research” or “Research -> Prototype: needs a budget”. A line with only a name adds a lonely box. Ignored when a board is given.

More options

A .sketchboard.json file. Shapes that are glued to connectors are laid out; locked shapes stay.

☁ Sign in to save to your Google Drive

Try an example: · · ·

More about this tool

How it works

Takes a Sketchboard board or a plain list of links (“A -> B”) and arranges the boxes: a layered layout with few crossings for flowcharts and graphs in any direction, or a balanced left/right tree for mind maps. Returns the new positions, an SVG and the board file.

  • Nodes are the board’s shapes, notes, texts and props that are not locked; links are connectors glued at both ends. From a link list every distinct name becomes a rounded box sized to its text.
  • Layered layout (Sugiyama et al. 1981): DFS back edges are reversed to remove cycles, ranks follow the longest path from the sources, long links get dummy nodes, barycentre sweeps (up to 12, the best ordering is kept) reduce crossings, and median alignment straightens links before overlaps are pushed apart. The result lists the number of crossings left between neighbouring ranks.
  • Mind map: a breadth-first tree from the root (the mind-map root shape, else the node with the most links); first-level branches go alternately right and left, whichever side is shorter so far, and every subtree is stacked vertically by its height.
  • The layout keeps the top-left corner of the old drawing and only moves boxes; glued connectors follow automatically.

A layout is a starting point: very dense graphs keep some crossings, and nodes are not resized.

Sources

Part of Sketchboard

How to lay out a diagram automatically

Tidy up a flowchart or graph with a layered layout in any direction, or re-balance a mind map, from a Sketchboard board or a simple list of links.

What it is for

Diagrams get messy as they grow. A box is added here, an arrow there, and soon lines cross everywhere. This tool rearranges the boxes for you, in one of two ways:

  • Layered layout suits flowcharts, processes and dependency graphs. Boxes are put in rows (ranks) so that links run in one direction with as few crossings as possible.
  • Mind map puts a central topic in the middle. Its branches are spread evenly to the left and right, and the sub-topics of each branch are stacked below one another.

The input can be a Sketchboard board (.sketchboard.json) or a plain list of links, one per line, such as Idea -> Research. The Sketchboard app uses the same code under Arrange → Auto layout….

Worked example

Take a product plan written as seven links:

Idea -> Research
Research -> Prototype
Prototype -> User test
User test -> Prototype: needs changes
User test -> Launch
Research -> Budget
Budget -> Launch

The tool answers Arranged 6 nodes in 5 ranks with 0 crossings left. Idea is at the top. Research, Prototype and User test follow in a column, and Launch is at the bottom (y = 432). Budget sits on the same rank as Prototype, to its right (x = 157), because it also comes straight after Research. The link User test → Prototype (labelled needs changes) points back up, so it is treated as a loop: ignored while ranking, then drawn through the side of the boxes so it does not cover the downward arrow.

With Direction set to Left to right and wider gaps (60 between neighbours, 90 between ranks), the same plan runs across the page. Launch ends up at x = 798, again with 0 crossings.

Sketchboard's Project kickoff mind map gives Arranged 20 nodes as a balanced mind map. The central topic Website relaunch stays in the middle; Goals and Timeline go to the right, People, Risks and Budget to the left.

How to read the result

The metrics show nodes, connectors, ranks, crossings left and how many boxes moved. For a mind map, ranks and crossings show a dash. The Positions table lists the top-left corner of every box in board units (one unit is one screen pixel at 100 % zoom). Below the SVG preview you can download the SVG and the board file.

Zero crossings is the ideal; a few left over usually means the graph cannot be drawn flat in rows. Ranks follow the longest path from the starting boxes, and links that skip ranks bend around boxes instead of cutting through them.

Tips and common mistakes

  • From a link list, every distinct name becomes a rounded box sized to its text. A line with only a name adds a box without links.
  • Text after a colon becomes the link label, so A -> B: needs changes labels the arrow.
  • Locked shapes do not move, and auto layout needs at least two unlocked shapes.
  • The layout keeps the top-left corner of your drawing; connectors stay glued and follow their boxes.
  • Spelling matters: User test and User Test become two different boxes.

FAQ

How does it reduce crossings?

Up to 12 sweeps move each box towards the average position of its neighbours, and the ordering with the fewest crossings is kept.

Will I get the same layout twice?

Yes. Ties are broken by the input order, so the same input always gives the same layout.

When does it use the mind-map layout?

With Automatic, a board that contains mind-map nodes gets the mind-map layout; everything else is layered. Each new branch goes to the shorter side, so both halves end up about the same height.

What happens to loops?

Links pointing backwards in a depth-first search are turned around for ranking, then drawn in their real direction.

Guide last updated:

For scripts and AI agents

  • JSON API: POST https://sketchboardautolayout.usefulweb.app/api/v1/calculate (same calculation as this page)
  • Interface description: OpenAPI 3.1 · AI guide: llms.txt
  • MCP server (Streamable HTTP): https://sketchboardautolayout.usefulweb.app/mcp · tool name sketchboard_auto_layout
Example request
curl -s -X POST https://sketchboardautolayout.usefulweb.app/api/v1/calculate \
  -H 'content-type: application/json' \
  -d '{"edges":"Idea -> Research\nResearch -> Prototype\nPrototype -> User test\nUser test -> Prototype: needs changes\nUser test -> Launch\nResearch -> Budget\nBudget -> Launch"}'
Feedback · ideas & bug reports welcome