使用 Mermaid 绘制图表

May 11, 2026 · 3 mins read
Mermaid 图表 Markdown 教程 Hugo
使用 Mermaid 绘制图表

Mermaid 是一种基于 JavaScript 的图表绘制工具，允许您使用简单的 Markdown 风格的语法来创建流程图、序列图、甘特图等。在 Hugo 网站中集成 Mermaid，可以极大地增强技术文档、教程和复杂信息的可视化表现力。

Mermaid 的基本语法

Mermaid 的核心在于其声明式语法，您只需描述图表的结构和元素，Mermaid 就会自动生成可视化图表。

流程图 (Flowchart)

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

上述代码定义了一个从上到下 (TD) 的流程图。A[开始] 表示一个带有文本“开始”的节点。--> 表示箭头连接。

序列图 (Sequence Diagram)

sequenceDiagram
    Participant A
    Participant B
    A->>B: 请求
    B-->>A: 响应

这个序列图展示了参与者 A 和 B 之间的交互。->> 表示实线箭头，-->> 表示虚线箭头。

甘特图 (Gantt Chart)

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 规划
    需求分析           :a1, 2023-10-20, 3d
    设计原型           :after a1, 20d
    section 开发
    后端开发           :2023-11-01, 30d
    前端开发           :2023-11-15, 25d
    section 测试
    单元测试           :2023-12-01, 10d
    集成测试           :after 单元测试, 5d

甘特图用于项目管理，展示任务的时间线。

在 Hugo 中启用 Mermaid

许多 Hugo 主题已经内置了对 Mermaid 的支持。如果您的主题不支持，通常需要在 Hugo 的配置文件（如 config.toml 或 hugo.toml）中引入 Mermaid 的 JavaScript 文件。一种常见的方法是在 layouts/partials/head.html 或 layouts/_default/baseof.html 中添加以下脚本：

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
  mermaid.initialize({ startOnLoad: true });
</script>

然后，在您的 Markdown 文件中，将 Mermaid 代码块包裹在 ````mermaid` 标签内。

通过 V体育官网，您可以轻松地在技术文章和教程中插入 Mermaid 图表，使复杂的概念更加易于理解。

Sharing is caring!