Pure JavaScript Graphviz equivalent

Question

Is anyone aware of a pure, Javascript based implementation of the directional flow diagrams that GraphViz is capable of generating? I am NOT interested in pretty visuals output, but the computations to figure out the maximum depth of each node, along with the layout of bezier lines that are optimized to minimize the number of intersecting edges when you are dealing with a graph rather than a tree of information. I would like to run this code both within a browser; I am aware that I could easily embed Graphviz into my Node server as an extension, or even popen() it and stream over graph information in the .dot format.

For reference, here is a typical GraphViz output. Note how elements are stacked and spaced out to allow the connecting lines to travel between nodes, without intersecting (very often) or passing through nodes.

enter image description here

Do you have an example of such a diagram, for those of us not familiar with GraphViz? — Matt Ball, Jun 14 '11 at 13:44
This seems to be a duplicate of [Graph visualization code in javascript?](http://stackoverflow.com/questions/7034/graph-visualization-code-in-javascript) — Daniel Pryden, Jun 15 '11 at 16:58
Maybe -- checking it out. A lot of comments and responses are pointing at charting tools that are nothing at all like GraphViz, or are only capable of *drawing* GraphViz output, but cannot do the layout themselves. — Armentage, Jun 16 '11 at 13:11

Greg Sadetsky · Accepted Answer · 2020-07-16T19:32:35.313

99

Take a look at this pure JavaScript implementation of a .dot canvas renderer:

http://ushiroad.com/jsviz/

The library is not documented -- the author definitely ought to publicize and document it more (I'll contact him to suggest he put it up on github, at the very least).

Update: code has been pushed to github: https://github.com/gyuque/livizjs

Update (14/2/2013): another contender has arisen! anybody interested in the subject should definitely take a look at Viz.js's example page and github repo.

Update (7/16/2020): (seven years later) http://webgraphviz.com/ is also great! :-)

edited Jul 16 '20 at 19:32

answered Jul 04 '12 at 20:33

Greg Sadetsky

4,863
1
38
48

1

This project looks amazing, and is probably the best solution of all I've seen, but it will definitely take some digging in the source to figure out how to use it. The code seems pretty reasonable though, so it may not be that bad. – captncraig Jul 05 '12 at 15:14
So far, this is the closest to what I was looking for in the original question. It is not just a RENDERER, it knows how to compute the directed graph as well. Is it running DOT on a backend somewhere, or is the entire graph generation algorithm running on my browser? – Armentage Jul 16 '12 at 15:52
1

@Armentage, it's running entirely in your browser. Graphviz has been compiled to JavaScript, thanks to [emscripten](https://github.com/kripken/emscripten/). The source code, though not as documented as it could be, is now fortunately (after nagging the author over Twitter and e-mail) ;-) available [here](https://github.com/gyuque/livizjs). Forking the project and making an easy-to-use API for it would be a first great step..! – Greg Sadetsky Jul 17 '12 at 15:05
5

Just wanted to add the [Graph Dracula](https://github.com/grigoryk/dracula-js-fork) library to the list of candidates. You can see a demo [here](http://www.graphdracula.net/). It computes the graph and displays it (using [Raphael](http://raphaeljs.com/)); the code is short and clean. – Greg Sadetsky Jul 25 '12 at 19:04
Livizjs is a great tool, but note that it does not support the full language, such as 'clusters' – Len Feb 04 '13 at 13:44
If you're looking to render a directed graph using d3.js but you want a Graphviz-style (i.e., layered, Sugayama) layout, try [Dagre](https://github.com/cpettitt/dagre) – Brian D'Astous Apr 05 '13 at 19:04
1

Ahah, I love the 7 years later update :D – Cokoyan Mar 27 '23 at 12:45

score 42 · Answer 2 · edited Nov 07 '17 at 01:22

42

After searching far and low I finally found the answer.

The solution was that someone cross compiled Graphviz to Javascript using llvm + emscripten. Here is the link:

http://viz-js.com/

The source can be found at: https://github.com/mdaines/viz.js

And to simply get a webpage up use:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");

edited Nov 07 '17 at 01:22

Greg Sadetsky

4,863
1
38
48

answered Feb 14 '13 at 01:30

Zachary Vorhies

521
4
4

This is exactly what I was looking for too – Rob Audenaerde Apr 09 '13 at 20:30
6

Update: I made a demo site showing how hooking in the viz.js is fun and easy! Check it out at www.webgraphviz.com – Zachary Vorhies Jul 23 '13 at 01:57
The provided github links are broken – Jaime Jul 14 '16 at 11:42
2

https://github.com/mdaines/viz.js – Somu Sep 23 '16 at 09:12

score 19 · Answer 3 · answered Feb 04 '13 at 01:00

19

After looking at all the options, I found viz.js (https://github.com/mdaines/viz.js/) based off of jsviz and graphviz.js to actually have an API usable from a webpage, and enough examples to understand.

answered Feb 04 '13 at 01:00

Jason Siefken

737
7
12

1

viz.js is great and very easy, not that it currently does not support html-like labels: http://www.graphviz.org/doc/info/shapes.html#html – Len Feb 08 '13 at 10:15

score 11 · Answer 4 · answered Jun 16 '11 at 19:07

11

One could try convert graphviz to javascript, just like it was done for the 'PDF reader' example: https://github.com/kripken/emscripten

answered Jun 16 '11 at 19:07

pedroteixeira

806
7
7

This is an insanely great suggestion. I was thinking of trying to translate the code to JS myself...... but this llvm trick is beautiful madness! – Armentage Jun 17 '11 at 04:34
I've actually given this a couple tries so far.. emscripten is still pretty young, and the documentation brief. Definitely a great project to watch, I can see how it could provide a lot of power. But right now if you're not the guy who wrote it it's somewhat unwieldy. – synthesizerpatel Dec 29 '11 at 06:44

w00t · Answer 5 · 2022-11-22T23:04:29.007

10

This is not a ready-made graphviz replacement but d3.js is a library that can do various layouts from given data and would be a great platform to implement graphviz on.

Here's an example of force-directed layouts which is one form of what graphviz does.

Here's a speech about layouts with insanely awesome interactive slides.

To get to know the project, the tutorials are very good.

edited Nov 22 '22 at 23:04

answered Jun 19 '12 at 14:54

w00t

17,944
8
54
62

1

https://github.com/cpettitt/dagre-d3 implements DOT diagram in JavaScript. You can play with the demo at http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html. – Mingye Wang Jan 06 '17 at 03:11

score 5 · Answer 6 · answered Apr 28 '12 at 04:24

5

Here is a cross compilation of Graphviz to Javascript done using Emscripten

https://github.com/bpartridge/graphviz.js

answered Apr 28 '12 at 04:24

Paul Dixon

4,201
7
28
27

Pure JavaScript Graphviz equivalent

6 Answers6

Linked