8 ms·

WebGraphviz: Graphviz in the Browser

171 points by sillysaurus3 9y ago

magjac 9y ago
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.
btown 9y ago
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 9y ago
  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.
tckr 9y ago
I personally find http://viz-js.com http://viz-js.com to be superior.
- jraph 9y ago
  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/
applecrazy 9y ago
While this is certainly interesting, I've been looking for a JS tikz port using <canvas>
- fpazin 9y ago
  visjs.org can render graphs using canvas : http://visjs.org/network_examples.html http://visjs.org/network_examples.html
  - applecrazy 9y ago
    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-Vector-Graphics-using-TikZ-in-LaTeX.html https://www.sharelatex.com/blog/2013/05/28/How-to-draw-Vecto...
sleavey 9y ago
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 9y ago
  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/
grey 9y ago
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
ape4 9y ago
Graphviz can output to svg and that's all this seems to be doing. I guess it saves you install it.
- hawski 9y ago
  Isn't it the whole point of WebAnything?
  - chaz6 9y ago
    It is very useful in corporate networks where you are not allowed to install anything locally.
    - jraph 9y ago
      There is a market to take here: Javascript as a Service, to bypass CorpNets.
- flgr 9y ago
  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.
firlefans 9y ago
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
sillysaurus3 9y ago
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/52cd90a1fa9c36b1b3e87a431d20eef2 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/a8f5fd9ec41482e31bb0b2c8cb75a9abb866692a/src/viz.c#L31 https://github.com/mdaines/viz.js/blob/a8f5fd9ec41482e31bb0b... 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 9y ago
  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.
_pdp_ 9y ago
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 9y ago
Is there any interest in having a IDE-Like experience for graphviz, e.g. having context sensitive auto completion and refactorings?

171 points by sillysaurus3 9y ago

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.

btown 9y ago

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 9y ago
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.

tckr 9y ago

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

jraph 9y ago
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/

applecrazy 9y ago

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

fpazin 9y ago
visjs.org can render graphs using canvas : http://visjs.org/network_examples.html http://visjs.org/network_examples.html
- applecrazy 9y ago
  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-Vector-Graphics-using-TikZ-in-LaTeX.html https://www.sharelatex.com/blog/2013/05/28/How-to-draw-Vecto...

sleavey 9y ago

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 9y ago
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/

grey 9y ago

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

ape4 9y ago

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

hawski 9y ago
Isn't it the whole point of WebAnything?
- chaz6 9y ago
  It is very useful in corporate networks where you are not allowed to install anything locally.
  - jraph 9y ago
    There is a market to take here: Javascript as a Service, to bypass CorpNets.
flgr 9y ago
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.

firlefans 9y ago

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

sillysaurus3 9y ago

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/52cd90a1fa9c36b1b3e87a431d20eef2 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/a8f5fd9ec41482e31bb0b2c8cb75a9abb866692a/src/viz.c#L31 https://github.com/mdaines/viz.js/blob/a8f5fd9ec41482e31bb0b... 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 9y ago
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.

_pdp_ 9y ago

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 9y ago

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