Dagre

Dagre is a JavaScript library that computes the positions of nodes and edges for directed graphs, so you can render clean, readable diagrams on the client without hand-placing anything. You describe a graph as nodes and edges with sizes and labels, call a single layout function, and Dagre assigns x/y coordinates and edge routing points using a layered (Sugiyama-style) algorithm.

It is rendering-agnostic: Dagre only does the math, leaving you free to draw the result with SVG, Canvas, D3, React, or any other toolkit. This separation is why it underpins many higher-level diagramming tools and flowchart renderers across the ecosystem.

What You Get

• A single layout(graph) call that assigns x/y coordinates to nodes and routing points to edges
• Configurable layout direction (top-bottom, left-right), node/edge spacing, and ranking alignment
• A bundled graphlib Graph data structure for building and querying the input graph
• Support for compound (nested/cluster) graphs and edge labels that reserve their own space
• Rendering independence, so results can be drawn with SVG, Canvas, D3, or any framework

Common Use Cases

• Auto-laying out flowcharts, state machines, and process diagrams
• Visualizing dependency trees, build graphs, or data pipelines
• Powering interactive node-and-edge editors and diagramming apps
• Rendering DAGs such as workflow, org, or provenance graphs

Under The Hood

Architecture - Dagre’s layout() entry point (lib/layout.ts) builds an internal working graph and runs an ordered pipeline of transformation passes over it: makeSpaceForEdgeLabels, acyclic.run (breaks cycles), nestingGraph.run (for compound graphs), rank (assigns nodes to layers via lib/rank/network-simplex.ts), order (crossing minimization using barycenter and median heuristics under lib/order/), position (x-coordinate assignment via the Brandes-Köpf algorithm in lib/position/bk.ts), then edge normalization and denormalization, finally writing coordinates back onto the input graph. Each stage is a small focused module, making the classic Sugiyama layered-drawing method easy to follow end to end.

Tech Stack - Written in TypeScript and compiled with esbuild via build.ts into CJS, ESM, and type-declaration bundles. Its only runtime dependency is @dagrejs/graphlib (the sibling graph data-structure library), keeping the footprint small. Tooling includes Jest for tests, ESLint with typescript-eslint, and tsx for build/version scripts.

Code Quality - The repository carries an extensive test suite (~41 spec files under test/, mirroring the lib/ module layout, including targeted tests for ranking, ordering, and positioning) plus a benchmark harness. Modules are small and single-purpose, types are declared centrally in lib/types.ts, and the layered algorithm’s stages are individually covered, reflecting a mature, well-tested codebase.

API Design - The public surface is deliberately minimal: import dagre, build a Graph, set node/edge/graph labels, and call dagre.layout(g) to have coordinates written in place. This one-call ergonomics is a strength, though most configuration options and examples live in the project wiki rather than the terse in-repo README, which raises the initial discovery curve for newcomers.