ed.blog

I was trying out some various ways of creating a simple state machine illustration in SVG this weekend. Basically I'm looking for a fairly highlevel description language that allows me to make changes easily while still providing automated layout and a good aestetic result that can be exported to SVG.

The following example (from Wikipedia) shows a simplified example of what I'd like to get as the end result.



It seemed like Graphviz was a sure fit to those criteria. This is what the above graph would look like if written in the DOT language that graphviz groks:

digraph simple_state_machine {
  node [shape = doublecircle]; S1;
  node [shape = circle] S2;
  node [shape = point] S0;
  S0 -> S1;
  S1 -> S2 [ label = "0" ];
  S1 -> S1 [ label = "1" ];
  S2 -> S1 [ label = "0" ];
  S2 -> S2 [ label = "1" ];
}

As you see this is fairly easy to write, and super easy to change. Exactly what I wanted in other words. Here's the output file:


Now the end result isn't as nice as the first example, which was "hand-drawn" in Inkscape judging by the comments in the file. Which brings me to my question: is there a program that can process the DOT input to produce something more similar to the first picture?