Mermaid 图表测试

本文档全面测试 Mermaid 图表引擎对各种图表类型的渲染支持，包含流程图、序列图、状态图、类图、ER 图、甘特图、饼图、Git Graph、时间线、象限图、C4 图、块图、思维导图、桑基图、XY 图表、数据包图和 Journey 图等。

---

1. 流程图 (Flowchart / Graph)

1.1 基础流程图 (Top-Down)

flowchart TD
    A[开始] --> B[读取配置]
    B --> C{配置有效?}
    C -->|是| D[初始化服务]
    C -->|否| E[抛出错误]
    D --> F[执行主逻辑]
    F --> G{处理成功?}
    G -->|是| H[返回结果]
    G -->|否| I[重试]
    I --> F
    E --> J[终止]
    H --> K[结束]
    J --> K

1.2 左到右流程图 (LR)

flowchart LR
    A[用户输入] --> B[数据校验]
    B --> C[处理请求]
    C --> D[写入数据库]
    D --> E[返回响应]

1.3 含子图的分层架构图

flowchart TB
    subgraph 接入层
        A[负载均衡] --> B[API 网关]
        B --> C[认证服务]
    end

    subgraph 业务层
        C --> D[订单服务]
        C --> E[用户服务]
        C --> F[支付服务]
    end

    subgraph 数据层
        D --> G[(MySQL)]
        E --> H[(PostgreSQL)]
        F --> I[(Redis)]
    end

    subgraph 监控层
        J[Prometheus] -.->|监控| D
        J -.->|监控| E
        J -.->|监控| F
        K[Grafana] --> J
    end

1.4 带样式和形状节点的流程图

flowchart TB
    A([开始]) --> B((圆形判断))
    B -->|是| C{菱形决策}
    B -->|否| D[/平行四边形<br/>数据输入/]
    C --> E[普通矩形]
    C --> F((圆形))
    E --> G([体育场形状])
    F --> H([体育场形状])
    G --> I((结束))
    H --> I

    style A fill:#4CAF50,color:#fff,stroke:#388E3C
    style C fill:#FF9800,color:#fff,stroke:#F57C00
    style D fill:#2196F3,color:#fff,stroke:#1976D2
    style F fill:#9C27B0,color:#fff,stroke:#7B1FA2
    style I fill:#f44336,color:#fff,stroke:#D32F2F

1.5 带方向性箭头的流程图

flowchart LR
    A -->|-->| B
    B -->|---| C
    C -->|===| D
    D -->|->>| E
    E -->|-.-| F
    F -->|=->| G

    A -->|实线| B
    B -->|虚线| C
    C -->|粗线| D
    D -->|带箭头| E
    E -->|点线| F

1.6 带注释的流程图

flowchart TD
    A[开始] --> B[步骤 1]
    B --> C[步骤 2]
    C --> D[步骤 3]
    D --> E[结束]

    B -.- B1[["这是步骤 1 的说明"]]
    C -.- C1[["这是步骤 2 的说明"]]

---

2. 序列图 (Sequence Diagram)

2.1 基础序列图

sequenceDiagram
    participant Client as 客户端
    participant Server as 服务器
    participant DB as 数据库

    Client->>Server: 发送请求
    Server->>DB: 查询数据
    DB-->>Server: 返回数据
    Server-->>Client: 返回响应

2.2 带循环和条件分支的序列图

sequenceDiagram
    participant U as 用户
    participant A as 认证服务
    participant P as 权限服务
    participant API as 业务接口

    U->>A: 提交登录凭证
    A->>A: 验证用户名密码

    alt 验证成功
        A->>P: 获取权限信息
        P-->>A: 返回权限列表
        A->>A: 生成 JWT Token
        A-->>U: 登录成功 + Token
    else 验证失败
        A-->>U: 登录失败
        A->>A: 记录失败日志
    end

    loop 每次 API 请求
        U->>API: 携带 Token 请求
        API->>A: 验证 Token
        alt Token 有效
            API-->>U: 返回数据
        else Token 过期
            API-->>U: 401 Unauthorized
        end
    end

