Creating Software Engineering Flow Charts with Graphviz Dot

By Joel Dare - Written September 13, 2025

How I map tangled code paths into a clear picture so future-me (and you) can follow execution paths.

This week I needed to create some engineering flow charts.

I’ve used Mermaid some but I hadn’t tried Graphviz Dot and I hear it’s similar but also provides a bit more flexibility. So, I decided to give it a try.

Here’s a document I came up with:

digraph {

    node [ shape=record ];

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


    # Get completion when assigning a shape or color
    b [color="#ff9900"];
    b [href="https://www.example.com"]
    c [class="view"]
    d [style="filled", fillcolor=cadetblue1]
    a [
        label="{TITLE | example-project | /api/example/url | /relative/dir/example.php [51] | <func> exampleFunction()}",
        href="https://www.example.com",
        tooltip="Tip of the day."
    ]
}

You probably wouldn’t use this to explain anything but it has some initial components I could use to describe the path that executions take through the complex code I’m trying to understand.

I wanted to leave it here as an example for my future self.

Several Graphviz Dot online tools are available

My favorite is Sketchviz which has both a nice editor with a hand sketched look plus some pretty good tutorials about how to use Dot.

The official one seems to be Edotor. It’s a bit more “professional” looking.

Build your next site in pure HTML and CSS

Want to build your next site in pure HTML and CSS? Join the free Five-Day Neat Starter Email Course and build a lean, production-ready page before Friday.

Email Me the Crash Course

Terms - Privacy