Nifty flowchart generator with graphviz

While working on my talk to give an introduction to wikis at Free Geek, I played around with the Graphviz extension, and had quite a bit of fun.

With a few lines I was able to create this lovely flowchart on family interaction.


digraph family {
nodesep=1.0 // increases the separation between nodes
node [color=Red,fontname=Courier]
edge [color=Blue, style=dashed] //setup options
P [label="Parents"]
D [label="Daughter"]
S [label="Son"]
P->{ D S } [label="births", fontcolor=darkgreen] // Parents have a daughter and son dir="both" dir="back"
P->{ D S } [label="asks questions", dir="back", fontcolor=darkgreen]
D->S [label="fights", dir="both", fontcolor=darkgreen]
{rank=same; D S} //they have the same rank

}

or this


digraph datagraph {
graph [rankdir = "LR"]
subgraph cluster_0 {
style=filled;
color=lightgrey;
node [style=filled,color=white];
users -> {nodes watchdog}
label = "db tables";
}
watchdog [ label = "watchdog|wid|uid|type|message|timestamp", shape = "record" ]
nodes [ label = "node|nid|vid|type|title|uid", shape="record" ]
users [ label = "users|uid|name|pass|mail|created", shape="record"]
}

Reference: An Introduction to GraphViz and dot
GraphViz

No votes yet

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <img> <hr>
  • Lines and paragraphs break automatically.

More information about formatting options