Drawing diagrams using Joint.js

try a few in the JS Draw graph library, or joint.js suitable for some, for the simple diagram display is very suitable. Specific Links:

Http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html

Demo

1.script and CSS Downloads:

Http://jointjs.com/download:


<link rel= "stylesheet" href= "Joint.css" >
<script src= "Joint.js" ></script>
<script src= "Joint.layout.DirectedGraph.js" ></script>


Http://www.daviddurman.com/assets/autolayout.js:


<script src= "Autolayout.js" ></script>


2. Sample code:

<link rel= "stylesheet" href= "Joint.css" ><script src= "joint.js" ></script><script src= " Joint.layout.DirectedGraph.js "></script><script src=" Autolayout.js "></script><textarea Id= "Adjacency-list" rows=40 cols=100>{' a ': [' B '], ' a ': [' C '], ' B ': [' f '], ' C ': [' e ', ' d '], ' d ': [], ' e ': [], ' F ' ': [' g '], ' g ': []}</textarea><br><button id= "Btn-layout" >layout</button><div id= "paper" ></div><script>//main.//-----var graph = new Joint.dia.graph;var paper = new Joint.dia.Paper ({el: $ (' #paper '), width:2000, height:2000, Gridsize:1, model:graph});//Just give the viewport a little padding. V (Paper.viewport) translate, $ (' #btn-layout '). On (' click ', layout), function layout () {try {var Adjac    Encylist = eval (' adjacencylist = ' + $ (' #adjacency-list '). Val ());        } catch (e) {alert (e);}    var cells = buildgraphfromadjacencylist (adjacencylist); Graph.resetcells (cElls); Joint.layout.DirectedGraph.layout (graph, {setlinkvertices:false});} Layout ();</script>

Drawing diagrams using Joint.js