博客主题更新：Mermaid 支持来了
内容提要
博客新增 Mermaid 支持，可直接在 Markdown 中编写流程图、时序图和架构图，无需导出上传图片。实现方式包括 Hugo 渲染钩子、按需加载 CSS 和 JS、锁定 12.0.0 版本、适配深色模式、宽图横向滚动、渲染失败保留源码。用法与普通代码块相同，适合简单且常改的图表。
延伸解读
按需加载与版本锁定
文章强调，Mermaid 的 CSS 和 JavaScript 只在包含 Mermaid 图表的文章中加载，普通文章不受影响。同时，Mermaid 被锁定在 12.0.0 版本，避免上游 CDN 更新导致兼容性问题。这种做法平衡了功能与性能，也降低了外部依赖带来的风险。
适用场景与局限
Mermaid 适合简单且常改的图表，如流程图、调用链和状态转换。对于复杂架构图或需要精细布局的图表，作者仍会使用专业绘图工具。因此，Mermaid 并非替代所有图片，而是补充了文本化、易版本控制的图表需求。
使用与容错设计
用法与普通代码块相同，只需指定语言为 mermaid。图表会跟随系统深色模式，宽图在手机上可横向滚动，避免撑破布局。如果渲染失败，Mermaid 源码会保留可见，而不是消失，这有助于排查问题。
Q&A
博客主题新增的 Mermaid 支持是什么？
博客主题现在支持 Mermaid，可以直接在 Markdown 中编写流程图、时序图和简单架构图，无需导出和上传图片。
如何在博客文章中使用 Mermaid 绘制图表？
像普通代码块一样使用，将语言设置为 mermaid，例如：```mermaid flowchart LR A[Write Mermaid] --> B[Build with Hugo] B --> C[Render SVG in the browser] ```。
Mermaid 图表在深色模式和移动端如何适配？
图表会跟随系统深色模式设置；宽图表在手机上可以横向滚动，不会把文章撑出屏幕。
为什么博客要添加 Mermaid 支持？
以前图表需要绘制、导出、上传图片，修改一个字就要重新导出上传，很麻烦。Mermaid 的源码直接放在 Markdown 文件中，修改节点或连接很快，Git 也能清晰显示变更。
Mermaid 资源是如何加载的？
Mermaid 的 CSS 和 JavaScript 只在文章实际包含 Mermaid 图表时加载。Hugo 构建时会检查文章是否包含 Mermaid 代码块，仅在需要时添加相关资源，普通文章不受影响。
Mermaid 适合绘制哪些类型的图表？
Mermaid 主要适合简单且可能经常修改的图表，如流程图、调用链和状态转换。复杂的架构图或需要精细布局的图表仍建议使用专业绘图工具。
