流程图，顾名思义，就是表示一个事件或活动的流程的图示。流程图，顾名思义，就是表示一个事件或活动的流程的图示。
快速入门
最简单的例子：从 A 到 B
graph TDA --> B
效果：
graph TDA --> B
注意起始的关键字“grpah”是必须的，表明这是流程图。
后续介绍时序图时，该关键字也要改为时序图的关键字：sequenceDiagram。
方向
接下来我们讲讲基本的概念。流程图中，可以有方向：
- TB、TD：从上到下
- BT：从下到上
- RL：从右到左
- LR：从左到右
从下到上：
graph BTA --> B
效果：
graph BTA --> B
从右到左：
graph RLA --> B
效果：
graph RLA --> B
从左到右：
graph LRA --> B
效果：
graph LRA --> B
最常用的布局方向是
- 从上向下
- 从左向右
当然也允许从下向上画、从右向左画，但是这两种很少见。
基本图形
节点除了矩形，还能换成其他形状，这里列出部分：
graph TDid[带文本的矩形]id4(带文本的圆角矩形)id3>带文本的不对称的矩形]id1{带文本的菱形}id2((带文本的圆形))
效果：
graph TDid[带文本的矩形]id4(带文本的圆角矩形)id3>带文本的不对称的矩形]id1{带文本的菱形}id2((带文本的圆形))
注意，每个形状都是有各自含义的：
- 圆角矩形：表示开始和结束
- 矩形：表示过程，也就是整个流程中的一个环节
- 菱形：表示判断、决策
- 圆形：表示连接。为避免流程过长或有线段交叉，可将流程切开，圆形即相当于切口处的连接头（成对出现）
graph LRbegin(开始) --> open[把冰箱门打开] --> put[把大象放进去] --> point((连接 A ))pointB((连接 A )) --> close[把冰箱门关上] --> close2(结束)
连接线
节点之间的连线，有如下类型：
A --> B：A 带箭头指向 BA --- B：A 不带箭头指向 BA -.- B：A 用虚线指向 BA -.-> B：A 用带箭头的虚线指向 BA ==> B：A 用加粗的箭头指向 BA -- 描述 --- B： A 不带箭头指向 B 并在中间加上文字描述A -- 描述 --> B： A 带箭头指向 B 并在中间加上文字描述A -. 描述 .-> B： A 用带箭头的虚线指向 B 并在中间加上文字描述A == 描述 ==> B： A 用加粗的箭头指向 B 并在中间加上文字描述
注意，不同形状的线其实也有各自的含义。如果想要专业一点，可以专门去查查相关文档，什么情况用什么线。
示例：
graph LRA[A] --> B[B] A1[A] --- B1[B] A4[A] -.- B4[B] A5[A] -.-> B5[B] A7[A] ==> B7[B] A2[A] -- 描述 --- B2[B] A3[A] -- 描述 --> B3[B] A6[A] -. 描述 .-> B6[B] A8[A] == 描述 ==> B8[B]
效果：
graph LRA[A] --> B[B] A1[A] --- B1[B] A4[A] -.- B4[B] A5[A] -.-> B5[B] A7[A] ==> B7[B] A2[A] -- 描述 --- B2[B] A3[A] -- 描述 --> B3[B] A6[A] -. 描述 .-> B6[B] A8[A] == 描述 ==> B8[B]
子流程图
语法：
subgraph titlegraph definition
end
示例：
graph TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2end
效果：
graph TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2end
自定义样式
我们还可以定义边框的样式、颜色。
语法：
style id 具体样式
示例：
graph LRid1(Start)-->id2(Stop)style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
效果：
graph LRid1(Start)-->id2(Stop)style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
实际案例
说了这么多，来做个有实际价值的案例：绘制一个流程图，找出 A、 B、 C 三个数中最大的一个数。
graph LRstart[开始] --> input[输入A,B,C]input --> conditionA{A是否大于B}conditionA -- YES --> conditionC{A是否大于C}conditionA -- NO --> conditionB{B是否大于C}conditionC -- YES --> printA[输出A]conditionC -- NO --> printC[输出C]conditionB -- YES --> printB[输出B]conditionB -- NO --> printC[输出C]printA --> stop[结束]printC --> stopprintB --> stop
效果：
graph LRstart[开始] --> input[输入A,B,C]input --> conditionA{A是否大于B}conditionA -- YES --> conditionC{A是否大于C}conditionA -- NO --> conditionB{B是否大于C}conditionC -- YES --> printA[输出A]conditionC -- NO --> printC[输出C]conditionB -- YES --> printB[输出B]conditionB -- NO --> printC[输出C]printA --> stop[结束]printC --> stopprintB --> stop
参考
如何在 Markdown 中画流程图 - 简书
Markdown 进阶技能：用代码画流程图（编程零基础也适用）
