
WebGraphviz: Graphviz in the Browser - sillysaurus3
http://www.webgraphviz.com/
======
tckr
I personally find [http://viz-js.com](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/](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](https://github.com/magjac/d3-graphviz)

------
grey
Plugging my old student project for GraphViz reference/examples:
[https://graphs.grevian.org/](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

------
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](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](https://github.com/magjac/d3-graphviz)

Any feedback is welcome.

------
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](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/](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?

~~~
chaz6
It is very useful in corporate networks where you are not allowed to install
anything locally.

~~~
jraph
There is a market to take here: Javascript as a Service, to bypass CorpNets.

------
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](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/](http://viz-js.com/) \- Almost live updating. Quite fast,
looks good, has lots of flexibility in output format.

[http://www.webgraphviz.com/](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](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](http://visjs.org/network_examples.html)

~~~
applecrazy
I meant rendering tikz diagrams[1] using js/canvas tag. It's used commonly in
math textbooks typeset in LaTeX.

[1]: [https://www.sharelatex.com/blog/2013/05/28/How-to-draw-
Vecto...](https://www.sharelatex.com/blog/2013/05/28/How-to-draw-Vector-
Graphics-using-TikZ-in-LaTeX.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](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](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...](https://gist.github.com/anonymous/52cd90a1fa9c36b1b3e87a431d20eef2)

(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...](https://github.com/mdaines/viz.js/blob/a8f5fd9ec41482e31bb0b2c8cb75a9abb866692a/src/viz.c#L31)
and more generally to the viz.js codebase:
[https://github.com/mdaines/viz.js](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](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.

