Mermaid 综合渲染测试

这个页面用于测试博客对 Mermaid 的完整支持。

测试目标包括：

Mermaid 基础渲染
不同 Mermaid 图表类型
中文内容
多节点与复杂结构
Chart / Source 双向切换
SVG 下载
PNG 下载
移动端响应式布局
Mermaid 渲染失败时的 fallback
JavaScript disabled 时的 fallback
Mermaid 与普通代码块的兼容性
多个 Mermaid 图表同时存在时的独立性

1. Flowchart：基础流程图

最基础的 Mermaid 测试。

mermaid

flowchart LR
    A[Markdown] --> B[Hugo]
    B --> C[HTML]
    C --> D[浏览器]
    D --> E[最终页面]

2. Flowchart：判断与循环

测试：

条件节点
中文
多条连接线
循环结构

mermaid

flowchart TD
    A[开始] --> B[读取文章]
    B --> C{构建成功?}
    C -->|是| D[生成 HTML]
    C -->|否| E[检查错误]
    E --> F[修改代码]
    F --> B
    D --> G{需要发布?}
    G -->|是| H[部署网站]
    G -->|否| I[继续修改]
    I --> B
    H --> J[结束]

3. Flowchart：较复杂的系统结构

这个图主要用于测试较多节点时的布局，以及宽度较大的图表。

mermaid

flowchart LR
    User[用户] --> Browser[浏览器]

    Browser --> CDN[静态资源]
    Browser --> HTML[HTML 页面]
    Browser --> CSS[CSS]
    Browser --> JS[JavaScript]

    HTML --> Mermaid[Mermaid]
    JS --> Mermaid

    Mermaid --> SVG[SVG 图表]

    CSS --> SVG
    SVG --> Browser

4. Sequence Diagram：基本时序图

测试时序图。

mermaid

sequenceDiagram
    participant User as 用户
    participant Browser as 浏览器
    participant Hugo
    participant Mermaid

    User->>Browser: 打开博客
    Browser->>Hugo: 请求页面
    Hugo-->>Browser: 返回 HTML
    Browser->>Mermaid: 初始化
    Mermaid-->>Browser: 返回 SVG
    Browser-->>User: 显示图表

5. Sequence Diagram：较长的交互

用于测试移动端以及较宽的 sequence diagram。

mermaid

sequenceDiagram
    participant M as Miles
    participant C as Codex
    participant H as Hugo
    participant B as Browser

    M->>C: 提出需求
    C->>C: 分析项目
    C-->>M: 提出实施方案
    M->>C: 确认方案
    C->>H: 修改必要文件
    H->>H: 构建网站
    H-->>C: Build successful
    C->>B: 打开测试页面
    B->>B: 加载 Mermaid
    B-->>M: 显示图表

6. State Diagram：状态机

测试 Mermaid 状态图。

mermaid

stateDiagram-v2
    [*] --> Draft

    Draft --> Building: 执行 hugo
    Building --> Failed: 构建失败
    Building --> Generated: 构建成功

    Failed --> Draft: 修复问题
    Generated --> Published: 部署
    Published --> Updated: 修改文章
    Updated --> Building

    Published --> [*]

7. Class Diagram：类关系

测试 Class Diagram。

mermaid

classDiagram
    class Blog {
        +String title
        +String description
        +build()
        +publish()
    }

    class Post {
        +String title
        +Date date
        +render()
    }

    class MermaidChart {
        +String source
        +render()
        +downloadSVG()
        +downloadPNG()
    }

    Blog "1" --> "*" Post
    Post "1" --> "*" MermaidChart

8. Entity Relationship Diagram

测试 ER Diagram。

mermaid