2.3 带自调用和异步消息的序列图

sequenceDiagram
    participant A as 组件A
    participant B as 组件B
    participant C as 组件C

    A->>B: 同步调用
    B-->>A: 返回结果

    A->>C: 异步调用
    activate C
    C->>C: 内部处理
    C-->>A: 回调结果
    deactivate C

    A->>A: 自我调用

2.4 带自动编号的序列图

sequenceDiagram
    autonumber
    participant Browser as 浏览器
    participant API as API 网关
    participant Auth as 认证服务
    participant DB as 数据库

    Browser->>API: GET /api/data
    API->>Auth: 验证 Token
    Auth-->>API: Token 有效
    API->>DB: 查询数据
    DB-->>API: 返回结果
    API->>API: 组装响应
    API-->>Browser: JSON 响应

---

3. 状态图 (State Diagram)

3.1 基础状态图 (v2)

stateDiagram-v2
    [*] --> 待处理
    待处理 --> 审核中: 提交
    审核中 --> 已通过: 审核通过
    审核中 --> 已驳回: 审核拒绝
    已驳回 --> 待处理: 修改后重新提交
    已通过 --> 进行中: 开始执行
    进行中 --> 已完成: 执行完成
    进行中 --> 已取消: 用户取消
    已取消 --> [*]
    已完成 --> [*]

3.2 含嵌套状态和复合状态

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: click
    Loading --> Active
    Active --> Suspended: suspend

    state Suspended {
        [*] --> Paused
        Paused --> TimedOut: timeout
        [*] --> Stopped
        Stopped --> [*]
    }

    Active --> [*]: done
    TimedOut --> Idle: reload
    Stopped --> Idle: restart

3.3 含注释的状态图

stateDiagram-v2
    [*] --> 已创建
    已创建 --> 处理中: 开始处理
    处理中 --> 成功: 完成
    处理中 --> 失败: 出错
    成功 --> [*]
    失败 --> 已创建: 重试

    note right of 处理中
      此处包含复杂的\n业务逻辑处理
    end note

---

4. 类图 (Class Diagram)

4.1 基础类图

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
        +move() void
    }
    class Dog {
        +String breed
        +fetch() void
        +bark() void
    }
    class Cat {
        +bool indoor
        +purr() void
        +climb() void
    }

    Animal <|-- Dog
    Animal <|-- Cat

4.2 带关系和多重性的类图

classDiagram
    class Order {
        +String orderId
        +Date createdAt
        +Double totalAmount
        +place() void
        +cancel() void
    }

    class OrderItem {
        +String itemId
        +String productId
        +int quantity
        +Double price
        +calculateTotal() Double
    }

    class Product {
        +String productId
        +String name
        +Double price
        +int stock
        +updateStock(int) void
    }

    class Customer {
        +String customerId
        +String name
        +String email
        +List getOrders() Order
    }

    Customer "1" --> "0..*" Order : places
    Order "1" *-- "1..*" OrderItem : contains
    OrderItem "N" --> "1" Product : references

4.3 抽象类与接口

classDiagram
    class Shape {
        <<abstract>>
        +String color
        +calculateArea() Double
        +calculatePerimeter() Double
        +draw() void
    }

    class Circle {
        +Double radius
        +getRadius() Double
        +setRadius(Double) void
    }

    class Rectangle {
        +Double width
        +Double height
        +getWidth() Double
        +getHeight() Double
    }

    class Serializable {
        <<interface>>
        +serialize() String
        +deserialize(String) void
    }

    class Comparable {
        <<interface>>
        +compareTo(Object) int
    }

    Shape <|-- Circle
    Shape <|-- Rectangle
    Shape ..|> Serializable
    Shape ..|> Comparable

---

5. ER 图 (Entity Relationship)

5.1 基础 ER 图

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER_ITEM }|--|| PRODUCT : includes
    PRODUCT ||--o{ CATEGORY : belongs_to

    CUSTOMER {
        int id PK
        string name
        string email UK
        string phone
        date created_at
    }

    ORDER {
        int id PK
        int customer_id FK
        string status
        decimal total_amount
        date order_date
    }

    ORDER_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
        decimal unit_price
    }

    PRODUCT {
        int id PK
        string name
        decimal price
        int stock
        int category_id FK
    }

    CATEGORY {
        int id PK
        string name
        string description
    }

