Glossary · Layouts
Dagre Layout
Also known as: Layered Layout, Sugiyama-Style Layout.
A layered layout for directed graphs that arranges nodes into ranks and routes edges to minimize crossings — the standard choice for flowcharts and DAGs.
Dagre is a layered (Sugiyama-style) layout algorithm designed for directed graphs. It assigns each node to a rank, orders nodes within each rank to minimize edge crossings, and routes edges as straight or polylines between ranks. The result is a tidy top-down (or left-right) flowchart suitable for build pipelines, state machines, dependency graphs, and process diagrams.
Unlike strict tree layouts, Dagre handles directed acyclic graphs and gracefully breaks cycles when present. Its configuration surface includes rank direction (TB, BT, LR, RL), alignment (UL, UR, DL, DR), node and rank separation, and three ranker strategies (network-simplex, tight-tree, longest-path).
In TopoKit, Dagre ships in @topokit/layouts and can be combined with the Web Worker layout runner for large graphs.
References
Browse the full glossary or jump to the docs.