Mermaid流程图语言：从文本到专业级图表的全解析

Mermaid 用文本语法生成图表，支持流程图、时序图、类图、状态图、甘特图等，实现「文本即图形」。

流程图

flowchart TD
    A[开始] --> B{条件}
    B -->|是| C[执行]
    B -->|否| D[结束]

方向：TD/TB（上下）、LR（左右）、RL、BT

节点形状：

• [矩形]
• (圆边矩形)
• {菱形}
• ((圆形))

连接线：

• --> 实线箭头
• --- 实线无箭头
• -.-> 虚线箭头
• ==> 粗线箭头
• -- 文字 --> 带文字

时序图

sequenceDiagram
    participant A as 用户
    participant B as 系统
    A->>B: 请求
    B-->>A: 响应

箭头：->>（实线）、-->>（虚线）、->x（带×）

类图

classDiagram
    class Animal {
        +String name
        +eat()
        #sleep()
        -digest()
    }
    Animal <|-- Dog : 继承

可见性：+（public）、-（private）、#（protected）

关系：<|--（继承）、*--（组合）、o--（聚合）

状态图

stateDiagram-v2
    [*] --> State1
    State1 --> State2 : 事件
    State2 --> [*]

甘特图

gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 阶段A
    任务1 :a1, 2023-01-01, 30d

饼图

pie
    title 分布
    "A" : 45
    "B" : 30
    "C" : 25

样式

flowchart LR
    classDef red fill:#f00,stroke:#333
    A --> B
    class A red

子图

flowchart TB
    subgraph 系统 [订单处理]
        direction LR
        A[创建] --> B[支付]
    end

学习资源

• 官方文档：https://mermaid.js.org/
• 在线编辑：https://mermaid.live/