5.2 多重性 ER 图

erDiagram
    STUDENT {
        int student_id PK
        string name
        string gender
        string email
    }

    COURSE {
        int course_id PK
        string course_name
        int credits
    }

    TEACHER {
        int teacher_id PK
        string name
        string title
    }

    DEPARTMENT {
        int department_id PK
        string department_name
    }

    ENROLLMENT {
        int student_id FK
        int course_id FK
        string semester
        float grade
    }

    STUDENT ||--o{ ENROLLMENT : "选修"
    COURSE ||--o{ ENROLLMENT : "包含"

    TEACHER ||--o{ COURSE : "教授"
    DEPARTMENT ||--o{ TEACHER : "拥有"
    DEPARTMENT ||--o{ COURSE : "开设"

---

6. 甘特图 (Gantt Chart)

6.1 基础甘特图

gantt
    title 软件开发项目时间线
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d

    section 需求阶段
    需求调研     :a1, 2025-01-01, 5d
    需求评审     :a2, after a1, 2d
    需求文档     :a3, after a2, 3d

    section 设计阶段
    UI 设计      :b1, after a3, 7d
    架构设计     :b2, after a3, 5d
    技术评审     :b3, after b1, 2d

    section 开发阶段
    后端开发     :c1, after b3, 15d
    前端开发     :c2, after b3, 15d
    API 联调     :c3, after c1, 5d
    单元测试     :c4, after c2, 5d

    section 测试阶段
    集成测试     :d1, after c3, 7d
    性能测试     :d2, after c3, 5d
    缺陷修复     :d3, after d1, 5d

    section 发布
    预发布       :milestone, after d3, 0d
    正式发布     :milestone, after d3, 3d

6.2 含依赖和关键路径的甘特图

gantt
    title 关键路径分析
    dateFormat  YYYY-MM-DD

    section 核心路径
    需求分析         :crit, a1, 2025-03-01, 5d
    系统设计         :crit, a2, after a1, 7d
    数据库设计       :crit, a3, after a2, 3d
    核心模块开发     :crit, a4, after a3, 10d
    集成测试         :crit, a5, after a4, 5d
    部署上线         :crit, milestone, after a5, 0d

    section 并行任务
    UI 设计          :b1, after a2, 10d
    API 文档         :b2, after a3, 5d
    前端开发         :b3, after a4, 8d

---

7. 饼图 (Pie Chart)

7.1 基础饼图

pie title 2024 年度编程语言使用占比
    "JavaScript" : 32
    "Python" : 24
    "Rust" : 12
    "Go" : 11
    "TypeScript" : 10
    "Java" : 8
    "其他" : 3

7.2 占比分析饼图

pie title 服务器资源消耗分布
    "CPU 计算" : 35
    "内存占用" : 28
    "网络带宽" : 22
    "磁盘 I/O" : 15

---

8. Git Graph

8.1 基础 Git 分支图

gitGraph
    commit id: "初始提交" type: HIGHLIGHT
    commit id: "添加 README"
    branch develop
    checkout develop
    commit id: "新功能开发"
    commit id: "添加功能 A"
    commit id: "添加功能 B"
    checkout main
    commit id: "修复 Bug"
    merge develop id: "合并 develop" type: REVERSE
    commit id: "发布 v1.0" type: HIGHLIGHT

8.2 多分支 Git 图

gitGraph
    commit id: "v1.0 发布"
    branch feature-auth
    branch feature-payment
    checkout feature-auth
    commit id: "用户注册"
    commit id: "用户登录"
    commit id: "JWT 认证"
    checkout main
    checkout feature-payment
    commit id: "支付接口"
    commit id: "订单创建"
    commit id: "退款功能"
    checkout main
    merge feature-auth id: "合并认证" type: HIGHLIGHT
    merge feature-payment id: "合并支付" type: HIGHLIGHT
    commit id: "v2.0 发布" type: HIGHLIGHT

---

9. 时间线 (Timeline)

9.1 基础时间线

timeline
    title 项目发展历程
    2020 : 公司成立
         : 首款产品上线
    2021 : 用户突破 10 万
         : 完成 A 轮融资
    2022 : 推出企业版
         : 海外市场拓展
    2023 : 用户突破 100 万
         : 完成 B 轮融资
    2024 : 开源核心引擎
         : 用户突破 500 万

9.2 多级时间线

timeline
    title 技术演进
    1980s : HTML 1.0 诞生
         : TCP/IP 协议栈
    1990s : JavaScript 发布
         : CSS 引入
         : 万维网普及
    2000s : AJAX 出现
         : RESTful API
         : Web 2.0
    2010s : HTML5 + CSS3
         : SPA 框架
         : 移动优先
    2020s : WebAssembly
         : Edge Computing
         : AI 集成

---

10. 象限图 (Quadrant Chart)

10.1 技术评估象限图

quadrantChart
    title 技术选型评估矩阵
    x-axis 低成熟度 --> 高成熟度
    y-axis 低采用率 --> 高采用率

    quadrant-1 优先采用
    quadrant-2 持续观察
    quadrant-3 谨慎评估
    quadrant-4 保持关注

    React: [0.8, 0.9]
    Vue: [0.7, 0.8]
    Angular: [0.6, 0.7]
    Svelte: [0.4, 0.6]
    SolidJS: [0.3, 0.4]
    Qwik: [0.2, 0.3]
    Astro: [0.5, 0.5]
    Next.js: [0.7, 0.9]

10.2 自定义象限图

quadrantChart
    title 功能优先级评估
    x-axis 低影响 --> 高影响
    y-axis 低复杂度 --> 高复杂度

    quadrant-1 先做
    quadrant-2 简化后做
    quadrant-3 考虑延期
    quadrant-4 重新评估

    用户认证: [0.9, 0.3]
    支付系统: [0.8, 0.7]
    数据导出: [0.5, 0.2]
    社交功能: [0.3, 0.8]
    AI 推荐: [0.7, 0.9]

---

11. C4 上下文图 (C4 Context)

C4Context
    title 系统上下文图 - 电商平台

    Person(user, "终端用户", "通过浏览器使用电商平台")
    Person(admin, "管理员", "管理后台运营")

    System_Boundary(platform, "电商平台系统") {
        System(frontend, "前端应用", "React SPA，用户交互界面")
        System(api, "API 服务", "Spring Boot 后端服务")
        System(db, "数据库", "PostgreSQL 主数据库")
        System(cache, "缓存服务", "Redis 缓存层")
    }

    System(external_pay, "第三方支付", "处理支付流程")
    System(external_sms, "短信服务", "发送验证码和通知")

    Rel(user, frontend, "浏览商品/下单", "HTTPS")
    Rel(admin, frontend, "管理后台", "HTTPS")
    Rel(frontend, api, "调用 RESTful API", "HTTPS")
    Rel(api, db, "读写数据", "TCP")
    Rel(api, cache, "缓存读写", "TCP")
    Rel(api, external_pay, "发起支付", "HTTPS")
    Rel(api, external_sms, "发送短信", "HTTPS")

---

12. 块图 (Block Diagram)

12.1 架构块图

block-beta
    columns 3

    Client["客户端"] --> API["API 网关"]

    space Auth["认证服务"] space
    space App["应用服务"] space

    API --> Auth
    API --> App

    space DB["数据库"] space
    space Redis["Redis 缓存"] space

    Auth --> DB
    App --> DB
    App --> Redis

    space Monitor["监控告警"] space

    Auth --> Monitor
    App --> Monitor

    classDef cloud fill:#e1f5fe,stroke:#01579b
    classDef db fill:#fff3e0,stroke:#e65100
    classDef mon fill:#f3e5f5,stroke:#6a1b9a

    class Client,API,Auth,App cloud
    class DB,Redis db
    class Monitor mon

12.2 系统块图

block-beta
    columns 4

    A["入口 A"]
    B["入口 B"]
    C["入口 C"]
    D["入口 D"]

    space
    E["处理层"]
    space
    space

    space
    F["输出 F"]
    G["输出 G"]
    space

    A --> E
    B --> E
    C --> E
    D --> E

    E --> F
    E --> G

---

13. 思维导图 (Mindmap)

mindmap
  root((AI 技术生态))
    机器学习
      监督学习
        分类
        回归
      无监督学习
        聚类
        降维
      强化学习
    深度学习
      卷积神经网络
        图像识别
        目标检测
      循环神经网络
        文本生成
        时间序列
      Transformer
        BERT
        GPT
    应用场景
      计算机视觉
      自然语言处理
      语音识别
      推荐系统

13.2 组织结构思维导图

mindmap
  root((公司组织))
    技术部
      前端组
      后端组
      数据组
    产品部
      产品设计
      产品经理
    运营部
      用户运营
      内容运营
      数据分析

---

14. 桑基图 (Sankey Diagram)

14.1 桑基图英文支持

sankey-beta
    Solar,PowerPlant,30
    Wind,PowerPlant,20
    Thermal,PowerPlant,50
    PowerPlant,Industry,45
    PowerPlant,Residential,35
    PowerPlant,Commercial,20

14.2 流量分析桑基图(中文)

sankey-beta
    "来源渠道A","注册用户",1000
    "来源渠道B","注册用户",800
    "来源渠道C","注册用户",600
    "来源渠道D","注册用户",400
    "注册用户","活跃用户",1500
    "注册用户","沉睡用户",1300
    "活跃用户","付费用户",600
    "活跃用户","免费用户",900
    "付费用户","高价值用户",200
    "付费用户","普通用户",400

---

15. XY 图表 (XY Chart)

15.1 柱状图

xychart-beta
    title "月度用户增长趋势"
    x-axis ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
    y-axis "新增用户数" 0 --> 5000
    bar [1200, 1500, 1800, 2200, 2600, 3000, 3200, 3500, 3800, 4200, 4500, 4800]

15.2 折线图

xychart-beta
    title "服务器 CPU 使用率 (24小时)"
    x-axis ["0时", "4时", "8时", "12时", "16时", "20时"]
    y-axis "使用率 (%)" 0 --> 100
    line [15, 20, 35, 80, 65, 25]

15.3 组合图表

xychart-beta
    title "季度收入与利润"
    x-axis [Q1, Q2, Q3, Q4]
    y-axis "金额 (万元)" 0 --> 500
    bar [120, 180, 250, 320]
    line [40, 65, 90, 120]

---

16. 数据包图 (Packet Diagram)

packet-beta
    title IPv4 数据包结构
    0-15: "源端口号"
    16-31: "目标端口号"
    32-47: "序列号"
    48-63: "确认号"
    64-79: "头部长度 + 标志位"
    80-95: "生存时间 TTL"
    96-111: "协议号"
    112-127: "校验和"

---

17. Journey 图

journey
    title 用户注册旅程
    section 发现阶段
      了解平台价值 : 4: 用户
      搜索相关产品 : 5: 用户
      对比竞品方案 : 3: 用户
    section 注册阶段
      访问注册页面 : 4: 用户
      填写信息     : 2: 用户
      验证手机号   : 1: 用户
      完成注册     : 5: 用户
    section 使用阶段
      浏览功能     : 3: 用户
      配置项目     : 4: 用户
      首次成功     : 5: 用户
      邀请同事     : 2: 用户

17.2 客户服务旅程

journey
    title 客户支持旅程
    section 咨询阶段
      发现问题     : 5: 用户
      查找帮助     : 4: 用户
      提交工单     : 3: 用户
    section 响应阶段
      客服分配     : 2: 客服
      初步诊断     : 4: 客服
      提供方案     : 3: 客服
    section 解决阶段
      执行操作     : 5: 客服
      问题修复     : 4: 客服
      确认解决     : 5: 用户
      满意度反馈   : 4: 用户