Pure JavaScript Graphviz equivalent [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 9 years ago.

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 w开发者_如何学编程ould 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.

---

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

---

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");

---

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.

---

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

---

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.

---

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

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