JavaScript libraries to draw your own diagrams | Hacker News Reader

JavaScript libraries to draw your own diagrams

modeling-languages.com

186 pointsdurman28 comments

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

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

I can warmly recommend 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.

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.

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)

I can also recommend 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."

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

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

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

Outside the network module, I have no feedback on visjs.

Found this pretty cool FBP & graph editor/visualizer: https://github.com/the-grid/the-graph

Demo: http://the-grid.github.io/the-graph/the-graph-editor/index.h...

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

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

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

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

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.

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.

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?

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/ From my experience it was more lightweight than D3 and offered compareable results to highcharts library.

Another one for fast UML sequence creation http://jumly.tmtk.net/try.html

http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charti...

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

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.

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

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

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

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

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

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

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

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

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/

How do these compare to graphviz?

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

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.

Reply on news.ycombinator.com