Skip navigation.

ed.blog

You will be vectorized.

Modelling state machines

, , ,

Your browser doesn't support SVG or this feed was mangled to remove all 'object' elements. You may see the post in its original form at my.opera.com/macdev_ed. You may download a browser that supports SVG here.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:
[statemachine in SVG format]

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?

A new way to say Hooray!Falling back, or falling down...

Comments

Anonymous 15. April 2008, 08:30

Kim Sullivan writes:

This might be too complicated for your needs, so it depends on how much graphs you need to generate...

Use Dot2TeX to convert your graphs to LaTeX (which has much greater presentation capabilities)
Compile it using latex
convert the resulting image from postscript/dvi to svg.

Dan Alexandru 15. April 2008, 19:20

You'll probably have to manually script something. All I know that's similar is Mathematica

Erik Dahlström 16. April 2008, 10:04

Postprocessing the svg output seems like a much simpler solution than using dot2tex. Well, guess I'll have to do it myself then, unless someone knows of a better option. At least the svg output is rather clean.

Anonymous 16. April 2008, 14:02

Anonymous writes:

try other modes - maybe twopi - it looks more symmetric or play with wheights of edges. graphviz is more general tool than drawing nifty looking diagrams - it will handle big complicated layouts that are impossible to draw pretty.

Erik Dahlström 30. April 2008, 10:24

I have tried all the other modes, didn't help much. I ended up checking out the graphviz codebase instead, and began making some changes to the svg output plugin. However, it's just a hobby project so we'll see how much time I'll have for it. I did note that there were quite a few old svg bugs on the graphviz buglist, that were easy to fix.

There are a number of things I'd like to do with the svg output:
1. use a <style> element to get less duplication (makes files smaller)
2. arrows should use svg markers, instead of being just a dumb path duplicated everywhere
3. get rid of the DTD cruft
4. make sure "px" is specified on font-size in style attributes (if used at all)

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies