1 of 7

Focusing on the Flow with Dot

Evelyn J. Boettcher

Principal

2 of 7

digraph tree {

//define overall style (optional)

graph[label="Outline", fontname="Trebuchet MS",fontsize=18,ranksep=.4]

node[fontsize=14,shape=record,fontname="Trebuchet MS"]

edge[fontsize=14,penwidth=5, fontname="Trebuchet MS", color=grey50]

//define nodes (optional)

what[label="What",style="rounded,filled",shape=box,

fillcolor=steelblue,color=steelblue3]

why[label ="Why"style=filled, shape="doubleoctagon",

color="goldenrod",fillcolor=plum]

how[label ="Compilers",color=palegreen1,

fillcolor=palegreen3,style=filled]

ex1[label ="Examples",shape="invtrapezium"style=filled,

color=burlywood3,fillcolor="burlywood1"]

​

//Your FLOW

what->why->how->ex1

}

Outline

3 of 7

Dot

  • "dot" draws directed graphs as hierarchies.
  • It runs as a command line program, web visualization service, or with a compatible graphical interface.
  • Its features include well-tuned layout algorithms for placing nodes and edge-splines, edge labels, “record” shapes with “ports” for drawing data structures; and cluster layouts
  • It's part of GraphViz, an open source project developed at AT&T and released under an MIT license.
  • It is a high-quality and mature product, with very good documentation and support, available on all major platforms, including Unix/Linux, Windows, and Mac

(cite: www.graphviz.org/pdf/dotguide.pdf)

4 of 7

Why

  • Allows you to focus how things relate, before you fuss with style
  • It is Simple.
    • Connect the “nodes” with “->”
      • A -> B -> C
      • C -> {F,G}
    • Easily readable text format
  • Style can be USER defined
    • C[label=”Program Lead”, shape=box, color=steelblue ]
    • F[label=”Brown Noser”, shape=circle, color=goldenrod ]
    • G[label=”Lacky”, shape=octagon, color=palegreen3]
  • Easily portable from isolated machines.
  • Graph LARGE flows via script vs. by hand.
  • Control Flow versions with git

​

5 of 7

Plays well with Others

Dot has Bindings for many programming languages

—including Java, Perl, and Python

​

Generate Graphs with:

​

​

6 of 7

Drive your software with your flow

or make your flow after the fact.

​

Drive it with “DOT”!

Why?

  • Visualize the flow
  • Ensure the FLOW is defined
  • Less oops

​

​

digraph G {

node[style=filled]

rankdir=LR

F[label="Egg", shape=egg,

orientation=100, color=goldenrod1,

fillcolor=bisque]

G[label="Fried \n Chicken",

shape=invtrapezium, color=plum,

fillcolor=red, style="diagonals,filled",

penwidth=3]

edge[color="steelblue:goldenrod4",

dir=both, penwidth=3,

label="What Came First",

fontcolor=cyan4]

F->G

}

​

(cavet: Seen other people do this but have not upped my game yet.)

​

7 of 7

Examples

  • Large Plots -> http://graphviz.org/content/softmaint
  • Global Defaults
  • Flare
  • SubGraphs