Hugo 博客配置 Mermaid 图表支持 链接到标题

本文说明基于 hugo-coder 主题的博客如何集成 Mermaid 图表。

前提条件 链接到标题

  • 使用支持 Mermaid shortcode 的 Hugo 主题（如 hugo-coder）
  • 主题的 baseof.html 中包含以下逻辑：
{{ if .HasShortcode "mermaid" }}
<script src="https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad: true});</script>
{{ end }}

正确写法 链接到标题

Mermaid 图表必须使用 Hugo Shortcode 语法，而非标准 Markdown 代码块：

类型 写法
✅ Shortcode {{< mermaid >}} ... {{< /mermaid >}}
❌ Markdown 代码块 ```mermaid ... ```

图表类型示例 链接到标题

流程图 链接到标题

flowchart TD A[开始] --> B{判断} B -->|条件A| C[处理A] B -->|条件B| D[处理B] C --> E[结束] D --> E

时序图 链接到标题

sequenceDiagram participant 客户端 participant 服务器 participant 数据库 客户端->>服务器: 请求 服务器->>数据库: 查询 数据库-->>服务器: 返回结果 服务器-->>客户端: 响应

甘特图 链接到标题

gantt title 项目计划 dateFormat YYYY-MM-DD section 设计 设计方案 :done, d1, 2026-05-01, 3d 设计评审 :done, d2, after d1, 1d section 开发 编码实现 :active, dev1, after d2, 5d 单元测试 :dev2, after dev1, 2d section 部署 部署上线 :deploy, after dev2, 1d

注意事项 链接到标题

  • 必须使用 Hugo Shortcode 语法 {{< mermaid >}}，不要用 ```mermaid Markdown 代码块
  • 编写时注意 Shortcode 前后各有一个空行，确保 Hugo 正确解析
  • 提交后等待 Cloudflare Pages 自动构建部署（约 1-2 分钟）
  • 如需本地预览，运行 hugo server 后访问 http://localhost:1313