绘制图表（Mermaid）

---

Mermaid 能绘制哪些图？

• 饼状图：使用 pie 关键字
• 流程图：使用 graph 关键字
• 序列图：使用 sequenceDiagram 关键字
• 甘特图：使用 gantt 关键字
• 类图：使用 classDiagram 关键字
• 状态图：使用 stateDiagram 关键字
• 用户旅程图：使用 journey 关键字
• 实体关系图：使用 erDiagram 关键字
• 时序图：使用 timeline 关键字
• 要求图：使用 requirementDiagram 关键字

饼状图

pie
    title 为什么总是宅在家里？
    "喜欢宅" : 15
    "天气太热或太冷" : 20
    "穷" : 500

演示：

流程图

从左往右

graph LR
    A[开始] --> B{判断}
    B -->|条件1| C[处理1]
    B -->|条件2| D[处理2]
    C --> E[结束]
    D --> E

演示：

从上往下

  graph TD
      A[用户登录] -->|输入密码| B{验证成功?}
      B -->|是| C[进入首页]
      B -->|否| D[提示错误]
      C --> E[加载用户数据]

演示：

• graph 或 graph TB 或 graph TD：从上往下
• graph BT：从下往上
• graph LR：从左往右
• graph RL：从右往左

序列图

  sequenceDiagram
      participant U as 用户
      participant S as 服务器
      U->>S: 请求登录
      S-->>U: 返回 Token
      U->>S: 携带 Token 请求数据
      S-->>U: 返回用户数据

演示：

甘特图

gantt
    title 项目进度
    dateFormat  YYYY-MM-DD
    section 阶段1
    任务1     :a1, 2026-01-01, 30d
    任务2     :after a1, 20d

演示：

类图

classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount) bool
    +withdrawal(amount) int
}

演示：

状态图

stateDiagram
    [*] --> 初始状态
    初始状态 --> 运行中
    运行中 --> 暂停: 收到暂停事件
    运行中 --> 错误: 发生异常
    暂停 --> 运行中: 收到恢复事件
    错误 --> [*]: 重置

演示：

    stateDiagram-v2
        State1: The state with a note
        note right of State1
            Important information! You can write
            notes.
        end note
        State1 --> State2
        note left of State2 : This is the note to the left.

演示：

用户旅程图

journey
    title 我的日常
    section 早晨准备
      起床: 5: 我
      洗漱: 5: 我
      吃早餐: 5: 我
    section 工作时间
      开会: 3: 我, 同事
      写报告: 4: 我
      回复邮件: 2: 我
    section 晚间放松
      看电视: 6: 我
      洗澡: 5: 我
      睡觉: 7: 我

演示：

实体关系图

erDiagram
    CUSTOMER ||--o{ ORDER : "下订单"
    ORDER ||--|{ LINE-ITEM : "包含"
    CUSTOMER {
        string name
        string email
        int phone
    }
    ORDER {
        int orderId
        date orderDate
        int customerId
    }
    LINE-ITEM {
        int itemId
        int quantity
        float price
    }

演示：

erDiagram
    CAR 1 to zero or more NAMED-DRIVER : allows
    PERSON many(0) optionally to 0+ NAMED-DRIVER : is

演示：

时序图

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : YouTube
    2006 : Twitter

演示：

要求图

    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    functionalRequirement test_req2 {
    id: 1.1
    text: the second test text.
    risk: low
    verifymethod: inspection
    }

    performanceRequirement test_req3 {
    id: 1.2
    text: the third test text.
    risk: medium
    verifymethod: demonstration
    }

    interfaceRequirement test_req4 {
    id: 1.2.1
    text: the fourth test text.
    risk: medium
    verifymethod: analysis
    }

    physicalRequirement test_req5 {
    id: 1.2.2
    text: the fifth test text.
    risk: medium
    verifymethod: analysis
    }

    designConstraint test_req6 {
    id: 1.2.3
    text: the sixth test text.
    risk: medium
    verifymethod: analysis
    }

    element test_entity {
    type: simulation
    }

    element test_entity2 {
    type: word doc
    docRef: reqs/test_entity
    }

    element test_entity3 {
    type: "test suite"
    docRef: github.com/all_the_tests
    }


    test_entity - satisfies -> test_req2
    test_req - traces -> test_req2
    test_req - contains -> test_req3
    test_req3 - contains -> test_req4
    test_req4 - derives -> test_req5
    test_req5 - refines -> test_req6
    test_entity3 - verifies -> test_req5
    test_req <- copies - test_entity2

演示：