# 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()
        }