# dagrejs/dagre

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/dagrejs-dagre).**

5,692 stars · 639 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/dagrejs/dagre
- awesome-repositories: https://awesome-repositories.com/repository/dagrejs-dagre.md

## Description

Dagre is a pure JavaScript library for automatically laying out directed graphs. It implements a layered graph drawing algorithm based on the Sugiyama framework, positioning nodes in horizontal layers and routing edges to produce clear, readable visualizations with no native dependencies.

The library handles edge routing as polylines with control points to avoid overlapping nodes, reduces edge crossings through heuristic node ordering within layers, and assigns final coordinates using a slack-based approach that respects minimum separation constraints. Graph structure and layout options are exchanged as plain JSON objects, making dagre straightforward to integrate into JavaScript applications. It is designed for generating structured layouts of dependency graphs, flowcharts, state machines, and other hierarchical structures.

Dagre also provides facilities for inspecting the order of graph elements during layout, aiding in debugging and verification of visual correctness.

## Tags

### Software Engineering & Architecture

- [Layered Graph Drawing Algorithms](https://awesome-repositories.com/f/software-engineering-architecture/layered-graph-drawing-algorithms.md) — Provides a layered graph drawing algorithm based on the Sugiyama framework for clear visualizations.
- [Dependency Graph Visualizations](https://awesome-repositories.com/f/software-engineering-architecture/dependency-graph-visualizations.md) — Renders dependency structures such as package dependencies with readable layouts.
- [Barycenter Ordering Heuristics](https://awesome-repositories.com/f/software-engineering-architecture/diffing-algorithms/heuristic-diffing/barycenter-ordering-heuristics.md) — Uses barycenter heuristics to minimize edge crossings in layered graph layouts.
- [Graph Coordinate Assignment Algorithms](https://awesome-repositories.com/f/software-engineering-architecture/graph-coordinate-assignment-algorithms.md) — Assigns final x coordinates via slack-based longest-path optimization under separation constraints.

### Graphics & Multimedia

- [Hierarchical Layouts](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/layout-algorithms/hierarchical-layouts.md) — Arranges nodes in layered, top-down layouts to represent hierarchical relationships and dependencies.

### Programming Languages & Runtimes

- [Pure JavaScript Implementations](https://awesome-repositories.com/f/programming-languages-runtimes/pure-javascript-implementations.md) — Computes graph layouts entirely in client-side JavaScript with no native dependencies.

### Scientific & Mathematical Computing

- [Network Graph Layouts](https://awesome-repositories.com/f/scientific-mathematical-computing/network-graph-layouts.md) — Positions nodes and edges in directed graphs using layout algorithms for clear readability. ([source](https://github.com/dagrejs/dagre/blob/master/README.md))
- [Directed Graph Layouts](https://awesome-repositories.com/f/scientific-mathematical-computing/network-graph-layouts/directed-graph-layouts.md) — Positions nodes and edges in directed graphs with layered algorithms for clear readability. ([source](https://github.com/dagrejs/dagre#readme))

### Development Tools & Productivity

- [Flowchart Generators](https://awesome-repositories.com/f/development-tools-productivity/diagramming-tools/process-and-flow-mapping/flowchart-generators.md) — Produces structured layouts for flowcharts, state machines, and process diagrams.