Graph layout

A graph has nodes and edges and no coordinates. Something has to invent the coordinates, and doing it by algorithm is what this term names. Three families cover nearly every case in interface work. A layered arrangement, the Sugiyama family, ranks nodes by dependency and puts each rank in its own row or column, so every edge points the same way: this is what you want for anything that is a flow, and it is what a flowchart engine is doing when it places your boxes. A radial arrangement puts one node at the centre and its neighbours on rings around it, which suits a hub with many spokes and reads as “this thing, and everything attached to it”. A force-directed arrangement treats edges as springs and nodes as particles that repel, and settles into clusters: it is the right answer for a mesh with no inherent direction, and the wrong answer for anything with a start and an end.

The naming here is genuinely ambiguous and worth being careful about. In the node graph world this is usually called auto layout, and that is what the button says in most editors. But in design tools the same two words mean something else entirely: Figma has an Auto layout feature that is a flex-like resizing frame, and that meaning is far more searched. So say graph layout, or name the algorithm, and reserve auto layout for the frame property if your audience is designers at all.

An algorithm can only be judged by what a reader can follow, which is why the metrics that matter are boring: how many edges cross, how many bend, how far apart connected nodes ended up, and whether the whole thing fits the space it has to live in. Crossings are the expensive one, and they interact with edge routing: a good arrangement makes any routing readable, and no routing rescues a bad one. Aspect ratio matters more than it looks like it should, because a layout that is optimal on a wide monitor may be unreadable in a narrow column, so the arrangement is part of the responsive question rather than a fixed picture.

The honest cost is spatial memory. Re-running a layout moves everything, and every position the reader had learned is gone: the node they were about to click is somewhere else, and the picture they had memorised no longer matches. This is why good tools make the arrangement an explicit command rather than something that happens on every edit, animate the transition so positions can be followed rather than re-learned, keep the result deterministic for the same input (a force-directed layout seeded randomly will not survive a reload), and let a node the reader has placed by hand stay pinned while the rest is arranged around it. Wiring by hand on an infinite canvas and arranging by algorithm are not rivals, and the tools readers like best let both happen in the same node graph.