使用 Mermaid 制作图表

May 7, 2026 · 4 mins read
Mermaid 图表 教程 Hugo
使用 Mermaid 制作图表

Mermaid 是一种基于文本的图表绘制工具，它允许您使用简单的 Markdown 风格的语法来创建流程图、序列图、甘特图等各种图表。这对于技术文档、博客文章以及任何需要可视化信息的地方都非常有帮助。Hugo 本身并不直接支持 Mermaid，但通过集成 Mermaid.js 库，我们可以轻松地在 Hugo 网站中启用 Mermaid 图表功能。

启用 Mermaid

为了在 Hugo 中使用 Mermaid，您需要在您的模板文件中引入 Mermaid.js 库。通常，您可以在主题的 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>

这将从 CDN 加载 Mermaid.js，并在页面加载完成后自动渲染所有标记为 Mermaid 的图表。

Mermaid 语法示例

Mermaid 的语法非常直观。以下是一些常见图表的示例：

流程图 (Flowchart):

graph TD
    A[开始] --> B{判断};
    B -- 是 --> C[处理];
    B -- 否 --> D[结束];
    C --> D;

序列图 (Sequence Diagram):

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: 你好！
    Bob-->>Alice: 你好！

甘特图 (Gantt Chart):

gantt
    title 项目进度
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析           :a1, 2023-10-20, 3d
    原型设计           :after a1, 2d
    section 开发
    后端开发           :2023-10-25, 5d
    前端开发           :2023-10-26, 4d

在 Hugo 内容中使用 Mermaid

一旦您在模板中启用了 Mermaid，您就可以在任何 Markdown 文件中使用 Mermaid 语法了。只需将您的 Mermaid 代码包裹在 mermaid 代码块中即可：

```mermaid
graph TD
    A[用户] --> B(登录);
    B --> C{验证成功?};
    C -- 是 --> D[显示主页];
    C -- 否 --> E[显示错误信息];


当 Hugo 渲染此页面时，Mermaid.js 就会将上面的文本转换为一个可视化的流程图。

**优点**

*   **易于学习和使用:** 只需要掌握简单的文本语法。
*   **版本控制友好:** 图表信息以纯文本形式存在，易于纳入版本控制系统。
*   **提高文档可读性:** 将复杂的流程或结构可视化，使信息更易于理解。
*   **与 Hugo 无缝集成:** 通过简单的脚本引入即可使用。

Mermaid 为您的 Hugo 网站增添了强大的图表功能，让您的内容更加生动和专业。

Sharing is caring!