Add Mermaid Diagrams to a Hugo Blog

Fri, 01 Aug 2025 10:00:00 +0000

A while back I wrote about adding ECharts to this blog with Hugo Shortcodes. But for day-to-day technical writing, what I usually need is flowcharts and sequence diagrams — the “text-is-the-picture” kind. That’s exactly what Mermaid does: describe a diagram in a few lines of text, no canvas dragging, no pasting screenshots.

And Hugo now has a cleaner approach than Shortcodes — the code block render hook. Since Hugo v0.123 I can override how code blocks render, intercepting ```mermaid fenced blocks and turning them into renderable diagram containers at build time.

Mermaid on Time Friend

Add Mermaid Diagrams to a Hugo Blog