简介

博客主题现在支持 Mermaid 了。以后写流程图、时序图或者简单的架构图，直接在 Markdown 里写 Mermaid 代码就能渲染，不用先画图、导出、上传，再回来补链接。

这篇也顺便拿来测试一下新功能。

这次改了什么

• Hugo 增加了 Mermaid 代码块的渲染规则
• 只有文章里真的用了 Mermaid，页面才会加载对应的 CSS 和 JS
• Mermaid 版本固定为 12.0.0，避免 CDN 上游更新后突然出现兼容问题
• 图表会根据系统深色模式切换主题
• 手机上宽图可以横向滚动，不会把正文撑出屏幕
• 渲染失败时保留 Mermaid 源码，不至于整块内容直接消失

怎么写

用法跟普通代码块差不多，把语言名换成 mermaid：

```mermaid
flowchart LR
    A[写 Mermaid] --> B[Hugo 构建]
    B --> C[浏览器渲染 SVG]
```

实际效果：

flowchart LR
    A[写 Mermaid] --> B[Hugo 构建]
    B --> C[浏览器渲染 SVG]

为什么现在才加

以前博客里的图基本都是提前画好再上传。这样显示最稳，但每次改一个字都要重新导出图片，写一些简单流程时有点麻烦。

Mermaid 更适合这种跟着文章一起维护的图。源码就在 Markdown 里，改节点、改连线都很快，Git 里也能直接看到改了什么。

当然，它不会替代所有图片。复杂架构图或者比较讲究排版的图，我还是会用专门的画图工具。Mermaid 就负责流程图、调用链、状态流转这些简单又常改的内容。

加载方式

这次没有让全站每篇文章都加载 Mermaid。Hugo 构建文章时会先判断有没有 Mermaid 代码块，有才把相关资源放进页面。

普通文章不受影响。需要画图的文章也不用额外开配置，写一个 mermaid 代码块就行。

欢迎关注我的博客 www.bboy.app

Have Fun