This jQuery plugin allows you to create a directed graph. Simply add any existing HTML elements to the graph as nodes, then define edges between those nodes.

The edges of the graph are drawn on an HTML canvas, using an edge renderer of your preference.

To use this plugin, you will need to include both it and jquery on the page:

To get started, choose a containing element for the graph (the or some element with absolute or fixed position):

Let's say you want to add edges between these three divs:

If you don't want the edges to go over the nodes, ensure that the divs have z-index greater than the edges. By default, the edges will have z-index = 1.

Then initialize the graph by calling:

And that's it!

You can use the jquery-ui plugin to make your node elements draggable. The graph will automically re-render itself as the node elements are dragged.

You can specify a different color for each group of edges: $graph.fnEdge(".parent", ".child", "red");

You can choose a number of different edge rendering functions. Standard edge renderers supported are: "straight" and "bezier". Alternatively you can provide your own edge rendering function. For example: $("#container").graph({ renderEdge : function (canvas, source, target, color) { ... } })

Let me know what you think. Clone the project as you will. I am more than happy to pull contributions!