Creating Graphs With DOT Language

DOT is a graph description language. DOT graphs are typically files with the filename extension gv or dot.

Graphvizonline can be used for creating/viewing these DOT graphs.

This makes it really easy to create graphs of dependencies or possibly UML diagrams. The best part is that since it is plain text, you can programmatically create these graphs, and/or track them with version control.

Simple Dependency Example

Here is a really basic example that may show dependencies between tasks.

digraph MyGraphName {

  Task1 -> Task2;
  Task2 -> Task3;
  Task2 -> Task4;
  Task3 -> Task5;
  Task4 -> Task5;
}

Applying Labels

Unfortunately, you cannot have spaces or hyphens in the name, so you will probably want to just set a label instead like so:

digraph MyGraphName {
  a[label="Task 1"];
  b[label="Task 2"];
  c[label="Task 3"];
  d[label="Task 4"];
  f[label="Task 5"];

  a -> b;
  b -> c;
  b -> d;
  c -> f;
  d -> f;
}

Directed vs Undirected Graphs

You will notice that we started each of the previous examples with digraph MyGraphName. If you do not want arrows between the nodes, then use graph instead of digraph and change the -> to just --.

E.g.

graph MyGraphName {
  a -- b;
  b -- c;
  b -- d;
  c -- f;
  d -- f;
}

Long Chains

You are not limited to 2 nodes in a chain, you can specify any number. E.g.

graph MyGraphName {
    a -- b -- c;
    b -- d;
    c -- e;
    d -- e;
}

Shapes

You can specify the shapes of the nodes like so:

graph MyGraphName {
    a [shape=diamond];
    b [shape=box];
    c [shape=plaintext];
    d [shape=Msquare];
    e [shape=Mdiamond];
    a -- b -- c -- d -- e;
}

Multiple Attributes - Style, Colour, Label, and Shape

You can style and colour the nodes too. E.g. the following will produce a dotted blue diamond.

graph MyGraphName {
    a [shape=diamond, style="dotted", label="Dotted Blue Diamond", color="blue"];
    a -- b -- c;
}

Styled Lines

If you want to change the attributes of the lines, you have to specify this like so:

graph MyGraphName {
    a -> b [style="dotted", color="blue"];
}

Label The Connections

Just as you can style the connections, you can label them too:

digraph G {
    a -> b[label="do something"];
}

UML Question Example

Using the knowledge above, we can build a UML diagram question node. E.g.

digraph G {
    question[label="User is drunk?", shape=diamond];
    b[label="Go to jail."];
    c[label="Collect $200"];

    a -> question;

    question -> b[label="true"];
    question -> c[label="false"];
}

DOT UML

The examples above focused on just abilities supported in GraphvizOnline, but you can use DotUML to create these types of diagrams:

• Use Case
• Sequence
• Class
• State
• Deployment

References

• Wikipedia - DOT (graph description language)