使用 Mermaid 绘制图表

May 4, 2026 · 4 mins read

在内容创作中，清晰直观的图表能够极大地提升信息的传达效率。Mermaid 是一种基于 Markdown 的图表绘制工具，它允许您使用简单的文本语法来创建流程图、序列图、甘特图等多种类型的图表。Hugo 作为一款流行的静态网站生成器，对 Mermaid 提供了良好的支持，让您能够轻松地将 Mermaid 图表集成到您的网站内容中。

Mermaid 的基本语法

Mermaid 的核心在于其声明式语法。您只需要用特定的文本格式描述图表的结构和元素，Mermaid 渲染器就会将其转换为可视化的图表。

流程图示例 (Flowchart)

graph TD
    A[开始] --> B(处理数据);
    B --> C{判断条件};
    C -- 是 --> D[输出结果 A];
    C -- 否 --> E[输出结果 B];
    D --> F[结束];
    E --> F;

在上面的例子中：

graph TD 定义了一个从上到下 (Top Down) 的流程图。
A[开始] 定义了一个带有方框标签的节点 A。
B(处理数据) 定义了一个圆角矩形节点 B。
C{判断条件} 定义了一个菱形节点 C。
--> 表示连接线。
-- 是 --> 和 -- 否 --> 表示带有标签的连接线。

序列图示例 (Sequence Diagram)

sequenceDiagram
    participant User
    participant App
    User->>App: 发送请求
    App-->>User: 返回响应

这个序列图展示了用户和应用程序之间的交互过程。

在 Hugo 中启用 Mermaid

要让 Hugo 支持 Mermaid，您通常需要在网站的配置文件 config.toml (或 hugo.yaml / hugo.json) 中进行一些设置。具体方法取决于您使用的主题。许多主题已经内置了对 Mermaid 的支持，或者提供了方便的配置选项。

如果您使用的 Hugo 主题没有直接支持 Mermaid，您可能需要手动引入 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 的优势

易于学习和使用： 简单的文本语法，无需专业的绘图软件。
版本控制友好： 图表定义以文本形式存在，便于通过 Git 等工具进行版本管理。
可访问性： 良好的文本基础，使得图表信息更容易被屏幕阅读器等辅助技术理解。
灵活性： 支持多种图表类型，满足不同场景的需求。

通过结合 Hugo 和 Mermaid，您可以为您的技术文档、博客文章或演示文稿创建出专业且易于维护的图表，从而提升内容的质量和用户的阅读体验。