Drawing Flow Diagrams with GraphViz

Recently I’ve been drawing a few different kinds of diagrams for a book I was writing, and been using graphviz to create them. Since I struggled a bit to get them going the way that I wanted them to, I am sharing them here (as much for my future self as anyone else visiting, but if they help you too then that’s excellent).
The diagram itself looks like this – it’s a simplified representation of choosing an access modifier in PHP:

It’s generated using the following code:


digraph {
start [label="Start"];

start -> decision;

decision [shape=diamond, label="Accessed externally?"];

decision -> public [label="Yes"];
decision -> notpublic [label="No"];

public [shape=box, label="public"];
notpublic [shape=diamond, label="Deny to children?"];

notpublic -> protected [label="No"]
notpublic -> private [label="Yes"]

protected [shape=box, label="protected"]
private [shape=box, label="private"]

{ rank=same; decision; public }
{ rank=same; notpublic; private }

}

I used a few different shapes to create the elements shown, and this is a directed graph. To show the decisions, I used labels on edges. And to line everything up as shown here, I used the rank=same settings, to put pairs of elements at the same level, even though graphviz would have started at the top and then added downwards arrows for each element.

2 thoughts on “Drawing Flow Diagrams with GraphViz

  1. Very nice. Did you ever expand this example to have decisions that have to make arrows go back up to previous steps, as a possible loop? I’m looking to do similar things to what you have here, but I have elements that make you possibly redo steps…

Leave a Reply

Please use [code] and [/code] around any source code you wish to share.

This site uses Akismet to reduce spam. Learn how your comment data is processed.