dagrejs/dagre
Dagre
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.
Features
- Layered Graph Drawing Algorithms - Provides a layered graph drawing algorithm based on the Sugiyama framework for clear visualizations.
- Hierarchical Layouts - Arranges nodes in layered, top-down layouts to represent hierarchical relationships and dependencies.
- Pure JavaScript Implementations - Computes graph layouts entirely in client-side JavaScript with no native dependencies.
- Network Graph Layouts - Positions nodes and edges in directed graphs using layout algorithms for clear readability.
- Directed Graph Layouts - Positions nodes and edges in directed graphs with layered algorithms for clear readability.
- Dependency Graph Visualizations - Renders dependency structures such as package dependencies with readable layouts.
- Barycenter Ordering Heuristics - Uses barycenter heuristics to minimize edge crossings in layered graph layouts.
- Graph Coordinate Assignment Algorithms - Assigns final x coordinates via slack-based longest-path optimization under separation constraints.
- Flowchart Generators - Produces structured layouts for flowcharts, state machines, and process diagrams.
- Diagramming And UI Libraries - Directed graph layout algorithms for JavaScript.
