← Back to Guides
DiagramsGraphviz / DOT in Markdown
Published on 2026-02-22

Graphviz / DOT in Markdown

Mastering the DOT language to generate mathematically perfect network and graph layouts natively in Markdown.

Graphviz is one of the oldest and most powerful graph visualization software programs available. It uses the DOT language to describe structural information as diagrams of abstract graphs and networks.

Because it focuses heavily on layout algorithms, Graphviz is perfect when you have hundreds of nodes and want an algorithm to organize them with minimal overlapping lines.

In your markdown editor, use the language identifier dot or graphviz.

The dot Layout Algorithm

The standard dot algorithm creates directed graphs (digraphs). It is heavily used in software engineering to visualize function call stacks and data structures.

Basic Syntax

To create a graph, start with digraph G { and define the relationships using ->.

syntax
digraph G {
    fontname="Helvetica,Arial,sans-serif"
    node [fontname="Helvetica,Arial,sans-serif"]
    edge [fontname="Helvetica,Arial,sans-serif"]

    a -> b -> c;
    b -> d;
}
GraphvizGraphviz diagram

Clusters and Subgraphs

You can group nodes together using clusters. A cluster’s ID must start with the word cluster.

syntax
digraph G {
    subgraph cluster_0 {
        style=filled;
        color=lightgrey;
        node [style=filled,color=white];
        a0 -> a1 -> a2 -> a3;
        label = "process #1";
    }

    subgraph cluster_1 {
        node [style=filled];
        b0 -> b1 -> b2 -> b3;
        label = "process #2";
        color=blue
    }

    start -> a0;
    start -> b0;
    a1 -> b3;
    b2 -> a3;
    a3 -> a0;
    a3 -> end;
    b3 -> end;
}
GraphvizGraphviz diagram

Styling and Attributes

Graphviz is heavily configurable via attributes. You can apply attributes to specific nodes or global defaults.

Shapes

Common shapes include box, polygon, ellipse, oval, circle, record, and cylinder.

The record Shape

The record shape is iconic in Graphviz; it allows you to split a node into horizontal or vertical sections, making it ideal for rendering database schemas. Use a pipe | to separate fields.

syntax
digraph structs {
    node [shape=record];
    struct1 [label="<f0> left|<f1> mid\ dle|<f2> right"];
    struct2 [label="<f0> one|<f1> two"];
    struct3 [label="hello\nworld |{ b |{c|<here> d|e}| f}| g | h"];
    struct1:f1 -> struct2:f0;
    struct1:f2 -> struct3:here;
}
GraphvizGraphviz diagram

Generating Graphs

Graphviz shines when generated dynamically by scripts. If your application needs to output a dependency graph, having your script spit out DOT language syntax and pasting it into MarkdownToPrettyPDF is a foolproof workflow to generate immediate, scalable vector graphics.