Mermain 语法详解
1.图声明
flowchart TD A --> B2.方向说明
| 代码 | 方向 | 说明 |
|---|---|---|
| TD 或 TB | 从上到下 | Top to Bottom |
| BT | 从下到上 | Bottom to Top |
| LR | 从左到右 | Left to Right |
| RL | 从右到左 | Right to Left |
3.节点定义
3.1 基本节点
flowchart LR id1[矩形节点] id2(圆角矩形) id3([体育场形]) id4[[子程序形]] id5[(圆柱形)] id6((圆形)) id8{菱形} id9{{六边形}} id10[/平行四边形/] id11[\反向平行四边形\] id12[/梯形\] id13[\反向梯形/]3.2 带文本的节点
flowchart LR A[这是矩形节点<br>支持多行文本] B(圆角<br>多行) C{判断<br>节点}4.连接语法
4.1 基本连接
flowchart LR A --> B C -- 带文本的连接 --> D E --- F G ==> H4.2 连接线类型
flowchart LR A --> B C --- D E -- 带文字 --- F G ==> H I -.-> J K -. 虚线带文字 .-> L M --o N O --x P Q o--o R S x--x T4.3 多节点连接
flowchart LR %% 一个节点连接多个 A --> B & C --> D %% 分别连接 E --> F E --> G5. 子图（Subgraph）
5.1 基本子图
flowchart TD A[开始] --> B{判断} subgraph SG1 [子图1] C[处理1] D[处理2] end subgraph SG2 [子图2] E[处理3] F[处理4] end B -->|条件1| SG1 B -->|条件2| SG2 SG1 --> G[结束] SG2 --> G5.2 子图方向
flowchart TD A --> B subgraph one [子图1] direction LR C --> D D --> E end subgraph two [子图2] direction RL F --> G G --> H end B --> one one --> two6. 条件分支和循环
6.1 条件判断
flowchart TD Start[开始] --> Condition{条件判断} Condition -->|是| ProcessA[处理A] ProcessA --> End[结束] Condition -->|否| ProcessB[处理B] ProcessB --> End6.2 循环结构
flowchart TD Start[开始] --> Init[初始化] Init --> Condition{条件满足?} Condition -->|是| Process[处理过程] Process --> Update[更新条件] Update --> Condition Condition -->|否| End[结束]7. 样式自定义
7.1 节点样式
flowchart LR A[默认样式] B[红色填充]:::red C[蓝色边框]:::blue classDef red fill:#f96,stroke:#333,stroke-width:2px classDef blue fill:#66f,stroke:#333,stroke-width:2px,color:#fff7.2 连接线样式
flowchart LR A -->|红色粗线| B C -.->|虚线| D linkStyle 0 stroke:#f00,stroke-width:4px linkStyle 1 stroke:#0f0,stroke-dasharray: 5 58. 实际应用示例
8.1 饼状图
pie title Example Pie Chart "First slice": 30 "Second slice": 20 "Third slice": 508.2 时序图（Sequence Diagram）
sequenceDiagram participant UI participant MGR participant CTRL participant DRV participant CHARGER UI->>MGR: Enable Charge MGR->>CTRL: Start Charging CTRL->>DRV: Set Charge Current DRV->>CHARGER: I2C Write CHARGER-->>DRV: ACK DRV-->>CTRL: Success CTRL-->>MGR: Charging Started8.4 流程图（Flowchart）
flowchart LR APP[Application] CTRL[Controller] DRV[Driver] HAL[HAL] APP --> CTRL CTRL --> DRV DRV --> HAL8.5 状态机图 (State Diagram)
stateDiagram-v2 [*] --> Idle Idle --> Heating : Start Heating --> Idle : Stop Idle --> Charging : USB Insert Charging --> Idle : Charge Full8.6 Class Diagram（类图）
适合：
- C++
- TouchGFX
- MVP架构
classDiagram class Model{+update()} class Presenter{+onClick()} class View{+show()} Presenter --> Model Presenter --> View8.7 Entity Relationship Diagram（ER图）
适用：数据库设计。
erDiagram USER ||--o{ ORDER : places USER { int id string name } ORDER { int id double amount }8.8 Gantt（甘特图）
适合：
- 项目排期
- 培训计划
gantt title Eagle项目计划 section 开发 驱动开发 :a1, 2026-10-01, 5d section 测试 功能测试 :a2, after a1, 3d8.9 Git分支图（Git Graph）
适合：
- feature分支
- release分支
- cherry-pick
- merge
gitGraph commit commit branch release checkout release commit checkout main commit merge release8.10 Journey Diagram（用户旅程图）
- 产品经理常用。
journey title 用户使用设备 section 使用设备 启动设备: 5 加热烟弹: 4 查看记录: 38.11 Mindmap（思维导图）
mindmap root((Mono)) UI Manager Controller Driver HAL8.12 综合应用
下面是之前LIN休眠唤醒流程的完整代码示例：
flowchart TD A[正常通信状态] -->|主节点发送休眠帧<br>0x3C 0x00| B subgraph B [休眠过程] direction LR B1[所有节点接收到休眠帧] --> B2[节点MCU准备休眠] B2 --> B3[关闭收发器或切至低功耗模式] end B3 --> C[休眠状态<br>总线隐性 功耗极低] C -->|需要唤醒网络| D{唤醒源类型?} D -->|主节点唤醒| E subgraph E [主节点唤醒流程] direction LR E1[主节点MCU控制收发器<br>发送同步间隔场] --> E2[同步间隔场唤醒所有节点] E2 --> E3[主节点继续发送同步场/数据场<br>启动正常通信] end D -->|从节点唤醒| F subgraph F [从节点唤醒流程] direction LR F1[从节点MCU控制收发器<br>发送>150μs显性脉冲] --> F2[唤醒脉冲唤醒所有节点] F2 --> F3[主节点被唤醒后<br>在规定时间内发送同步间隔场] F3 -->|超时内发送| F4[所有从节点接收到同步间隔场<br>网络通信恢复] F3 -->|超时未发送| F5[唤醒失败<br>从节点记录错误/重试] end E3 --> A F4 --> A classDef process fill:#e1f5fe,stroke:#01579b,stroke-width:2px classDef decision fill:#fff3e0,stroke:#ef6c00,stroke-width:2px classDef state fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px class A,E3,F4 state class D decision class B,E,F process9. 常见问题与技巧
9.1 文本换行
使用标签或 \n 进行换行
A[第一行<br>第二行] B[第一行\n第二行]9.2 特殊字符转义
使用HTML实体或引号包裹：
A["双引号: \"文本\""] B[小于号: <] C[大于号: >]9.3 注释
使用 %% 添加注释：
flowchart TD %% 这是一条注释 A --> B9.4 节点ID命名规则
- 只能包含字母、数字、下划线、连字符,不能以数字开头,区分大小写
9.5 最佳实践
- 保持简洁：流程图不要过于复杂
- 统一风格：相同类型的节点使用相同样式
- 合理分组：使用子图将相关步骤分组
- 明确方向：根据流程复杂度选择合适的方向
