Mermaid 流程图语法：节点、连线与分支怎么写

Mermaid 流程图的结构只有三件事：声明方向、定义节点、连起来。语法看起来像伪代码，但它是纯文本——这意味着流程图可以进 git、可以 code review、可以跟着代码一起演进。

最小可用示例

graph TD
      A[开始] --> B{是否登录}
      B -->|是| C[进入首页]
      B -->|否| D[跳转登录页]
      D --> B

graph TD 声明方向（Top-Down）。A[开始] 定义一个矩形节点，B{是否登录} 是菱形（判断）。箭头后的 |是| 给连线加标签。

把这五行粘进左侧就能出图，不需要任何配置。

节点形状与语义

• A[文本]：矩形，普通步骤。
• A(文本)：圆角矩形，开始/结束。
• A{文本}：菱形，判断。
• A((文本))：圆形，连接点。
• A[(文本)]：圆柱，数据库。
• A>文本]：旗帜形，少见但可用于标注。

形状不是装饰：判断用菱形、数据存储用圆柱，读者不看文字也能猜到节点性质。全用矩形会让流程图失去可读性。

方向与布局

graph TD 从上到下，LR 从左到右，BT 从下到上，RL 从右到左。

方向选错会让图变成一条又长又窄的带子。流程步骤多、分支少时用 TD；横向链路（如数据管道、请求链路）用 LR。

布局由引擎自动排，不能手动拖节点位置。需要精确控制位置时，Mermaid 不是合适的工具——它擅长「结构清晰」，不擅长「视觉排版」。

子图与分组

graph LR
      subgraph 前端
        A[页面] --> B[请求层]
      end
      subgraph 后端
        C[网关] --> D[服务]
      end
      B --> C

subgraph 把节点分组并画出边框，适合表达「这几步属于同一个系统」。分组太多会显得杂乱，两三层足够。