使用 Mermaid 绘制图表

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

Mermaid 是一种基于 JavaScript 的图表绘制工具，它允许你通过简单的 Markdown 风格的语法来创建流程图、序列图、甘特图等多种图表。在 Hugo 中集成 Mermaid，可以让你在 Markdown 内容中直接嵌入动态生成的图表，极大地增强了技术文档和教程的可读性。

Mermaid 的基本语法： Mermaid 的核心在于其文本描述语言。例如，要创建一个简单的流程图，你可以这样写：

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

这段代码描述了一个从“起始节点”开始，经过一个“判断节点”，根据判断结果走向不同“处理节点”，最终都汇聚到“结束节点”的流程。

在 Hugo 中启用 Mermaid： 大多数现代 Hugo 主题都内置了对 Mermaid 的支持。如果你的主题没有，你可能需要在 config.toml 或 config.yaml 中进行配置，通常是引入 Mermaid 的 JavaScript 文件。

例如，在 layouts/partials/head.html 中添加：

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

或者，如果你的主题支持通过 frontmatter 启用：

[params.mermaid]
  enable = true

嵌入 Mermaid 图表： 一旦 Mermaid 被启用，你就可以在 Markdown 文件中使用代码块来嵌入 Mermaid 图表。关键在于使用 mermaid 作为代码块的语言标识符：

```mermaid
graph LR
    A --> B
    B --> C
    C --> A


Hugo 会自动识别这个代码块，并将其渲染成一个可视化的图表。

**Mermaid 支持的图表类型：**
Mermaid 支持多种图表类型，包括：
*   **流程图 (Flowchart):** `graph TD`, `graph LR`
*   **序列图 (Sequence Diagram):** `sequenceDiagram`
*   **甘特图 (Gantt Chart):** `gantt`
*   **类图 (Class Diagram):** `classDiagram`
*   **状态图 (State Diagram):** `stateDiagram`
*   **饼图 (Pie Chart):** `pie`

通过学习和运用 Mermaid，你可以轻松地在你的 Hugo 网站中创建出专业且易于理解的图表，让你的内容更具吸引力。

Sharing is caring!