Welcome back to my four part series on Dot. In this installment, I go deeper on some of the options available regarding layout of Dot graphs.

Part 2: More Dot layout

I’m not sure that I can add value beyond what’s already available in the documentation - its simple, clear and concise. What I will do, however, is call out the things that I found most useful:

Colours, fonts and shapes (oh my?)

You have full control over the following layout attributes:

• Colour (of text, outline and background)
• Font face
• Font size
• Node shape
• Edge head & tail shapes

You could imagine modifying the sql that I demonstrated in part 1 to also select out some colour / formatting attributes into the nodes and edges. Another options is to generate your Dot code in an application layer – since ruby, C# or java are more expressive with SQL it’s a bit easier to generate some really interesting graphs.

HyperDot: URLs and Tooltips

Did you know that Dot can generate more than just image files? The Dot syntax supports adding tooltips and URLs into nodes, edges, and even arrowheads. However, there’s no way for this kind of information to be embedded into a gif, png or jpeg. Currently, the output formats that will let you see these are:

• SVG, which is natively supported by all browsers except for the most important one, is a web-aware xml based vector format (that is soon to be superseded by XAML). In firefox, for example, you could be viewing a graph that will hyperlink you to the appropriate web page when you click on an item on the graph. 
• HTML ImageMaps are elements that you can use to tack urls and tooltips onto specific areas of an image in a webpage. If you run Dot twice against the same piece of Dot code (but with different output formats), you can create the imagemap code that corresponds perfectly to the pixels drawn on the image. In Part 4, I will be talking further about how to achieve this in an ASP.Net web server. This functionality replicates what SVG provides you (without the pretty vector scaling, but with superb browser compatibility).  

Personally, I am hoping that someone will champion the Silverlight cause and write a native XAML output format for Dot . I have experimented with a couple of SVG to XAML converters, both XSLT files, but neither of them get the layout just right.

Next in this series: how to call into Dot from a .Net web server to dynamically generate server side images.

Welcome to part one of a four part series on getting some sweet visualisations of workflows, using the open source digraph tool “Dot”. This first post will be about dot’s DSL (which rocks), and how to generate it. Part two will look at some advanced styling and layout. Parts 3 and 4 will be about ways to publish this data over the Internet (Dot is a command line tool).

Dot’s input language is very simple. Here’s an example of a digraph generated by dot:

 

And the code to create this graph was:

digraph G{ //declare a digraph, and give it a name of “G”
    node[fontname=arial]; //sets the default font for all nodes
    bismuth212->thallium208[label="36%"]; //create a labelled edge
    bismuth212->polonium212[label="64%"];
    thallium208->lead208; //create an unlabelled edge
    polonium212->lead208;
    lead208[color=gray] //set the colour for the (already declared) lead 208 node
}

You can also give labels to nodes – the following code creates exactly the same graph:

digraph G{
    node[fontname=arial];

    1[label=bismuth212]
    2[label=thallium208]
    3[label=polonium212]
    4[label=lead208,color=gray]

    1->2[label="36%"];
    1->3[label="64%"];
    2->4;
    3->4;
}

You can get more information about the Dot language at the graphviz site.

I have recently started working on a project that involves a simple workflow. This workflow is modelled in my database. I’ve simplified it a bit, but here’s my schema:

 

And here’s my data:

State	Transition
ID    Name 1    Start 2    Write test 3    Run test (red stage) 4    Write function 5    Run test (green stage) 6    Refactor 7    Run test (refactor stage) 8    Finish	ID    FromStateID    ToStateID    Description 2    1    2    3    2    3    4    3    2    Passed 5    3    4    Failed 6    4    5    7    5    6    Passed 8    5    4    Failed 9    6    7    10    7    8    Passed 11    7    4    Failed

 

Not that easy to follow, huh? And this is a very simple example.

However, if we run the following (simple) SQL:

 

DECLARE @crlf varchar(2)
SET @crlf = char(13)+char(10)

DECLARE @s varchar(max)
SET @s = '  node[fontname=arial];'+@crlf

SELECT @s=@s+'  '
    +convert(varchar,ID)
    +'[label="'+Name+'"];'
    +@crlf
FROM State

SELECT @s=@s+'  '
    +convert(varchar,FromStateID)
    +'->'+convert(varchar,ToStateID)
    +'[label="'+Description+'"];'
    +@crlf
FROM Transition

SELECT 'digraph G{'+@crlf+@s+'}'

we’ll get the following output:

digraph G{

  node[fontname=arial];

  1[label="Start"];

  2[label="Write test"];

  3[label="Run test (red stage)"];

  4[label="Write function"];

  5[label="Run test (green stage)"];

  6[label="Refactor"];

  7[label="Run test (refactor stage)"];

  8[label="Finish"];

  1->2[label=""];

  2->3[label=""];

  3->2[label="Passed"];

  3->4[label="Failed"];

  4->5[label=""];

  5->6[label="Passed"];

  5->4[label="Failed"];

  6->7[label=""];

  7->8[label="Passed"];

  7->4[label="Failed"];

}

Which we can run through the dot tool:

C:\Program Files\Graphviz 2.21\bin>dot -Tgif -ooutput.gif

It’s not pretty (yet), but it’s so much easier to follow than looking at numbers. Hopefully I’ve got you thinking about how you could rewrite that SQL statement to work against your own database tables.

I’ll be posting a guide to styling and laying out this Dot diagram soon – stay tuned!