Creating Simple Diagrams with Nodes and Links Using SVG and D3.js – SimpleDiagram.js

SimpleDiagram.js is a small yet robust JavaScript library that makes it easy to draw simple diagrams with nodes and links using D3.js and SVG element.

Basic usage:

To get started, you must have D3.js JavaScript library in your web project.

<script src="d3.min.js"></script>

And then load the SimpleDiagram.js and SimpleDiagram.css in the document.

<link rel="stylesheet" href="SimpleDiagram-0.2.css">
<script src="SimpleDiagram-0.2.min.js"></script>

Create a container element for your diagram.

<div id="diagram"></div>

Create a new instance with options.

var diagram = new SimpleDiagram('#diagram', {
    /* options */
});

Create an array of nodes for the diagram.

var nodes = [
    {name: 'A', row: 2, column: 2, connectsTo: 'D'},
    {name: 'B', row: 2, column: 5, connectsTo: 'D'},
    {name: 'C', row: 2, column: 8, connectsTo: 'D'},
    {name: 'D', row: 5, column: 5, connectsTo: 'F'},
    {name: 'E', row: 8, column: 2, connectsTo: 'F'},
    {name: 'F', row: 8, column: 5}
];

Draw the nodes.

nodes.forEach(function(node) {
  diagram.addNode({
      name: node.name,
      label: node.name,
      row: node.row,
      column: node.column
  });
});

Draw the links.

nodes.forEach(function(node) {
  if (!node.connectsTo)
      return;
  diagram.addLine({
      from: node.name,
      to: node.connectsTo
  });
});

Default settings for each diagram. These can be over-ridden in the SimpleDiagram constructor function.

addGrid: true,
cellSize: 25,
numRows: 10,
numColumns: 10,
margin: 1,
interactive: true

Changelog:

07/19/2018

• Updated to latest D3 v5.