Introduction

The blog theme now supports Mermaid. From now on, I can put flowcharts, sequence diagrams, and simple architecture diagrams directly into Markdown. No more drawing a diagram, exporting it, uploading it, and then coming back to add the link.

This post also doubles as a quick test of the new feature.

What Changed

• Added a Hugo render hook for Mermaid code blocks
• Mermaid CSS and JavaScript only load when a post actually contains a Mermaid diagram
• Pinned Mermaid to 12.0.0, so an upstream CDN update will not suddenly break compatibility
• Diagrams follow the system dark mode setting
• Wide diagrams can scroll horizontally on phones instead of pushing the article outside the screen
• If rendering fails, the Mermaid source stays visible instead of disappearing

How to Use It

It works like a normal fenced code block. Just use mermaid as the language:

```mermaid
flowchart LR
    A[Write Mermaid] --> B[Build with Hugo]
    B --> C[Render SVG in the browser]
```

Here is the actual result:

flowchart LR
    A[Write Mermaid] --> B[Build with Hugo]
    B --> C[Render SVG in the browser]

Why Add It Now

Most diagrams on this blog used to be drawn and uploaded as images. That is reliable, but changing even one word means exporting and uploading the image again. It feels like too much work for a small flowchart.

Mermaid fits diagrams that need to stay close to the article. The source lives right inside the Markdown file, changing nodes or connections is quick, and Git can show exactly what changed.

It will not replace every image. I will still use proper diagram tools for complex architecture diagrams or anything that needs careful layout. Mermaid is mainly for flowcharts, call chains, and state transitions that are simple and likely to change.

Loading It Only When Needed

I did not make every post on the site load Mermaid. During the Hugo build, the theme checks whether the article contains a Mermaid code block and only adds the related assets when needed.

Normal posts stay untouched. Posts that need a diagram do not need any extra front matter or configuration either. A mermaid code block is enough.

Feel free to follow my blog at www.bboy.app

Have Fun