Graph.js

Basic Usage

Graph.js is a tool for creating editable graphs on the HTML canvas element. Vertices and edges are created by clicking on the canvas. Initializing a graph is simple:

Graph.js supports JSON serialization, meaning that the vertex and edge information of a graph can be saved and loaded.

Graphs may also be saved and loaded from Local Storage.

Graph.js supports graphs that are editable: that is, vertices can be added and moved, as in the example below (try clicking and dragging a vertex).

Making a graph editable is also very easy:

Configuration Options

Graph.js is designed to be customizeable. The setOption command provides several configurable settings, including vertexDrawFunction, edgeDrawFunction, and physics. The following code snippet gives a usage example:

The vertex and edge draw functions shown above give the following result:

As well, the underlying graph structure can be manipulated programmatically by accessing and modifying the graph member object of the Graph.js Graph class. This writeup won't go into detail about this process.

Server-side storage

The JSON serialization lends itself naturally to server-side storage of graphs. This allows a graph to be constructed using a graph creation application such as the one I created here, and then displayed later in a different format (for example, as a static illustration, such as the ones on this page.

The following code snippet illustrates how a script might fetch a graph, indexed by an id, from a server.