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

Category: Chart & Graph , Javascript | July 19, 2018
Author: DavidBanksNZ
Views Total: 2,504 views
Official Page: Go to website
Last Update: July 19, 2018
License: MIT


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) {

      row: node.row,
      column: node.column


Draw the links.

nodes.forEach(function(node) {

  if (!node.connectsTo)

      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



  • Updated to latest D3 v5.

You Might Be Interested In:

Leave a Reply