Dagre Graph Layout (Legacy)

Common errors

• TypeError: dagre.layout is not a function

  cause Dagre was not correctly imported or loaded, or `graphlib` was not installed/imported, leading to `dagre` being `undefined` or not having the expected methods.
  fix Ensure `const dagre = require('dagre');` is used for CommonJS environments, or `dagre` is available globally if using a script tag. Also ensure `graphlib` is installed and its `Graph` class is used to create the graph object passed to `dagre.layout`.

• Error: The "dagre" utility is a mandatory dependency.

  cause This error often occurs when another library (like JointJS) explicitly checks for the global or module availability of `dagre` and cannot find it.
  fix Verify that `dagre` is properly installed (`npm install dagre`) and imported/required in your module system. For older `dagre` versions, ensure it's available in the global scope if your integrating library expects it that way.

Warnings

• breaking The `dagre` package on npm (version 0.8.5) is effectively abandoned. Active development, including ESM support, TypeScript rewrite, and new features (versions 2.x and 3.x), has moved to the `@dagrejs/dagre` scoped package. Installing `dagre` will fetch the old, unmaintained version.
  Fix: For actively maintained and modern features, install `@dagrejs/dagre` instead: `npm install @dagrejs/dagre`.
• gotcha Version `0.8.5` of `dagre` does not support ES Modules (ESM) syntax. Attempts to use `import dagre from 'dagre'` will result in errors in modern JavaScript environments.
  Fix: Use CommonJS `const dagre = require('dagre');` for module loading, or switch to the `@dagrejs/dagre` package for ESM support.
• gotcha Dagre requires the `graphlib` package for its graph data structures. It does not provide its own. Failing to install and use `graphlib` alongside `dagre` will lead to runtime errors when trying to create graphs.
  Fix: Ensure `graphlib` is installed (`npm install graphlib`) and imported/required separately to create graph objects (e.g., `new graphlib.Graph()`).
• deprecated Loading `dagre` via a `<script>` tag that exposes a global `dagre` object is a legacy pattern and is not recommended for new projects. This method lacks dependency management and proper module encapsulation.
  Fix: Use a module loader (e.g., CommonJS `require` for `dagre@0.8.5`) or migrate to `@dagrejs/dagre` for modern ESM approaches.

Install

• npm install dagre npm
• yarn add dagre yarn
• pnpm add dagre pnpm

Imports

• dagre
  wrong:

  import dagre from 'dagre';

  correct:

  const dagre = require('dagre');

  For `dagre@0.8.5`, CommonJS `require` is the standard module import. ESM `import` is not supported in this version.
• layout
  wrong:

  import { layout } from 'dagre';

  correct:

  const dagre = require('dagre');
  dagre.layout(graph);

  The primary layout function is a method on the `dagre` object; it is not a named export in version 0.8.5.
• Graph
  wrong:

  import { Graph } from 'dagre';

  correct:

  const graphlib = require('graphlib');
  const g = new graphlib.Graph();

  Dagre operates on `graphlib.Graph` instances. `graphlib` must be imported separately.

Quickstart

This example demonstrates how to create a graph using `graphlib`, add nodes and edges, apply the `dagre` layout, and then retrieve the calculated positions for nodes and bend points for edges. It uses CommonJS `require` for compatibility with `dagre@0.8.5`.

const dagre = require('dagre');
const graphlib = require('graphlib');

// Create a new directed graph
const g = new graphlib.Graph().setGraph({
  rankdir: 'LR' // Layout direction: Left to Right
}).setDefaultNodeLabel(() => ({})).setDefaultEdgeLabel(() => ({}));

// Add nodes to the graph
g.setNode('A', { label: 'Node A', width: 60, height: 30 });
g.setNode('B', { label: 'Node B', width: 60, height: 30 });
g.setNode('C', { label: 'Node C', width: 60, height: 30 });
g.setNode('D', { label: 'Node D', width: 60, height: 30 });

// Add edges to the graph
g.setEdge('A', 'B', { label: 'AB' });
g.setEdge('B', 'C', { label: 'BC' });
g.setEdge('A', 'D', { label: 'AD' });
g.setEdge('C', 'D', { label: 'CD' });

// Run the layout algorithm
dagre.layout(g);

// Log node positions
g.nodes().forEach(v => {
  const node = g.node(v);
  console.log(`Node ${v}: x=${node.x}, y=${node.y}`);
});

// Log edge bend points (if any)
g.edges().forEach(e => {
  const edge = g.edge(e);
  if (edge.points && edge.points.length > 0) {
    console.log(`Edge ${e.v}-${e.w} points:`, edge.points);
  }
});