Weeknotes: Adding D2 diagrams to webplats

16 Feb 2026

I managed to nerd-snipe myself this morning:

Basically I wanted to use a simple flow diagram in a post, and ideally I wanted to be able to put the diagram into the markdown for a page, rather than have to use an external tool to generate an SVG. In the end I kinda did both, but as a user I do just write my diagram in the markdown.

This is nothing new, many sites use Mermaid, including Github to let you put diagrams into markdown. I looked at integrating Mermaid into Webplats, my own OCaml based website platform, but Mermaid is built on node and that is a dependancy burden I just don't want to deal with.

Instead I've opted to use D2, another declarative based flow diagramming tool, which is written in Go, so has a more manageable deployment story (for me personally at least). With this I can now just do:

```d2
direction: right
A -> B
A -> C
B -> D
C -> D
```

Which then renders as:

D2 seems to have enough expressivity for the kinds of things I want to do with a simple enough description language. The main restriction right now is that they don't have accessibility descriptions, which I need to figure out how to integrate.

Using code blocks in markdown feels a bit odd as a way to do this, but it's what seems to be common convention with other sites using Mermaid, so I just followed suite. I was already down one rabbit hole with doing this at all, and chose to avoid going down yet another one!

Before you ask:

  1. Graphviz I consider a great tool for generating flow diagrams when you have software generating the input. I don't consider it a human facing, personally. For instance, Yirgacheffe will generate expression diagrams like those I used in this post via graphviz, and for that it's awesome, but the dot file format is not something I wish to type into markdown.
  2. You can get client side versions of Mermaid and such, but generally I'm trying to keep the frontend simple, as I'm not a frontend person.

Tags: weeknotes, ocaml, d2