This is a 2d graph renderer, which uses Fabric.js as a rendering engine. This library is a part of ngraph project.

NB: Image above was rendered from Node.js. Click on the image to see interactive version rendered by the same code in your browser.

This code will render interactive graph:

  // let's create a simple graph with two nodes, connected by edge:
  var graph = require('ngraph.graph')();
  graph.addLink(1, 2);

  // Create a fabric renderer:
  var fabricGraphics = require('ngraph.fabric')(graph);

  // And launch animation loop:
  fabricGraphics.run();

Use mouse wheel to zoom in/zoom out, drag canvas/nodes with left mouse button. More examples are available in the examples folder. You can also play with browserified examples here:

• Default UI rendering
• Custom look and feel for nodes and links
• Add/remove graph's elements dynamically
• Hover mouse over a node to get a wave

There are many ways to customize fabric graphics. I made them symmetrical to ngraph.pixi graphics. See README for more details.

If you like fabric.js and want to help with graph rendering, your contribution is absolutely welcomed and appreciated.

If you know how to improve rendering speed with fabric.js please let me know. Currently it does not handle well graphs with more than 500 node and 1000 links.

Fabric has very well documented API and you can use any of those primitives as your rendering tools. What makes it absolutely awesome: Same code can be executed in the browser and on the server using node.js. Thus you can reuse code to render static images of graphs or animate them in the browser.

With npm do:

npm install ngraph.fabric

MIT