Mermaid 代码块魔改测试

本页面用于测试标准 Markdown 代码块 (```mermaid) 的 Mermaid 图表渲染功能。

测试用例 1：标准 Markdown 格式

格式：<pre><code class="language-mermaid">


flowchart TD
    A[开始] --> B{判断}
    B -->|是| C[执行操作]
    B -->|否| D[跳过]
    C --> E[结束]
    D --> E

测试用例 2：多个代码块（批量处理）

测试同一页面中多个 Mermaid 代码块的处理


graph LR
    A[客户端] --> B[服务器]
    B --> C[数据库]
    C --> B
    B --> A


sequenceDiagram
    participant 用户
    participant 系统
    用户->>系统: 发送请求
    系统->>用户: 返回响应

测试用例 3：特殊字符保留

测试箭头符号 -->、双横线 --、等号 == 等特殊字符是否正确保留


flowchart TD
    A --> B
    B -- 文本 --> C
    C ==> D
    D -.-> E
    E ~~~ F

测试用例 4：空代码块（边界情况）

测试空代码块是否会导致错误

空代码块应该被跳过，不会创建容器

测试用例 5：多行代码块（换行符保留）

测试多行代码块中的换行符是否正确保留


graph TB
    subgraph 子图1
        A1[节点A1]
        A2[节点A2]
    end
    subgraph 子图2
        B1[节点B1]
        B2[节点B2]
    end
    A1 --> B1
    A2 --> B2

测试用例 6：简化格式

格式：<pre><code class="mermaid">


pie title 数据分布
    "类别A" : 45
    "类别B" : 30
    "类别C" : 25

测试用例 7：无 pre 包裹

格式：<code class="language-mermaid">（无 pre 标签）


flowchart LR
    Start --> Stop

测试用例 8：自定义属性格式

格式：<pre data-lang="mermaid">

stateDiagram-v2
    [*] --> 状态1
    状态1 --> 状态2
    状态2 --> [*]

测试用例 9：复杂图表

测试复杂的 Mermaid 图表渲染


classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }