使用 Mermaid 绘制流程图与图表

May 7, 2026 · 4 mins read

在技术文档、博客文章或演示文稿中，清晰的图表能够极大地提升信息的传达效率。Mermaid 是一种基于 Markdown 的脚本语言，它允许您使用简单的文本语法来创建各种类型的图表，包括流程图、序列图、甘特图、类图等。这使得在 Hugo 网站中集成动态、可编辑的图表变得前所未有的简单。

Mermaid 的工作原理

Mermaid 的核心在于其声明式语法。您只需用预定义的关键词和结构来描述图表的逻辑和元素，Mermaid 库就会在浏览器端将其渲染成视觉化的图表。这意味着您不需要学习复杂的图形设计工具，只需专注于内容的逻辑结构。

在 Hugo 中集成 Mermaid

将 Mermaid 集成到 Hugo 网站通常涉及以下几个步骤：

包含 Mermaid JavaScript 库： 您需要将 Mermaid 的 JavaScript 文件包含在您的 Hugo 主题中。这通常可以通过在主题的 layouts/partials/head.html 或 layouts/partials/footer.html 文件中添加 <script> 标签来实现。您可以从 Mermaid 的官方 CDN 获取最新版本，或者将其下载到本地项目中使用。
```
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
```
使用 Markdown 代码块： 在您的 Markdown 内容中，您可以使用代码块来包裹 Mermaid 脚本。关键在于为代码块指定 mermaid 的语言标识。Hugo 的 Markdown 渲染器（如 Goldmark）会识别这个标识，并触发 Mermaid 库来渲染图表。
```
```mermaid
graph TD
    A[开始] --> B{处理};
    B --> C[成功];
    B --> D[失败];
    C --> E[结束];
    D --> E;
```

Mermaid 语法示例

流程图 (Flowchart):

graph TD
    A[用户输入] --> B(验证数据);
    B -- 验证通过 --> C{处理请求};
    C -- 成功 --> D[返回结果];
    C -- 失败 --> E[错误提示];
    D --> F(结束);
    E --> F;

序列图 (Sequence Diagram):

sequenceDiagram
    participant User
    participant Server
    User->>Server: 请求数据
    Server-->>User: 返回数据
    User->>Server: 更新记录
    Server-->>User: 操作成功

类图 (Class Diagram):

classDiagram
    class Animal{
        +String name
        +int age
        +eat()
        +sleep()
    }
    class Dog{
        +String breed
        +bark()
    }
    Animal <|-- Dog

优点