Skip to main content

FlowLayout

Canvas

Automatic graph layout for a flow canvas: arrange the nodes top-to-bottom or left-to-right with one call, animated into place.

Examples

6 live examples

Left To Right

Same graph, laid out left → right. Because the edges are smart + the nodes have anchors on every side, the connections **re-pick the facing side automatically** — now the right (source) / left (target) sides — instead of routing through top/bottom.

Concentric

`layoutGraph({ algorithm: "concentric" })` — the "ingest" node is the focal center; the rest of the graph radiates outward in BFS shells.

Force

`layoutGraph({ algorithm: "force" })` — a deterministic, seeded `d3-force` simulation spreads the nodes apart.

Layered LR

`layoutGraph({ algorithm: "layered-lr" })` — delegates to the same dagre engine as `useFlowLayout`, exposed as a pure function.

Grid

`layoutGraph({ algorithm: "grid" })` — a simple row-major grid.