
JavaScript libraries to draw your own diagrams - durman
http://modeling-languages.com/javascript-drawing-libraries-diagrams/
======
simonsarris
I'm one of the lead developers of GoJS [1] (#4 on the page) and would be happy
to answer any questions.

A lot of our library additions are from fulfilling customer requests and needs
(see the change log from 1.4 to 1.5 to get an idea[2]), so if anyone finds
functionality particularly lacking in the diagramming libraries they use, I'd
love to hear about it.

[1] [http://gojs.net/latest/index.html](http://gojs.net/latest/index.html)

[2]
[http://gojs.net/alpha/doc/changelog.html](http://gojs.net/alpha/doc/changelog.html)

------
kmfrk
I can warmly recommend Mermaid
[[http://knsv.github.io/mermaid/](http://knsv.github.io/mermaid/)]. Extremely
straightforward syntax that's readable in plaintext.

Output is also super simple with no frills - even though the website doesn't
sell that very well.

------
bpodgursky
Personally I've found dagre-d3 to be by far the best library when presenting
actual useful graph data:
[https://github.com/cpettitt/dagre-d3](https://github.com/cpettitt/dagre-d3).

dagre is a layout library which implements graphviz in javascript, and renders
it in d3. d3's force-directed layout is great for demos, but I've never found
it good enough when trying to represent real data.

(edit: a link to my own simple, albeit demo, page using the library:
[http://nlpviz.bpodgursky.com/home](http://nlpviz.bpodgursky.com/home))

~~~
solatidorimafa
Have used Highcharts, MxGraph and Dagre-d3 in work projects and I should say
with more support (active development) to Dagre-d3 it would be way too good.
While considering for one of our projects
([https://github.com/caskdata/cdap/tree/develop/cdap-
ui](https://github.com/caskdata/cdap/tree/develop/cdap-ui)) our first choice
was dagre-d3 but since the github page for it clearly says No Active
Development going on, there was a bit of hesitation. Turned out to be pretty
good! :)

OP can definitely consider taking adding Dagre-d3 to that list, its free and
it figures out the space problem (how to space out your DAG) based on the
input. We don't have to figure out where to draw which node and how to draw
the edges!

~~~
merrily
If active development is a concern, you may want to consider ZingChart
([http://www.zingchart.com](http://www.zingchart.com) ) They release new
builds on a quarterly basis. The support is pretty responsive, too.

------
jsprogrammer
Found this pretty cool FBP & graph editor/visualizer: [https://github.com/the-
grid/the-graph](https://github.com/the-grid/the-graph)

Demo: [http://the-grid.github.io/the-graph/the-graph-
editor/index.h...](http://the-grid.github.io/the-graph/the-graph-
editor/index.html)

------
pp19dd
Seeing this, thought I'd share a prototype of mine. For the minecrafters out
there who use worldedit: here's a javascript library prototype that lets you
draw minecraft scenes. Demo is a doodling of a skeleton grinder:
[http://babylon.pp19dd.com/](http://babylon.pp19dd.com/) that I made the other
year.

Code example goes like something this:

    
    
      // var scene = (some babylon js stuff here, - sorry, messy)
      var WE = new Worldedit(scene);
      WE
        .select([-4, 0, -4])
        .set("cobblestone")
        .move([0, 2, 0])
        .select([0, -5, 7], [-1, -1, 6])
        .set("dirt")
    

Suppose I should consider finishing this library, namely porting it from
BabylonJS to three.js, finishing worledit functions, etc but thought it was a
fun exploration of babylonjs and raw files from minecraft (the textures are
just extracted from the minecraft jar file).

------
designml
You might also want to add P5.js [1] which is the official port of processing
to javascript.

[1] [https://github.com/processing/p5.js](https://github.com/processing/p5.js)

~~~
spv
This should be first in the list. I was wondering why it was not in the list..

------
fiatjaf
[https://github.com/mdaines/viz.js/](https://github.com/mdaines/viz.js/)

------
amelius
I'd prefer it if these libraries were split into a non-graphical and a
graphical part. Basic functions such as computing a layout from scratch, or
computing an updated layout (rerouting or adding an edge), etc., belong in the
first library. And UI stuff belongs in the second library. This way, users can
decide if they like the user-interaction, and write their own if necessary.

~~~
erispoe
d3 is pretty much of the first type, it binds data with DOM elements. The DOM
elements can be of various types. With your proposal, what we miss is
something akin to Bootstrap, but for data visualizations, styling SVG elements
for instance.

~~~
amelius
But if it is tied to the DOM, then what if I want to run it on the server
(nodejs) or if I want to generate PDF?

------
frik
I have used FLOT, it's one of the best open source Canvas based chart JS
libraries. It is based on JQuery, that is the only downside (at least for my
purpose). [http://www.flotcharts.org/](http://www.flotcharts.org/) From my
experience it was more lightweight than D3 and offered compareable results to
highcharts library.

------
based2
Another one for fast UML sequence creation
[http://jumly.tmtk.net/try.html](http://jumly.tmtk.net/try.html)

[http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charti...](http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks)

------
contingencies
Author skipped graphviz in JS:
[https://code.google.com/p/canviz/](https://code.google.com/p/canviz/) ...
another good tool is mscgen @
[http://www.mcternan.me.uk/mscgen](http://www.mcternan.me.uk/mscgen)

~~~
hatsix
CanViz seems abandoned, nothing new in 2 years... There's a comment about how
the author might move it to github, maybe.

Mscgen isn't javascript.

------
peshkira
I've used and had good experiences with jqplot [1] and highcharts [2] in a few
projects.

[1] [http://www.jqplot.com](http://www.jqplot.com)

[2] [http://www.highcharts.com](http://www.highcharts.com)

------
therealunreal
There's also [http://visjs.org/](http://visjs.org/) that I've used on a
project. See the Network examples; it's pretty cool.

------
etimberg
Another library to consider is Snap SVG [1]. It's written by the author of
Raphael

[1] [http://snapsvg.io/about/](http://snapsvg.io/about/)

------
darcyparker
Another to checkout:
[http://cytoscape.github.io/cytoscape.js/](http://cytoscape.github.io/cytoscape.js/)

------
newtoncalegari
I've been studying some frameworks and trying to make a visual tool for
creating diagrams and mind maps. I'll try GoJs (I would prefer if it uses
SVG).

------
poseid
interesting things! visual languages for the web are increasingly important, I
discussed some viewpoints on this with d3js and processingjs here:
[http://thinkingonthinking.com/visual-
languages/](http://thinkingonthinking.com/visual-languages/)

------
cbd1984
How do these compare to graphviz?

------
nemoniac
d3 has about 10 times as many github stars as its nearest neighbour. No
competition.

~~~
enjoylife
d3 is sure useful and I have used it for displays of custom seismic data, but
I wouldn't use it for all situations. Furthermore, To base a decision on which
to use soley by star count would be ignoring all the more advanced and use
case specific features the other libraries bring.

