使用 Mermaid 绘制流程图与时序图

May 12, 2026 · 4 mins read

在文档写作中，清晰的图表能够极大地提升信息的传达效率。Mermaid 是一种能够通过文本描述来生成图表的 JavaScript 库，与 Markdown 结合使用，可以让我们在 Hugo 网站中轻松地嵌入各种复杂的图表，而无需借助外部图形编辑工具。

Mermaid 支持多种图表类型，包括流程图、时序图、甘特图、饼图等。其语法简洁明了，非常适合集成到 Markdown 中。Hugo 默认的 Goldmark 渲染器可以通过配置开启对 Mermaid 的支持，或者通过主题的集成来使用。

Mermaid 流程图示例

以下是一个简单的 Mermaid 流程图示例：

graph TD
    A[开始] --> B{是否完成?};
    B -- 是 --> C[结束];
    B -- 否 --> D[继续操作];
    D --> B;

这个流程图描述了一个简单的决策过程：从“开始”节点出发，进入一个判断“是否完成？”的节点。如果结果为“是”，则进入“结束”节点；如果结果为“否”，则进入“继续操作”节点，然后再回到判断节点。

Mermaid 时序图示例

时序图常用于展示对象之间交互的时间顺序。

sequenceDiagram
     participant User
     participant Browser
    participant Server

    User->>Browser: 请求页面
    Browser->>Server: 发送HTTP请求
    Server-->>Browser: 返回HTML响应
    Browser-->>User: 显示页面

这个时序图展示了用户请求网页的基本流程：用户通过浏览器发起请求，浏览器与服务器交互，最终服务器响应并显示页面。

在 Hugo 中使用 Mermaid

要让 Hugo 支持 Mermaid，通常有两种方式：

通过 Goldmark 配置: 在你的 hugo.toml (或 config.toml/config.yaml) 文件中，启用 Goldmark 的 enableMermaid 选项。
```
[markup.goldmark.renderer]
unsafe = true # 允许渲染 HTML
```
```
[markup.goldmark.parser.attribute]
block = true
title = true
```
然后，在 Markdown 文件中使用 ::: mermaid 块来包裹 Mermaid 代码。
通过主题集成: 许多 Hugo 主题已经内置了对 Mermaid 的支持。你可能只需要在主题的配置文件中开启相关选项，或者直接在 Markdown 文件中使用 ```mermaid 代码块即可。

使用 Mermaid，你可以将技术文档、项目规划、系统架构等可视化，极大地增强了内容的专业性和易读性。