Dagre

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

  1. Completely client-side computed layout. There are great, feature-rich alternatives, like graphviz, if client-side layout is not a requirement for you.
  2. Speed. Dagre must be able to draw medium sized graphs quickly, potentially at the cost of not being able to adopt more optimal or exact algorithms.
  3. Rendering agnostic. Dagre requires only very basic information to lay out graphs, such as the dimensions of nodes. You're free to render the graph using whatever technology you prefer. We use D3 in some of our examples and highly recommend it if you plan to render using CSS and SVG.

Projects Based on Dagre

Screenshot of a Dagre-D3 visualisation - github

Cytoscape is a complete Graph Theory (a.k.a. network) library for analysis and visualisation- cytoscape.org

Dagre is rendering agnostic - you need something to visualise the graph. D3 is recommended, which is what is used by the Dagre-D3 project on github

Usage

Here's a quick example of how to set up nodes and edges:

// Create a new directed graph var g = new dagre.graphlib.Graph(); // Set an object for the graph label g.setGraph({}); // Default to assigning a new object as a label for each new edge. g.setDefaultEdgeLabel(function() { return {}; }); // Add nodes to the graph. The first argument is the node id. The second is // metadata about the node. In this case we're going to add labels to each of // our nodes. g.setNode("kspacey", { label: "Kevin Spacey", width: 144, height: 100 }); g.setNode("swilliams", { label: "Saul Williams", width: 160, height: 100 }); g.setNode("bpitt", { label: "Brad Pitt", width: 108, height: 100 }); g.setNode("hford", { label: "Harrison Ford", width: 168, height: 100 }); g.setNode("lwilson", { label: "Luke Wilson", width: 144, height: 100 }); g.setNode("kbacon", { label: "Kevin Bacon", width: 121, height: 100 }); // Add edges to the graph. g.setEdge("kspacey", "swilliams"); g.setEdge("swilliams", "kbacon"); g.setEdge("bpitt", "kbacon"); g.setEdge("hford", "lwilson"); g.setEdge("lwilson", "kbacon");