Mermaid 语法详解

基本语法结构

1. 图声明

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>节点}

连接线语法

基本连接

代码：

flowchart LR
    A --> B
    C -- 带文本的连接 --> D
    E --- F
    G ==> H

连接线类型

代码：

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          # 双向叉箭头

多节点连接

代码：

flowchart LR
    A --> B & C --> D  # 一个节点连接多个
    E --> F
    E --> G            # 分别连接

子图（Subgraph）

基本子图

代码：

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

子图方向

代码：

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

条件分支和循环

条件判断

代码：

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

连接线样式

代码：

flowchart LR
    A -->|红色粗线| B
    C -.->|虚线| D
    
    linkStyle 0 stroke:#f00,stroke-width:4px
    linkStyle 1 stroke:#0f0,stroke-dasharray: 5 5

实际应用示例

LIN休眠唤醒流程图
下面是之前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 process

常见问题与技巧

1. 文本换行

使用
标签或 \n 进行换行：

A[第一行<br>第二行]
B[第一行\n第二行]

2. 特殊字符转义

使用HTML实体或引号包裹：

A["双引号: \"文本\""]
B[小于号: <]
C[大于号: >]

3. 注释

使用 %% 添加注释：

flowchart TD
    %% 这是一条注释
    A --> B

4. 节点ID命名规则

只能包含字母、数字、下划线、连字符

不能以数字开头

区分大小写

5. 最佳实践

保持简洁：流程图不要过于复杂

统一风格：相同类型的节点使用相同样式

合理分组：使用子图将相关步骤分组

明确方向：根据流程复杂度选择合适的方向