@dagrejs/dagre

What is @dagrejs/dagre?

@dagrejs/dagre is a JavaScript library that provides facilities for graph layout. It is particularly useful for creating directed graphs and arranging nodes and edges in a visually appealing manner. The library is often used in conjunction with visualization libraries like D3.js to render the graphs.

What are @dagrejs/dagre's main functionalities?

Graph Creation

This feature allows you to create a 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('@dagrejs/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 allows you to compute the layout of the graph. The code sample shows how to use the `dagre.layout` function to calculate the positions of the nodes.

const dagre = require('@dagrejs/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: 25, y: 25 }
console.log(g.node('b')); // { label: 'Node B', width: 50, height: 50, x: 75, y: 75 }

Custom Node and Edge Attributes

This feature allows you to add custom attributes to nodes and edges. The code sample demonstrates how to set and retrieve custom attributes for nodes and edges.

const dagre = require('@dagrejs/dagre');
const g = new dagre.graphlib.Graph();
g.setGraph({});
g.setDefaultEdgeLabel(() => ({}));
g.setNode('a', { label: 'Node A', width: 50, height: 50, customAttr: 'customValue' });
g.setNode('b', { label: 'Node B', width: 50, height: 50 });
g.setEdge('a', 'b', { label: 'Edge from A to B', customEdgeAttr: 'edgeValue' });
dagre.layout(g);
console.log(g.node('a').customAttr); // 'customValue'
console.log(g.edge('a', 'b').customEdgeAttr); // 'edgeValue'

Other packages similar to @dagrejs/dagre

cytoscape

Cytoscape is a graph theory library for visualization and analysis. It provides a rich set of features for graph manipulation and visualization, including support for various layouts, styles, and interaction capabilities. Compared to @dagrejs/dagre, Cytoscape offers more comprehensive visualization options and is more suitable for complex graph analysis tasks.

d3-force

d3-force is a module of the D3.js library that provides force-directed graph layout algorithms. It is highly customizable and integrates well with other D3 modules for creating interactive visualizations. While @dagrejs/dagre focuses on directed graphs and hierarchical layouts, d3-force is more general-purpose and can be used for a wider range of graph types.

vis-network

vis-network is part of the vis.js library and provides tools for network visualization. It supports dynamic, interactive, and customizable network graphs. Compared to @dagrejs/dagre, vis-network offers more built-in interactivity and is easier to use for creating interactive network visualizations out of the box.

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.

There are 2 versions on NPM, but only the one in the DagreJs org is receiving updates right now.

License

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