Graphviz for the browser

I have been using Graphviz to visualize families for a project at work recently. Graphviz is great for that sort of thing. The only concern I have is that I need to download it, and run some command-line every time I change something – that doesn’t feel very 2014. So i whiped up my own solution.


I did find a great online version, where I can just enter my script, and it shows the graph. That’s all great, but I can’t really trust my data to anyone else. The idea is great, but the execution is a bit lagging, as the way it apparently is working, is they store the script, and then run the command-line tool. Works great if you don’t have sensitive data, but what if you do.

I Googled a bit, and found Viz.js, that’s basically a version of Graphviz compiled for JavaScript. Thats just what I needed. This way the script is transformed into the resulting graph directly in my browser. No data is transmitted anywhere.

I was planning using a textarea to input, just like GraphViz Workspace, but took a trip on google as well to see if I could find something to make it a bit more editor-like. I found the Ace code editor. It even had a support for the dot-language, used to make the graphs – GREAT.

I am using Graphviz to make SVG, thats the example Viz.js shows, I dont know if I could do PNG etc, but SVG works fine, so I would like to use that. But what if you have crazy graphs, then they dont fit the window. Once again I took to Google and found another great project svg-pan-zoom, that makes SVG objects pan- and zoomable.

All three tings together, and I have the tool I really needed – Graphviz online.

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *