流程图

Mermaid 流程图（graph/flowchart）用节点和连线描述流程走向，是文档里最常用的图表类型。节点形状表达语义（矩形=过程、菱形=判断、圆角=起止），连线表达流转方向，配合子图、样式可以画出接近专业绘图工具的效果。本文是 Mermaid 的流程图分册。

提示

先定方向再画节点：步骤多、逻辑线性用 TB（从上到下），宽度大于高度用 LR（从左到右）。语法速记：id[文字] 定义节点，--> 连接。

方向

graph 关键字后指定方向：

用词	含义
TB	从上到下
TD	和 TB 一样
BT	从下到上
RL	从右到左
LR	从左到右

T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN

节点形状

写法	形状	含义
id[文字]	矩形	过程，流程中的一个环节
id(文字)	圆角矩形	开始和结束
id((文字))	圆形	连接点，避免流程过长或交叉
id{文字}	菱形	判断、决策
id>文字]	右向旗帜	特殊标注

graph TB
  A
  B(圆角矩形节点)
  C[矩形节点]
  D((圆形节点))
  E{菱形节点}

连线

写法	效果
A-->B	单向箭头
A---B	无箭头实线
A--text-->B	带文字箭头
A-.->B	虚线箭头
A==>B	粗线箭头
A o--o B / A x--x B	特殊端点连线（flowchart 语法）

子图

用 subgraph 把相关节点分组，常用于划分模块或泳道：

graph TB
    subgraph app
    begin(开始)--> order[下单]
    end
    order --> stock{判断库存}
    stock -->|有|1[下单成功]--> over(结束)
    stock --没有-->2[下单失败]--> over

样式

单个节点用 style，批量用 classDef + class：

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f9f,stroke:#333,stroke-width:4px;

补充功能

• 点击跳转：click A "https://www.baidu.com" _blank
• 注释：%% 开头的行会被忽略
• 多行文本：节点内用 <br/> 换行

多行节点的英文截断

含 <br/> 换行的节点若以英文字母结尾，末字符可能被节点边界裁剪——在结束引号前补一个全角空格（　）补偿宽度。单行短文本不受影响。

跳出流程图本身看：流程是"过程与判断"，序列图 是"对象间交互"，类图 是"静态结构"——三类图覆盖了文档最常见的图表需求，选型见 Mermaid。