5 ms·

JavaScript libraries to draw your own diagrams

186 points by durman 12y ago

kmfrk 12y ago
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.
poseid 12y ago
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/
simonsarris 12y ago
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
cbd1984 12y ago
How do these compare to graphviz?
contingencies 12y ago
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 12y ago
  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.
designml 12y ago
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 11y ago
  This should be first in the list. I was wondering why it was not in the list..
peshkira 12y ago
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
fiatjaf 12y ago
https://github.com/mdaines/viz.js/ https://github.com/mdaines/viz.js/
nemoniac 12y ago
d3 has about 10 times as many github stars as its nearest neighbour. No competition.
- enjoylife 12y ago
  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.
bpodgursky 12y ago
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)
- raus22 12y ago
  I can also recommend http://marvl.infotech.monash.edu/webcola/ http://marvl.infotech.monash.edu/webcola/ which is "Javascript constraint based layout for high-quality graph visualization and exploration using D3.js and other web-based graphics libraries."
- solatidorimafa 12y ago
  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 11y ago
    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.
- jgalt212 12y ago
  Thanks for the heads up. I will have to check out dagre-d3. In the past we have used visjs. That being said, we have never really had much success with it as the networks, above a trivial size, never seem to settle in. i.e. the nodes keep bouncing around (and at visually sub-optimal edge lengths). http://visjs.org/network_examples.html http://visjs.org/network_examples.html Outside the network module, I have no feedback on visjs.
jsprogrammer 12y ago
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.html http://the-grid.github.io/the-graph/the-graph-editor/index.h...
amelius 12y ago
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 12y ago
  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 11y ago
    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?
newtoncalegari 12y ago
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).
etimberg 12y ago
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 12y ago
Another to checkout: http://cytoscape.github.io/cytoscape.js/ http://cytoscape.github.io/cytoscape.js/
pp19dd 12y ago
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).
therealunreal 12y ago
There's also http://visjs.org/ http://visjs.org/ that I've used on a project. See the Network examples; it's pretty cool.
deleted 11y ago
[deleted]
frik 11y ago
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 11y ago
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_charting_frameworks http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charti...

186 points by durman 12y ago

kmfrk 12y ago

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.

poseid 12y ago

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/

simonsarris 12y ago

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

cbd1984 12y ago

How do these compare to graphviz?

contingencies 12y ago

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 12y ago
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.

designml 12y ago

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 11y ago
This should be first in the list. I was wondering why it was not in the list..

peshkira 12y ago

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

fiatjaf 12y ago

https://github.com/mdaines/viz.js/ https://github.com/mdaines/viz.js/

nemoniac 12y ago

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

enjoylife 12y ago
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.

bpodgursky 12y ago

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)

raus22 12y ago
I can also recommend http://marvl.infotech.monash.edu/webcola/ http://marvl.infotech.monash.edu/webcola/ which is "Javascript constraint based layout for high-quality graph visualization and exploration using D3.js and other web-based graphics libraries."
solatidorimafa 12y ago
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 11y ago
  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.
jgalt212 12y ago
Thanks for the heads up. I will have to check out dagre-d3. In the past we have used visjs. That being said, we have never really had much success with it as the networks, above a trivial size, never seem to settle in. i.e. the nodes keep bouncing around (and at visually sub-optimal edge lengths). http://visjs.org/network_examples.html http://visjs.org/network_examples.html Outside the network module, I have no feedback on visjs.

jsprogrammer 12y ago

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.html http://the-grid.github.io/the-graph/the-graph-editor/index.h...

amelius 12y ago

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 12y ago
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 11y ago
  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?

newtoncalegari 12y ago

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).

etimberg 12y ago

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 12y ago

Another to checkout: http://cytoscape.github.io/cytoscape.js/ http://cytoscape.github.io/cytoscape.js/

pp19dd 12y ago

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).

therealunreal 12y ago

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

deleted 11y ago

[deleted]

frik 11y ago

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 11y ago

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_charting_frameworks http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charti...