Dracula.js is a set of tools to display and layout interactive connected graphs and networks, along with various related algorithms from the field of graph theory.
Creating a graph is simple! You also can customize anything easily.
var g = new Dracula.Graph(); g.addEdge("strawberry", "cherry"); g.addEdge("strawberry", "apple"); g.addEdge("strawberry", "tomato"); g.addEdge("tomato", "apple"); g.addEdge("tomato", "kiwi"); g.addEdge("cherry", "apple"); g.addEdge("cherry", "kiwi"); var layouter = new Dracula.Layout.Spring(g); layouter.layout(); var renderer = new Dracula.Renderer.Raphael('canvas', g, 400, 300); renderer.draw();
There’s also a copy on cdnjs to use for production:
Note: If you are looking for a commercially backed graph drawing software for the browser, take a look at the fantastic library yFiles for HTML! It is the most feature complete graph drawing library available for HTML5 and pleasant to work with.