David Banks

Web development tips and tutorials


JavaScript library for manually drawing simple node-link diagrams.

GitHub: SimpleDiagram.js

SimpleDiagram.js is a small JavaScript library for creating simple diagrams with nodes and links. There is nothing fancy going on here; no complex algorithms for positioning are included. You'll need to supply all the positions of the nodes yourself. This lets you craft a diagram to be laid out exactly the way you want, but at the cost of more work on your part as you determine the coordinates of every node and other shapes you want to add to your diagram.

The SimpleDiagram.js library builds diagrams with SVG which is supported in all modern browsers. It comes with 2 files you'll need to include in your page: the JavaScript file and a CSS file containing all of the default styles. You can explore the CSS styles and customise them to suit your needs. You can find these files on the GitHub project page.

See the GitHub page on how you can get started with SimpleDiagram.js.

Related Posts

No posts found.

Example screenshot