Mermaid 图表组件

```mermaid
flowchart TD
    A[开始] --> B{判断条件}
    B -->|是| C[执行操作1]
    B -->|否| D[执行操作2]
    C --> E[结束]
    D --> E
```

```mermaid
sequenceDiagram
    participant 用户
    participant 前端
    participant 后端
    participant 数据库
    
    用户->>前端: 发送请求
    前端->>后端: 接口调用
    后端->>数据库: 查询数据
    数据库-->>后端: 返回结果
    后端-->>前端: 响应数据
    前端-->>用户: 展示页面
```

```mermaid
classDiagram
    class 动物 {
        +String 名称
        +int 年龄
        +eat() void
        +sleep() void
    }
    class 狗 {
        +String 品种
        +bark() void
    }
    class 猫 {
        +String 毛色
        +meow() void
    }
    动物 <|-- 狗
    动物 <|-- 猫
```

```mermaid
stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付: 完成付款
    已支付 --> 已发货: 商家发货
    已发货 --> 已签收: 确认收货
    已签收 --> [*]
```

```mermaid
erDiagram
    用户 {
        int id PK
        string 用户名
        string 手机号
    }
    订单 {
        int id PK
        int 用户_id FK
        decimal 金额
        datetime 创建时间
    }
    商品 {
        int id PK
        string 商品名称
        decimal 单价
    }
    用户 ||--o{ 订单 : 拥有
    订单 }|--|{ 商品 : 包含
```

```mermaid
gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 需求阶段
    需求调研           :a1, 2025-01-01, 3d
    需求确认           :after a1, 2d
    section 开发阶段
    前端开发           :2025-01-06, 5d
    后端开发           :2025-01-06, 7d
    section 测试阶段
    系统测试           :2025-01-13, 3d
```

```mermaid
pie
    title 产品用户占比
    "安卓用户" : 65
    "iOS用户" : 30
    "其他设备" : 5
```

```mermaid
gitGraph
    commit id: "初始提交"
    commit id: "添加新功能"
    branch develop
    checkout develop
    commit id: "修复错误"
    commit id: "完善功能"
    checkout main
    merge develop
    commit id: "合并开发分支"
```