Skip to content

Example · Layout

Dagre Flowchart

Dagre is the standard layered layout algorithm for directed acyclic graphs — flowcharts, pipelines, build graphs, state machines. TopoKit ships Dagre with the full configuration surface and reasonable defaults.

Top-down flowchart

flowchart.ts 
import { create } from '@topokit/renderer-canvas';

const app = create(container, {
  nodes: [
    { id: 'start', label: 'Start' },
    { id: 'check', label: 'Validate input' },
    { id: 'process', label: 'Process' },
    { id: 'retry', label: 'Retry' },
    { id: 'done', label: 'Done' },
  ],
  edges: [
    { id: '1', source: 'start', target: 'check' },
    { id: '2', source: 'check', target: 'process', label: 'ok' },
    { id: '3', source: 'check', target: 'retry', label: 'invalid' },
    { id: '4', source: 'retry', target: 'check' },
    { id: '5', source: 'process', target: 'done' },
  ],
  directed: true,
  layout: 'dagre',
  layoutOptions: {
    rankDir: 'TB',        // top-to-bottom (also: 'BT', 'LR', 'RL')
    align: 'UL',           // alignment: 'UL', 'UR', 'DL', 'DR'
    ranker: 'network-simplex', // or 'tight-tree' / 'longest-path'
    nodeSep: 50,           // horizontal spacing between nodes in the same rank
    rankSep: 80,           // vertical spacing between ranks
    edgeSep: 10,           // minimum gap between parallel edges
  },
  interactive: true,
});

Switch to left-right

flowchart.ts 
app.setLayout('dagre', { rankDir: 'LR' });

When to use Dagre vs Hierarchical

Dagre is best for directed graphs with possible cycles (it breaks cycles automatically) and produces tidy edge routes. The Hierarchical layout is simpler and faster for strictly acyclic trees (org charts, file trees, classification trees).

Related

Force-Directed Layout Org Chart use case All Layouts