Mermaid diagram rendering

Author flowcharts and diagrams in Mermaid, and Buttondown renders them in the archives and your emails.

Justin Duke
Justin Duke
July 25, 2026
Mermaid diagram rendering

A few years back, we launched LaTeX support: LaTeX in the archives and in the emails themselves. This was, objectively speaking, not a good use of time or energy. It continues to be a poorly adopted feature, largely for the reason that most people don't know what LaTeX is and have no use case for it.

But you know what? I really liked doing it, even though I knew at the time that both of those things would be true. And I have no regrets about having done so, because it's great for the tiny subset of people who use it.

In that same spirit, I'm delighted to announce an equally esoteric and ill-advised addition to our bespoke rendering pipeline: Mermaid charts.

Mermaid is, for lack of a better metaphor, a Markdown-shaped dialect for generating things like flowcharts or architectural diagrams. We use it all over our own docs. It's handy because the process of authoring one is pretty simple and feels natural alongside your other Markdown content — you just write a fenced mermaid block and describe the diagram:

This is a live demo. You can view this page on our live demo site, too.

And as you might have surmised from the embed just above, Buttondown now renders these for you automatically.

We've done this in a similar manner to our support for LaTeX. On the website, we render diagrams dynamically with JavaScript, so your archives get crisp, live SVGs. On the email side — since email clients don't support SVG or <canvas> — we capture each diagram via a headless browser and then aggressively cache it as an image that we store and serve. No setup required.

Will most of you ever use this? Almost certainly not. But if you're the kind of person who thinks in flowcharts, this one's for you.

Buttondown is the last email platform you’ll switch to.