Dagre Layout

Overview

Dagre is a hierarchical layout suitable for directed acyclic graphs (DAGs). It can automatically handle the direction and spacing between nodes and supports both horizontal and vertical layouts. See more Dagre layout examples, source code, and official documentation.

Configuration

const graph = new Graph({
  layout: {
    type: 'dagre',
    rankdir: 'TB',
    align: 'UL',
    nodesep: 50,
    ranksep: 50,
    controlPoints: false,
  },
});

Options

For more options, refer to the official documentation

rankdir

TB | BT | LR | RL, Default: TB

Layout direction

• TB: Top to Bottom;

• BT: Bottom to Top;

• LR: Left to Right;

• RL: Right to Left.

align

UL | UR | DL | DR, Default: UL

Node alignment

• UL: Upper Left
• UR: Upper Right
• DL: Down Left
• DR: Down Right

nodesep

number, Default: 50

Node spacing (px). For TB or BT, it's the horizontal spacing; for LR or RL, it's the vertical spacing

ranksep

number, Default: 50

Rank spacing (px). For TB or BT, it's the vertical spacing between ranks; for LR or RL, it's the horizontal spacing between ranks

ranker

network-simplex | tight-tree | longest-path, Default: network-simplex

Algorithm for assigning ranks to nodes, supports three algorithms:

• longest-path: Uses DFS to recursively find the longest path for each node. Simple and fast, but may result in many long edges.
• tight-tree: An optimization algorithm to reduce the number of long edges. It first uses longest-path to compute initial ranks, then adjusts slack edges to build a feasible tree.
• network-simplex: Based on A Technique for Drawing Directed Graphs, iteratively modifies node ranks to minimize slack edges.

nodeSize

number | number[] | () => (number | number[])

G6 custom property, specify node size for all or each node. If a single number, width and height are the same; if array: [width, height]

(d) => {
  // d is a node
  if (d.id === 'testId') return 20;
  return [10, 20];
};

controlPoints

boolean, Default: false

Whether to retain edge control points.

Applicable Scenarios

• Flowcharts: Suitable for displaying flowcharts, automatically handling direction and spacing between nodes.
• Dependency Graphs: Display dependencies between packages or modules.
• Task Scheduling Graphs: Show dependencies and execution order between tasks.

Related Documentation

The following documents can help you better understand Dagre layout

• Graph Layout Algorithms｜Detailed Dagre Layout
• In-depth Interpretation of Dagre Layout Algorithm