David King

full stack developer

All Blog Articles

Prev « Convert From Tumblr to Jekyll Using PHP Next » Linux Shell - Cheat Sheet

GViz Mister! Embeddable graphViz

12 Apr 2013

As a visual thinker I always keep at hand a scrapbook, notepad or whiteboard covered in diagrams of various design; my favourite being flowcharts and spider diagrams. I find it very easy to group similar concepts or dependencies by visualising my scribblings, I can still picture a valuable diagram that has long been tossed in the paperbasket.

I've recently become a big fan of graphViz, a program that allows you to create "graphs" by defining the connections between nodes. It's a splendid piece of kit that is childs play to use, for example this diagram...

...is trivial to describe using the graphviz language, the layout and format is automatically calculated for you:

	digraph G {
		david -> notepad -> offline;
		david -> scrapbook -> offline;
		david -> whiteboard -> offline;
		david -> graphviz -> online;

Let's make that embeddable...

Normally you would have to fire up the command-line and run graphviz to convert your definition into an image to then view, however I've found these diagrams to be a critical part of my toolbox and have created an online webservice that allows them to be embedded directly into a webpage. No more command-line needed, just instant gratification!

Head over to my GViz documentation page to see how to embed graphs directly on your webpage...

Prev « Convert From Tumblr to Jekyll Using PHP Next » Linux Shell - Cheat Sheet