Blog / Use cases
Auto-layout you don't have to build
There's a special kind of feature request: the one filed as issue #5 of a project and still generating tutorials years later. For flow libraries that's auto-layout. The mainstream answer became "integrate dagre or elk yourself", and an entire genre of blog posts exists to walk you through the wiring — graph conversion in, position mapping out, edge cases yours forever. (The sequel, "is dynamic auto layouting possible?", has 28 comments of people discovering the hard parts.)
What the wiring tutorials don't tell you
Getting dagre to emit positions is the easy afternoon. The parts that eat the week:
- Which algorithm, when? Layered algorithms are right for DAGs and wrong for hairballs; trees want tree layouts; a picker is part of the feature.
- ELK is 1.4 MB. The best layered engine is also the heaviest — ship it eagerly and your bundle audit will find it.
- The second layout. Insert a node into a laid-out graph and a full re-run scrambles every position the user has memorized. You need incremental layout, and no wiring tutorial covers it.
- Don't fight the hands. If layout re-runs on every data change, it undoes the drag your user just made. When it runs is as important as what it computes.
One call, and the four problems it absorbs
await engine.layout('elk'); // picker: 'auto' inspects the graph
await engine.layout('dagre', { direction: 'TB', rankSpacing: 80 });
await engine.layoutIncremental({ changed: ['inserted-id'], radius: 1 }); // the second layout
Registered names: auto, elk, dagre,
layered, tree, grid, circular,
radial, force, spectral, community.
ELK loads as a lazy chunk on first use — it costs your bundle nothing until someone
actually invokes it — and runs off-thread in a Worker. And in every framework binding,
the declarative form re-runs on prop-value change only, never on node data, so
it structurally cannot fight a user's drag:
// React
<GrafloriaFlow defaultNodes={nodes} defaultEdges={edges} layout="elk" />
// Angular
<grafloria-diagram-canvas [(nodes)]="nodes" [(edges)]="edges" [layout]="'elk'" />
// Vue
<GrafloriaFlow :default-nodes="nodes" :default-edges="edges" layout="elk" />
See every algorithm on a real graph: layout demos · the concept guide (including the choosing table): Layout.