• 简体中文

      • Mermaid 图表

      ModernDuang 内置 Mermaid 支持，你可以直接在 Markdown 文章中绘制流程图、时序图、甘特图等多种图表。Mermaid 使用简单的文本语法描述图表，无需借助外部绘图工具。

      启用 Mermaid

      Mermaid 图表默认不会在每篇文章中加载（避免不必要的网络请求）。需要在文章的 Front Matter 中显式开启：

      ---
title: 系统架构设计文档
date: 2024-03-15
categories: 技术
mermaid: true
---
      Front Matter 字段类型默认值描述
      mermaidbooleanfalse是否在当前文章中加载 Mermaid 渲染引擎

      延迟加载策略

      ModernDuang 对 Mermaid 采用延迟加载（Lazy Loading）策略：

      1. 构建时：不加载 Mermaid JS 库，页面 HTML 中包含原始的 <pre><code class="mermaid"> 代码块。
      2. 运行时：仅当文章 Front Matter 中 mermaid: true 时，页面才动态加载 Mermaid JS 库。
      3. 加载完成后：Mermaid 自动扫描页面中的 .mermaid 代码块并渲染为 SVG 图表。

      这个策略的好处：

      • 不需要图表的文章零额外 JS 开销
      • Mermaid JS 库（约 500KB+ gzip 后约 120KB）仅在需要时加载
      • 避免全局引入导致的页面性能下降

      基本用法

      在文章中以 Markdown 围栏代码块形式编写 Mermaid 语法，语言标记为 mermaid：

      ```mermaid
graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[进入主页]
    B -->|否| D[跳转登录页]
    C --> E[结束]
    D --> E
```

      渲染结果为一个自上而下的流程图。

      使用 Hexo 标签语法

      除了围栏代码块，ModernDuang 还支持使用 Hexo 标签语法 嵌入 Mermaid 图表：

      {% mermaid %}
graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[进入主页]
    B -->|否| D[跳转登录页]
    C --> E[结束]
    D --> E
{% endmermaid %}

      两种语法等效，渲染结果完全相同。标签语法在某些场景下更灵活（例如图表内容包含特殊字符时），你可以根据个人偏好选择使用。无论使用哪种语法，都需要在 Front Matter 中设置 mermaid: true。

      支持的图表类型

      Mermaid 支持多种图表类型，以下是在 ModernDuang 中经过测试验证的类型：

      流程图（Flowchart / Graph）

      graph LR
    A[Markdown 文章] --> B[Hexo 构建]
    B --> C[生成 HTML]
    C --> D[部署到服务器]
    D --> E[访客访问]
      ```mermaid
graph LR
    A[Markdown 文章] --> B[Hexo 构建]
    B --> C[生成 HTML]
    C --> D[部署到服务器]
    D --> E[访客访问]
\```

      时序图（Sequence Diagram）

      ```mermaid
sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    用户->>浏览器: 访问页面
    浏览器->>服务器: 请求数据
    服务器-->>浏览器: 返回 JSON
    浏览器-->>用户: 渲染页面
```

      甘特图（Gantt Chart）

      ```mermaid
gantt
    title 博客开发计划
    dateFormat  YYYY-MM-DD
    section 设计
    视觉设计     :2024-01-01, 14d
    交互设计     :2024-01-10, 10d
    section 开发
    前端开发     :2024-01-15, 20d
    后端对接     :2024-01-25, 15d
    section 测试
    功能测试     :2024-02-05, 7d
    上线部署     :2024-02-10, 3d
```

      类图（Class Diagram）

      ```mermaid
classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class Post {
        +String title
        +String content
        +Date createdAt
        +publish()
    }
    User "1" --> "*" Post : 撰写
```

      状态图（State Diagram）

      ```mermaid
stateDiagram-v2
    [*] --> 草稿
    草稿 --> 审核中 : 提交审核
    审核中 --> 已发布 : 审核通过
    审核中 --> 草稿 : 退回修改
    已发布 --> [*]
```

      饼图（Pie Chart）

      ```mermaid
pie
    title 博客文章分类占比
    "技术" : 45
    "生活" : 25
    "读书" : 15
    "旅行" : 10
    "其他" : 5
```

      ER 图（Entity Relationship Diagram）

      ```mermaid
erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has
    POST ||--|{ TAG : tagged_with
```

      暗色模式兼容

      Mermaid 图表在暗色模式下会自动适配配色。ModernDuang 通过检测当前的 data-theme 属性，动态调整 Mermaid 的主题：

      • 亮色模式：Mermaid 使用 default 主题（浅色背景、深色文字）
      • 暗色模式：Mermaid 使用 dark 主题（深色背景、浅色文字）

      主题切换是实时的——当你点击页面上的主题切换按钮时，已渲染的 Mermaid 图表会重新渲染以适应新的配色方案。无需手动干预。

      文章 Front Matter 示例

      以下是一篇启用了 Mermaid 图表的完整文章 Front Matter：

      ---
title: 微服务架构设计指南
date: 2024-06-15
updated: 2024-07-01
categories:
  - 技术
  - 架构
tags:
  - 微服务
  - 架构设计
  - 后端
mermaid: true
description: 深入探讨微服务架构的设计原则与实践经验。
---

      常见问题

      图表渲染失败？

      1. 检查 Front Matter 中是否有 mermaid: true
      2. 检查 Mermaid 语法是否正确（可在 Mermaid Live Editor 中先行验证）
      3. 检查浏览器控制台是否有 JS 错误
      4. 确保 Mermaid JS 库 CDN 可访问

      图表太大超出页面？

      Mermaid 渲染的 SVG 图表会自动适应容器宽度。如果图表内容过多导致溢出，可以在 Mermaid 中使用换行或调整节点文字长度。

      可以在摘要/列表页显示 Mermaid 图表吗？

      不建议在文章摘要中嵌入 Mermaid 图表。因为摘要通常截取文章前几百字符，且摘要区域不会加载 Mermaid JS 库，图表代码可能会显示为原始文本。

      相关页面