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.

Just plain JavaScript and SVG. The code is released under the MIT license, so commercial use is totally fine.

Creating a graph is simple! You also can customize anything easily.

The code:

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 ( ) ;

The result:

There’s also a copy on cdnjs to use for production:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/graphdracula/1.0.3/dracula.min.js"></script>

Enjoy.

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.

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. Just plain JavaScript and...