流程图(flowchart)语法学习

 

创建流程图需要选择语言: mermaid
流程中的代码包裹
graph 这里写顺序
end
流程图方向:
从上到下(TB),从下到上(BT)，从左到右（LR），从右到左（RL）

TB - 从上到下
TD - 自上而下/与自上同
BT - 从下到上
RL - 从右到左
LR - 从左到右

2.节点形状
体育场形状的节点 Aid1([描述])
矩形节点 A[描述]
圆角矩形节点 B(描述)
子例程形状中的节点 B[[描述]]
圆形节点 C((描述))
圆柱形节点 C [(描述)]
右向旗帜状节点/非对称节点(asymetric shape) D>描述]
菱形节点（rhombus）E{描述}
六边形节点 E{{描述}}
平行四边形 E[/描述/]
梯形1 F[/描述\]
梯形2 F[\描述/]

节点间的连线
带有箭头的链接 A-->B
不带箭头 A --- B
链接上的文本 A-- This is the text! ---B 或 A---|This is the text|B
带有箭头和文本的链接 A-->|text|B 或 A-- text -->B
虚线链接：A-.->B;
带文本的虚线 A-. text .-> B
粗链接 A ==> B
带文本的粗链接 A == text ==> B
链接链接:多个相连
A -- text --> B -- text2 --> C
也可以这样： a --> b & c--> d
依赖关系ab 依赖cd： A & B--> C & D
拆解就这样
A --> C
A --> D
B --> C
B --> D

新的箭头类型
A --o B
B --x C
多向箭头
A o--o B
B <--> C
C x--x D

例子：

graph TB
id1(圆角矩形)--普通线-->id2[矩形]
subgraph 子图表名称
id2==粗线==>id3{菱形}
id3-.虚线.->id4>右向旗帜]
id3--无箭头---id5((圆形))
end

后面百度了一圈发现还有标准流程图，这里边可以写if分支，循环啥的，我tm，上面是干啥用的？？

 

流程图(flowchart)语法
流程图的语法大致分为两部分。
- 定义元素
tag=>type: content:url
tag：标签，用于连接元素时使用
type：该标签的类型。共有6种类型如下：
start 开始
end 结束
operation 处理框
subroutine 子流程
condition 判断框
inputoutput 输入输出框

content：流程语句中放置的内容 和type 空格隔开
url：链接，与流程语句绑定

连接元素
c2(yes)->io->e
c2(no)->op2->e

 

 

 st=>start: 开始
 e=>end: 结束
 cond=>condition: 确定吗
 op1=>operation: 分支1
 op2=>operation: 分支2

 st->cond
 cond(yes)->op1->e
 cond(no)->op2->e