Graphviz Examples

You may also like to read about Flowcharts in Graphviz.

Sketchviz uses Graphviz, which translates descriptions of graphs written in the DOT language into images. The official documentation is a great reference, but a poor tool for beginners. Instead, we've written this Graphviz tutorial that provides an introduction to its most useful features. You can click any image to launch an interactive editor of that graph.

The Basics

A graph is a collection of nodes and edges. You can create edges between nodes with the -- or -> operator. By default, a node's label is its name.

You can have a graph, which uses --:

graph {
hello -- world;
}
view raw hello-world.dot hosted with ❤ by GitHub
An example of a regular, non-directed graph in Graphviz.
Hosted on Sketchviz

Or a digraph, which uses ->:

digraph {
hello -> world;
}
view raw hello-world.dot hosted with ❤ by GitHub
An example of a directed graph (or digraph) in Graphviz.
Hosted on Sketchviz

The presentation can be customized by specifying attributes. Attributes for the graph as a whole come at the top of the graph declaration, while attributes for nodes and edges come in square brackets immediately after they are declared.

digraph {
rankdir=LR;
hello [ label = "Hello" ];
hello -> world [ color="orange", penwidth=3.0 ];
}
view raw attributes.dot hosted with ❤ by GitHub
A Graphviz example with customized attributes.
Hosted on Sketchviz

Graphviz itself supports any font, but for our hosted graphs to work, you'll need to stick to one of these three fonts:

For convenience, any text contained in asterixes (*like this*) will render in the Segdwick Ave font.

digraph {
Tinos [ fontname="Tinos" ];
Handlee [ fontname="Handlee" ];
"Sedgwick Ave" [ fontname="Sedgwick Ave" ];
"*also Sedgwick*";
}
view raw fonts.dot hosted with ❤ by GitHub
A graph with multiple font.
Hosted on Sketchviz

You can provide defaults for nodes and edges to avoid repeating yourself:

digraph {
node [ shape=square ];
edge [ style=dashed ];
see -> think -> do;
}
view raw defaults.dot hosted with ❤ by GitHub
A graph showing how to set default values.
Hosted on Sketchviz

Advanced Graphs

Congratulations, you now know enough to make useful graphs! These next tricks can come in handy, but don't feel like you need to learn them immediately.

Records

Nodes with shape=record are treated specially. These are useful for displaying tables and object layouts. Note that you need to use ports, signified by <angle-brackets> to create edges to and from records.

digraph {
rankdir=LR;
node [ shape=record ];
struct1 [
label = "a|b|<port1>c";
];
struct2 [
label = "a|{<port2>b1|b2}|c";
];
struct1:port1 -> struct2:port2 [ label="xyz" ];
}
view raw record.dot hosted with ❤ by GitHub
An example of a Graphviz record.
Hosted on Sketchviz

Clusters (or Subgraphs)

You can group related nodes by putting them in a subgraph whose name begins with cluster_.

digraph {
node [ fontname="Handlee" ];
subgraph cluster_frontend {
label="*Frontend*";
React;
Bootstrap;
}
subgraph cluster_backend {
label="*Backend*";
expressjs;
"aws-sdk";
}
React -> expressjs;
expressjs -> "aws-sdk";
}
view raw architecture.dot hosted with ❤ by GitHub
An example of a subgraph (or cluster) in a larger Graphviz graph.
Hosted on Sketchviz

Yuck, that didn't lay out very nicely! We'll add constraint=false to the edge between expressjs and aws-sdk to let Graphviz know that the edge doesn't imply that expressjs should be ranked higher in precedence:

digraph {
node [ fontname="Handlee" ];
subgraph cluster_frontend {
label="*Frontend*";
React;
Bootstrap;
}
subgraph cluster_backend {
label="*Backend*";
expressjs;
"aws-sdk";
}
React -> expressjs;
expressjs -> "aws-sdk" [constraint=false];
}
view raw architecture-constraint.dot hosted with ❤ by GitHub
An example of using constraint=false to control node position.
Hosted on Sketchviz

Clusters can also be nested:

digraph {
node [ fontname="Handlee" ];
subgraph cluster_website {
label="*Website*";
subgraph cluster_frontend {
label="*Frontend*";
React;
Bootstrap;
}
subgraph cluster_backend {
label="*Backend*";
expressjs;
"aws-sdk";
}
}
subgraph cluster_aws {
label="*AWS*";
DynamoDb;
S3;
}
React -> expressjs;
expressjs -> "aws-sdk" [constraint=false];
"aws-sdk" -> S3;
"aws-sdk" -> DynamoDb;
}
view raw nested-clusters.dot hosted with ❤ by GitHub
An example of a nested subgraph in Graphviz.
Hosted on Sketchviz

If you'd like your arrow to start or stop at the cluster boundary, you have to set compound=true and use the lhead or ltail attributes on the edge:

digraph {
compound=true;
node [ fontname="Handlee" ];
subgraph cluster_website {
label="*Website*";
subgraph cluster_frontend {
label="*Frontend*";
React;
Bootstrap;
}
subgraph cluster_backend {
label="*Backend*";
expressjs;
"aws-sdk";
}
}
subgraph cluster_aws {
label="*AWS*";
DynamoDb;
S3;
}
React -> expressjs;
expressjs -> "aws-sdk" [constraint=false];
"aws-sdk" -> S3 [lhead=cluster_aws];
}
view raw lhead.dot hosted with ❤ by GitHub
A graph whose edges stop at the cluster boundary due to the lhead/ltail attribute.
Hosted on Sketchviz

Further Reading