Member-only story
Automatic Graph Layout: How a Pile of Boxes Becomes a Diagram
Hi everyone, welcome back. Today, I will be going over automatic graph layout — the family of algorithms that turn a bare list of nodes and edges into a picture with coordinates, how the two dominant models work, and how to drive them in Graphviz, D2 and Mermaid.
Here is the frame I would hold onto: a layout engine is a pipeline of heuristics optimizing a specific definition of “readable,” so every frustrating diagram is a mismatch between your intent and the engine’s objective. Knowing which stage a knob acts on turns “this looks wrong” into a choice rather than a fight.
The Vocabulary, First
If you are newer to this, here is the glossary that makes the rest readable.
A graph is a set of things and the connections between them. The things are nodes (vertices — boxes, in a diagram), the connections are edges (lines or arrows). That is the whole data model: nothing in it says where anything sits on a page.
An edge is directed if it goes one way, like “service A calls service B,” and undirected if the relationship is mutual, like two people co-authoring a paper. Directed graphs get arrowheads; undirected ones get plain lines.
