Directed Graph

@joint/layout-directed-graph arranges a graph into ranks along a flow direction - the layout most diagrams reach for first.

A complete example

The pipeline below starts with no positions of its own. Once its cards render and report their sizes, the directed-graph layout sorts them into ranks: Start at the top, a Test / Lint branch fanning out from Build, and everything converging on Done. Use the toolbar to switch between top-down and left-to-right and watch it re-flow. The layout runs from useOnElementsMeasured, as described in How a layout runs.

Open Sandbox

Installation and options

The layout lives in its own open-source package, @joint/layout-directed-graph. Add it alongside @joint/react:

npm

npm add @joint/layout-directed-graph

pnpm

pnpm add @joint/layout-directed-graph

yarn

yarn add @joint/layout-directed-graph

import { DirectedGraph } from '@joint/layout-directed-graph';

DirectedGraph.layout(graph, options) takes the graph (or an array of cells) plus an options object. The ones you reach for most:

• rankDir sets the flow direction: 'TB' (top-to-bottom), 'BT', 'LR', or 'RL'.
• nodeSep is the gap between nodes in the same rank.
• rankSep is the gap between ranks.
• marginX and marginY pad around the whole graph.

DirectedGraph.layout(graph, {
  rankDir: 'LR',
  nodeSep: 40,
  rankSep: 60,
});

See the DirectedGraph API reference for the full list, including clusters, ranking algorithms, and link routing.