Skip navigation.

exploreopera

| Help

Sign up | Help

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

avatar
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.

By anonymous user, # 15. April 2008, 08:30:02

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

By dantesoft, # 15. April 2008, 19:20:18

avatar
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.

By MacDev_ed, # 16. April 2008, 10:04:17

avatar
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.

By anonymous user, # 16. April 2008, 14:02:49

avatar
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)

By MacDev_ed, # 30. April 2008, 10:24:45

Write a comment

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

Please type this security code : 553b47

Smilies