erDiagram
    USER ||--o{ POST : writes
    POST ||--o{ TAG : contains
    POST ||--o{ COMMENT : receives

    USER {
        int id
        string name
    }

    POST {
        int id
        string title
        string content
    }

    TAG {
        int id
        string name
    }

    COMMENT {
        int id
        string content
    }

9. Gantt Chart

测试 Gantt 图。

mermaid

gantt
    title Mermaid 功能开发测试
    dateFormat  YYYY-MM-DD

    section 分析
    检查 Hugo 架构       :done, analysis, 2026-09-30, 1d

    section 开发
    Mermaid 渲染         :active, render, 2026-10-01, 2d
    Source 切换          :toggle, after render, 1d
    下载功能             :download, after toggle, 1d

    section 测试
    桌面端测试           :desktop, after download, 1d
    移动端测试           :mobile, after desktop, 1d

10. Pie Chart

测试 Pie Chart。

mermaid

pie title 一个页面里的内容构成
    "文字" : 55
    "代码" : 20
    "图片" : 10
    "Mermaid" : 15

11. Mindmap

测试 Mindmap。

mermaid

mindmap
    root((Miles' Archive))
        内容
            Posts
            Moments
            About
        技术
            Hugo
            Markdown
            CSS
            JavaScript
        图表
            Flowchart
            Sequence
            State
            Class
            ER
            Gantt
            Pie
            Mindmap

12. Timeline

如果当前 Mermaid 版本支持 Timeline，则测试 Timeline。

mermaid

timeline
    title 一个博客项目的发展过程

    2024 : 学习 Web 技术
         : 开始接触 Hugo

    2025 : 开始研究 AI
         : 尝试自己维护博客

    2026 : 重构博客
         : 加入 Mermaid
         : 继续探索 Web 技术

13. Quadrant Chart

如果当前 Mermaid 版本支持 Quadrant Chart，则测试它。

mermaid

quadrantChart
    title 博客功能优先级
    x-axis 低实现成本 --> 高实现成本
    y-axis 低价值 --> 高价值

    "Markdown": [0.15, 0.75]
    "Mermaid": [0.45, 0.85]
    "搜索": [0.65, 0.70]
    "复杂 CMS": [0.90, 0.35]
    "主题重构": [0.80, 0.25]

14. Git Graph

如果当前 Mermaid 版本支持 Git Graph，则测试 Git Graph。

mermaid

gitGraph
    commit id: "Initial"
    commit id: "Add Hugo"
    branch feature-mermaid
    checkout feature-mermaid
    commit id: "Add Mermaid"
    commit id: "Add download"
    checkout main
    commit id: "Update theme"
    merge feature-mermaid
    commit id: "Release"

15. 中文与特殊字符测试

这里专门测试中文文本、标点以及较长节点。

mermaid

flowchart TD
    A["这是一个比较长的中文节点，用于测试文字换行"] --> B["Markdown → Hugo → HTML"]
    B --> C{"浏览器是否启用了 JavaScript？"}

    C -->|是| D["尝试渲染 Mermaid"]
    C -->|否| E["显示原始 Mermaid 源代码"]

    D --> F["渲染成功"]
    D --> G["渲染失败"]

    G --> H["显示错误提示 + 源代码"]
    F --> I["显示 SVG 图表"]

16. 宽图测试

这个图故意设计得比较宽。

目的不是测试某个具体 Mermaid 类型，而是观察：

桌面端和手机端如何处理宽 Mermaid 图表。

mermaid

flowchart LR
    A[用户] --> B[浏览器]
    B --> C[DNS]
    C --> D[CDN]
    D --> E[Web Server]
    E --> F[Hugo]
    F --> G[Markdown]
    G --> H[Render Hook]
    H --> I[Mermaid]
    I --> J[SVG]
    J --> K[Browser]
    K --> L[用户看到的图表]

17. 高度测试

这个图故意增加纵向节点数量。

mermaid

flowchart TD
    A[Start]
    A --> B[Step 1]
    B --> C[Step 2]
    C --> D[Step 3]
    D --> E[Step 4]
    E --> F[Step 5]
    F --> G[Step 6]
    G --> H[Step 7]
    H --> I[Step 8]
    I --> J[Step 9]
    J --> K[Step 10]
    K --> L[Step 11]
    L --> M[Step 12]
    M --> N[End]

18. 多图表连续出现

测试多个 Mermaid 图表连续出现时，组件之间是否相互影响。

图表 A

mermaid

flowchart LR
    A[A] --> B[B]

图表 B

mermaid

flowchart LR
    C[C] --> D[D]

图表 C

mermaid

sequenceDiagram
    Alice->>Bob: Hello Bob
    Bob-->>Alice: Hello Alice

需要确认：

每个图表都独立渲染；
每个图表都有自己的 source toggle；
每个图表都有自己的下载功能；
一个图表切换 source 不会影响其他图表。

19. 普通代码块兼容性测试

Mermaid 实现不能影响原有普通代码块。

Python

python

def hello(name):
    return f"Hello, {name}!"

print(hello("Mermaid"))

JavaScript

javascript

function hello(name) {
    return `Hello, ${name}!`;
}

console.log(hello("Mermaid"));

HTML

html

<div class="example">
    <p>Hello, Mermaid!</p>
</div>

JSON

json

{
  "name": "Mermaid",
  "enabled": true,
  "formats": [
    "svg",
    "png"
  ]
}

20. Mermaid source 中包含代码样式内容

测试 Mermaid source 中存在类似代码、符号和特殊字符时，是否仍然能够正确处理。

mermaid

flowchart TD
    A["输入：```mermaid"] --> B["解析 Mermaid"]
    B --> C["生成 SVG"]
    C --> D["插入 HTML"]

21. 渲染失败测试

这个测试故意使用错误的 Mermaid 语法。

正常情况下，它不应该导致整个页面崩溃。

预期行为：

Mermaid 图表渲染失败；
对应区域显示 rendering failed 提示；
用户仍然可以看到原始 Mermaid source；
页面其他内容正常；
Hugo build 不应因为这个图表失败而失败。

mermaid

flowchart TD
    A[这是一个故意错误的图表
    B --> C
    C --> D

22. 错误图表之后继续存在正常 Mermaid

这个测试非常重要。

它用于验证：

一个 Mermaid 图表失败后，后面的 Mermaid 图表仍然能够正常工作。

mermaid

flowchart LR
    X[正常图表] --> Y[应该正常显示]

如果这里正常显示，说明单个 Mermaid rendering failure 没有污染整个页面的 Mermaid runtime。

23. 最后再测试一个普通 Mermaid 图

mermaid

flowchart TD
    A["测试结束"] --> B{"所有功能正常？"}

    B -->|是| C["Mermaid 集成测试通过"]
    B -->|否| D["继续排查问题"]

    D --> E["检查 Hugo"]
    D --> F["检查 JavaScript"]
    D --> G["检查 CSS"]
    D --> H["检查 Mermaid"]

测试检查清单

完成页面加载后，依次检查：

基础 Flowchart 正常
判断 / 循环 Flowchart 正常
复杂 Flowchart 正常
Sequence Diagram 正常
State Diagram 正常
Class Diagram 正常
ER Diagram 正常
Gantt Chart 正常
Pie Chart 正常
Mindmap 正常
Timeline 正常（如果版本支持）
Quadrant Chart 正常（如果版本支持）
Git Graph 正常（如果版本支持）
中文显示正常
特殊字符显示正常
宽图在桌面端正常
宽图在手机端正常
高图在手机端正常
多个图表之间互不影响
「查看源代码」可以 Chart → Source
可以 Source → Chart
SVG 下载正常
PNG 下载正常
下载内容不包含博客 UI
错误 Mermaid 不导致页面崩溃
错误 Mermaid 后面的正常图仍能工作
普通 Python code block 正常
普通 JavaScript code block 正常
普通 HTML code block 正常
普通 JSON code block 正常
整个 Hugo build 正常

Mermaid 渲染测试

Mermaid 综合渲染测试

1. Flowchart：基础流程图

2. Flowchart：判断与循环

3. Flowchart：较复杂的系统结构

4. Sequence Diagram：基本时序图

5. Sequence Diagram：较长的交互

6. State Diagram：状态机

7. Class Diagram：类关系

8. Entity Relationship Diagram

9. Gantt Chart

10. Pie Chart

11. Mindmap

12. Timeline

13. Quadrant Chart

14. Git Graph

15. 中文与特殊字符测试

16. 宽图测试

17. 高度测试

18. 多图表连续出现

图表 A

图表 B

图表 C

19. 普通代码块兼容性测试

Python

JavaScript

HTML

JSON

20. Mermaid source 中包含代码样式内容

21. 渲染失败测试

22. 错误图表之后继续存在正常 Mermaid

23. 最后再测试一个普通 Mermaid 图

测试检查清单