Diagrams, Markdown, and the Quiet Joy of Graphviz (now available on BōcPress!)

There’s something quietly satisfying about turning a jumble of ideas into a diagram. And not just any diagram, but one conjured from a few lines of plain text, thanks to Graphviz. Pair it with Markdown, and suddenly your notes, thoughts, and diagrams sit together with a kind of understated elegance—no fiddly drag-and-drop boxes, no mysterious toolbar buttons, just words and structure.

Graphviz is wonderfully unpretentious. You describe what connects to what, and it obligingly produces a tidy diagram. For example, a simple workflow might look like this in Markdown:

```dot
digraph G {
  Idea [label=<<B>Idea</B>>]
  Draft [label=<<B>Draft</B>>]
  Edit [label=<<B>Edit</B>>]
  Publish [label=<<B>Publish</B>>]

  "Idea" -> "Draft"
  "Draft" -> "Edit"
  "Edit" -> "Publish"
}

And out comes a neat little diagram showing the flow from Idea to Publish. No fuss, no bloat—just clarity.

You can, of course, make things more elaborate. Suppose you want to sketch out a decision tree:

```dot
digraph G {
  node [shape=box, style=rounded, fontname="DejaVu Sans"]

  Start [label=<<B>Start</B>>]
  OptionA [label=<<B>Option A</B>>]
  Result1 [label=<<B>Result 1</B>>]

  Start -> OptionA
  OptionA -> Result1
}

Readable as plain text, perfectly clear as a rendered diagram. That’s the beauty of Graphviz—it gives structure without obscurity.

Using Graphviz within Markdown feels almost radical in its simplicity. Notes, explanations, and visuals sit side by side, human-readable even before you render them. It’s minimal, but powerful; like sketching with words.

So yes, I’ve been drawing diagrams in Markdown with Graphviz, and quietly marvelling at how a few lines of code can untangle so much. It’s not glamorous—but then, neither is a good cup of tea, and yet both are quietly indispensable.

Want to try using Graphviz with your own blog? Create your own BōcPress blog now.