WebGraphviz: Graphviz in the Browser

[tckr]

I personally find http://viz-js.com to be superior.

[jraph]

I have used Viz.js since 2012 in Aude [1], a tool to play with Finite State Machines, in order to display results from algorithms like minimization, determinization and other common FSM-related algorithms, and also to provide an automatic redraw feature when drawing FSMs. The user can also input FSMs in a small description language, and they are drawn automatically using the same system.

For people who don't know Viz.js, it is basically GraphViz compiled for the web as ASM.js using emscripten plus a convenient way to call it. Usage is simple: you give the DOT code, and it returns an SVG document as string (other formats are actually supported).

Viz.js is awesome. Thanks Mike Daines! And obviously, thanks Graphviz!

Webgraphiz uses a viz.js file. Is it actually the same Viz.js? (edit: yes, it is)

[1] https://aude.imag.fr/

[firlefans]

I found this project to be easy to use, it produces SVG output with d3:

https://github.com/magjac/d3-graphviz

[magjac]

I'm the author of d3-graphviz so you probably shouldn't believe a word I say ;-)

d3-graphviz is based on the Viz.js port of Graphviz and does animated transitions between graphs. See e.g. this demo: https://bl.ocks.org/magjac/4acffdb3afbc4f71b448a210b5060bca

Since d3-graphviz is based on Viz.js it can can do everything that Viz.js can do. Also, it adds the following features:

    Animated transition of one graph into another
    Edge path tweening
    Node shape tweening
    Fade-in and fade-out of entering and exiting nodes and edges
    Animated growth of entering edges
    Panning & zooming of the generated graph

Extensive docs at: https://github.com/magjac/d3-graphviz

Any feedback is welcome.

[grey]

Plugging my old student project for GraphViz reference/examples: https://graphs.grevian.org/

I wouldn't mind changing it to use a js renderer, currently it's using the (deprecated!) Google image api but I hadn't really found anything as complete/safe/reliable to replace it

[sleavey]

Does anyone know of a tool that draws graphs that obey angular constraints? I made a tool that drew acyclic graphs this way [1] but for graphs containing cycles it suddenly becomes a nonlinear problem that (I think) needs CAD-style geometric constraint solving. I plan to implement this sort of thing in the tool eventually, but it'd be easier if there was something already available.

[1] https://github.com/SeanDS/optivis

[sigstoat]

i think you could fairly easily encode the layout/constraint solving portion of that as an SMT problem in nonlinear real arithmetic. which dReal should be able to solve https://dreal.github.io/

[ape4]

Graphviz can output to svg and that's all this seems to be doing. I guess it saves you install it.

[hawski]

Isn't it the whole point of WebAnything?

[flgr]

Another use case I had was embedding this into a graph heavy MediaWiki with convenient markup. That means the graphs are very easy to edit and will be updated after each edit with no backend magic required.

[btown]

This brings back memories of a similar port of Graphviz to the web I started (then unfortunately abandoned) years ago; it's likely this is way more optimized, but perhaps my project can serve as illustrative of what's needed for an Emscripten port: https://github.com/bpartridge/graphviz.js

EDIT: or rather, what was needed for such a port a few years ago; I think it's been made much simpler since then!

[froindt]

For current tools, I was looking into online Graphviz renderers a few months ago. My take on things:

http://viz-js.com/ - Almost live updating. Quite fast, looks good, has lots of flexibility in output format.

http://www.webgraphviz.com/ - If you don't want any chance of data going to an external server, this can be saved locally and works fine.

[_pdp_]

That's cool. I recently started building a graphical tool as well. Slightly different direction though. Here is a map of uber's public network estate: https://recon.secapps.com/f/EMaO

[hoppelhase]

Is there any interest in having a IDE-Like experience for graphviz, e.g. having context sensitive auto completion and refactorings?

[applecrazy]

While this is certainly interesting, I've been looking for a JS tikz port using <canvas>

[fpazin]

visjs.org can render graphs using canvas : http://visjs.org/network_examples.html

[sillysaurus3]

Wait, was this really written in 93?

There's no way, right? Was JS even this functional back in 93?

Hmm, I wonder what the cite at the bottom means then:

Object Oriented Graphs

Stephen North, 3/19/93

Searching Stephen North brings up a very interesting Google Scholar page full of citations about graphs and dot: https://scholar.google.com/citations?user=_QJP9-0AAAAJ&hl=en

Neato. (Ha. Cue yakety-yak music.)

Holy moly! Attention HN, we have a delightful mystery on our hands! Sound the alarm: http://www.webgraphviz.com/viz.js

So who cares? Well, it's clojure-compiled for one, so all the variables are all Yu Ugy Jagugnug (i.e. Worf would understand).

For two, the js-beautified version is 56,586 lines! What could this be?

It's all hardcore math/algorithm type code. No comments, no indication of how to pick up the scent. Hmmm.

Welp, there goes my afteroon. See you on the flipside. tugs feverishly at massive ball of string^Wyarn^WJS

Here's a beautified gist, if you want to dig. https://gist.github.com/anonymous/52cd90a1fa9c36b1b3e87a431d...

(Seriously though, WTF is going on in that file? The last time I saw 55k lines of condensed algorithms, it was when I concatenated together all of emacs' source code from one of its earliest commits.)

Oh.. Is this just emscripten? It looks like compiler output. Yeah, "g | 0" is an asm.js trick.

Man.. This is a really effective way to obfuscate code, holy moly. So I'm guessing that's just graphviz's C code?

EDIT: Yup. At the very bottom, there's a single string, literally the only string in the entire file that gives any clue what the heck is going on: "vizRenderFromString".

And indeed, it leads us to https://github.com/mdaines/viz.js/blob/a8f5fd9ec41482e31bb0b... and more generally to the viz.js codebase: https://github.com/mdaines/viz.js

Oh, duh. Graphviz was written back in '93, and that sample code contains a citation back to its author.

What a cool program! And a cool sequence of layers... I love the onion-y nature of modern computing.

[MurrayHill1980]

Some important tools were written after 1993 (stress majorization around 2004 https://graphviz.gitlab.io/_pages/Documentation/GKN04.pdf ; sfdp around 2007-08 when Yifan Hu joined AT&T Research, edge bundling in mingle and orthogonal routing were done in the last few years) but, yes, basically right.