dagre

What is dagre?

The dagre npm package is a JavaScript library that provides facilities for graph layout. It is particularly useful for arranging nodes and edges in a directed graph, ensuring that the layout is visually appealing and easy to understand. Dagre uses a combination of algorithms to position nodes and edges in a way that minimizes edge crossings and distributes nodes evenly.

What are dagre's main functionalities?

Graph Creation

This feature allows you to create a new graph, add nodes, and define edges between them. The code sample demonstrates how to initialize a graph, set default properties, and add nodes and edges.

const dagre = require('dagre');
const g = new dagre.graphlib.Graph();
g.setGraph({});
g.setDefaultEdgeLabel(() => ({}));
g.setNode('a', { label: 'Node A', width: 50, height: 50 });
g.setNode('b', { label: 'Node B', width: 50, height: 50 });
g.setEdge('a', 'b');

Graph Layout

This feature performs the layout of the graph, positioning the nodes and edges in a visually appealing manner. The code sample shows how to apply the layout algorithm to the graph and retrieve the computed positions of the nodes.

const dagre = require('dagre');
const g = new dagre.graphlib.Graph();
g.setGraph({});
g.setDefaultEdgeLabel(() => ({}));
g.setNode('a', { label: 'Node A', width: 50, height: 50 });
g.setNode('b', { label: 'Node B', width: 50, height: 50 });
g.setEdge('a', 'b');
dagre.layout(g);
console.log(g.node('a')); // { label: 'Node A', width: 50, height: 50, x: 50, y: 50 }
console.log(g.node('b')); // { label: 'Node B', width: 50, height: 50, x: 150, y: 50 }

Other packages similar to dagre

cytoscape

Cytoscape is a graph theory library for visualizing and analyzing network data. It provides a wide range of layout algorithms and is highly customizable. Compared to dagre, Cytoscape offers more advanced features for interactive graph visualization and analysis.

d3-force

d3-force is a module of the D3.js library that provides force-directed graph layout algorithms. It is highly flexible and can be used to create dynamic, interactive visualizations. While dagre focuses on directed graphs, d3-force is more general-purpose and can handle various types of graph layouts.

elkjs

ELK (Eclipse Layout Kernel) is a layout engine for graph visualization. The elkjs package is a JavaScript port of ELK. It offers a variety of layout algorithms and is known for its high-quality layouts. Compared to dagre, ELK provides more options and fine-tuning capabilities for complex graph layouts.

README

dagre - Graph layout for JavaScript

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side.

For more details, including examples and configuration options, please see our wiki.

License

dagre is licensed under the terms of the MIT License. See the LICENSE file for details.