David "oodavid" King

creative problem solver

full service web development

GViz - Graphviz online

Nota Bene - I've written this over a couple of lunchtimes and haven't had time to properly write the documentation, I shall fix this page up ASAP.

Overview

  1. Add my hosted gviz.js script to your page
  2. Define some a gviz diagram on your page
  3. Enjoy as it is magically translated into a png

Instructions

Requires jQuery (I may refactoring it to not need this dependency)

1 - Add the gviz script to your page, either in <head> or before the closing </body> tag:

	<script type="text/javascript" src="http://gviz.oodavid.com/gviz.js"></script>

2 - Define your graphviz information inline...

<script type="gviz" data-layout="dot"><![CDATA[
	digraph G {
		this -> that;
		that -> theother;
		theother -> this;
	}
]]></script>

3 - Enjoy as it is automatically translated into an image

Helper Tool

Try out your graphViz definitions here and see the HTML source-code required and view the rendered graph.


Layout Engine:

Layout Engine

Do you see the data-layout attribute? That allows you to choose which of the graphviz layout engines to use for rendering your graph, I've only really used the "dot" engine, but have tested the others to work fine:

dot
"hierarchical" or layered drawings of directed graphs. This is the default tool to use if edges have directionality.
neato
"spring model" layouts. This is the default tool to use if the graph is not too large (about 100 nodes) and you don't know anything else about it. Neato attempts to minimize a global energy function, which is equivalent to statistical multi-dimensional scaling.
fdp
"spring model" layouts similar to those of neato, but does this by reducing forces rather than working with energy.
sfdp
multiscale version of fdp for the layout of large graphs.
twopi
radial layouts, after Graham Wills 97. Nodes are placed on concentric circles depending their distance from a given root node.
circo
circular layout, after Six and Tollis 99, Kauffman and Wiese 02. This is suitable for certain diagrams of multiple cyclic structures, such as certain telecommunications networks.

Make your graph transparent

<script type="gviz" data-layout="dot"><![CDATA[
	digraph G {
		graph [
			truecolor=true
			bgcolor="#FFFFFF00"
		];
		node [
			style=filled
			fillcolor="#FFFFFF"
		];
		this -> that;
		that -> theother;
		theother -> this;
	}
]]></script>

A Big example

	<script type="gviz" data-layout="dot"><![CDATA[
		digraph G {
			// General Settings
			graph [
				truecolor=true
				bgcolor="#FFFFFF00"
				fontname = "Ubuntu"
			];
			node [
				shape=box
				style=filled
				fillcolor="#FFFFFF"
				color=transparent
				fontcolor="#0F192A"
			];
			edge [
				color="#0F192A"
			];
			// Define our Nodes
			schema [label="Schema\nDefinition" shape=diamond color="#0F192A" penwidth=3];
			database [label="Database"];
			ui [label="Web UI"];
			mobile [label="Mobile UI"];
			validation [label="Validation"];
			crud [label="CRUD\nOperations"];
			sync [label="SYNC"];
			query [label="Query\nGenerator"];
			clustering [label="Marker\nClustering"];
			search [label="Search"];
			// Define our Connections
			schema -> database;
			schema -> crud;
			schema -> ui;
			schema -> mobile;
			ui -> crud -> database
			schema -> query -> database;
			query -> search -> database;
			query -> clustering;
			database -> validation -> database;
			database -> sync;
			crud -> validation;
		}
	]]></script>