目录
- [Mermaid 语法详解](#Mermaid 语法详解)
- 实际应用示例
- 常见问题与技巧
-
- [1. 文本换行](#1. 文本换行)
- [2. 特殊字符转义](#2. 特殊字符转义)
- [3. 注释](#3. 注释)
- [4. 节点ID命名规则](#4. 节点ID命名规则)
- [5. 最佳实践](#5. 最佳实践)
Mermaid 语法详解
基本语法结构
1. 图声明
A
B
2. 方向定义
| 代码 | 方向 | 说明 |
|---|---|---|
| TD 或 TB | 从上到下 | Top to Bottom |
| BT | 从下到上 | Bottom to Top |
| LR | 从左到右 | Left to Right |
| RL | 从右到左 | Right to Left |
节点定义
基本节点
矩形节点
圆角矩形
体育场形
子程序形
圆柱形
圆形
菱形
六边形
平行四边形
反向平行四边形
梯形
反向梯形
对应代码：
flowchart LR
id1[矩形节点]
id2(圆角矩形)
id3([体育场形])
id4[[子程序形]]
id5[(圆柱形)]
id6((圆形))
id8{菱形}
id9{{六边形}}
id10[/平行四边形/]
id11[\反向平行四边形\]
id12[/梯形\]
id13[\反向梯形/]带文本的节点
这是矩形节点
支持多行文本
圆角
多行
判断
节点
代码：
flowchart LR
A[这是矩形节点<br>支持多行文本]
B(圆角<br>多行)
C{判断<br>节点}连接线语法
基本连接
带文本的连接
A
B
C
D
E
F
G
H
代码：
flowchart LR
A --> B
C -- 带文本的连接 --> D
E --- F
G ==> H连接线类型
带文字
虚线带文字
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
代码：
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 T # 双向叉箭头多节点连接
A
B
C
D
E
F
G
代码：
flowchart LR
A --> B & C --> D # 一个节点连接多个
E --> F
E --> G # 分别连接子图（Subgraph）
基本子图
条件1
条件2
子图2
处理3
处理4
子图1
处理1
处理2
开始
判断
结束
代码：
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 --> G子图方向
子图2
F
G
H
子图1
C
D
E
A
B
代码：
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 --> two条件分支和循环
条件判断
是
否
开始
条件判断
处理A
结束
处理B
代码：
flowchart TD
Start[开始] --> Condition{条件判断}
Condition -->|是| ProcessA[处理A]
ProcessA --> End[结束]
Condition -->|否| ProcessB[处理B]
ProcessB --> End循环结构
是
否
开始
初始化
条件满足?
处理过程
更新条件
结束
代码：
flowchart TD
Start[开始] --> Init[初始化]
Init --> Condition{条件满足?}
Condition -->|是| Process[处理过程]
Process --> Update[更新条件]
Update --> Condition
Condition -->|否| End[结束]样式自定义
节点样式
默认样式
红色填充
蓝色边框
代码：
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:#fff连接线样式
红色粗线
虚线
A
B
C
D
代码：
flowchart LR
A -->|红色粗线| B
C -.->|虚线| D
linkStyle 0 stroke:#f00,stroke-width:4px
linkStyle 1 stroke:#0f0,stroke-dasharray: 5 5实际应用示例
LIN休眠唤醒流程图
下面是之前LIN休眠唤醒流程的完整代码示例：
从节点唤醒流程
主节点唤醒流程
休眠过程
需要唤醒网络
超时内发送
超时未发送
主节点发送休眠帧
0x3C 0x00
主节点唤醒
从节点唤醒
正常通信状态
所有节点接收到休眠帧
节点MCU准备休眠
关闭收发器或切至低功耗模式
休眠状态
总线隐性 功耗极低
唤醒源类型?
主节点MCU控制收发器
发送同步间隔场
同步间隔场唤醒所有节点
主节点继续发送同步场/数据场
启动正常通信
从节点MCU控制收发器
发送>150μs显性脉冲
唤醒脉冲唤醒所有节点
主节点被唤醒后
在规定时间内发送同步间隔场
所有从节点接收到同步间隔场
网络通信恢复
唤醒失败
从节点记录错误/重试
代码：
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 process常见问题与技巧
1. 文本换行
使用
标签或 \n 进行换行：
A[第一行<br>第二行]
B[第一行\n第二行]2. 特殊字符转义
使用HTML实体或引号包裹：
A["双引号: \"文本\""]
B[小于号: <]
C[大于号: >]3. 注释
使用 %% 添加注释：
flowchart TD
%% 这是一条注释
A --> B4. 节点ID命名规则
只能包含字母、数字、下划线、连字符
不能以数字开头
区分大小写
5. 最佳实践
保持简洁：流程图不要过于复杂
统一风格：相同类型的节点使用相同样式
合理分组：使用子图将相关步骤分组
明确方向：根据流程复杂度选择合适的方向