dagre

visualization layout

Dagre is a JavaScript library for graph layout. Its primary purpose is to automatically optimize and arrange the visual representation of directional graphs composed of nodes and edges. This library utilizes graph theory to visualize complex network structures in a clear and comprehensible format.

Latest Ver 0.8.5

Homepage

Github

5,001

Finding Paths Through the Complexity of Graphs

Turn complex data structures into clear, intuitive diagrams.

Dagre is a JavaScript library that visualizes directional graphs with nodes and edges in an optimized layout.

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.core.js

https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.core.min.js

https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.js

https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<script>var g = new dagre.graphlib.Graph();g.setGraph({});g.setDefaultEdgeLabel(function() { return {}; });g.setNode('A', { label: 'Node A' });g.setNode('B', { label: 'Node B' });g.setEdge('A', 'B');dagre.layout(g);console.log(g.node('A'));console.log(g.edge('A', 'B'));</script>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.7.4/dagre.min.js"></script>

⚙️ JavaScript
var g = new dagre.graphlib.Graph();g.setGraph({});g.setDefaultEdgeLabel(function() { return {}; });g.setNode('A', { label: 'Node A' });g.setNode('B', { label: 'Node B' });g.setEdge('A', 'B');dagre.layout(g);console.log(g.node('A'));console.log(g.edge('A', 'B'));