1.流程图定义与节点名称
定义代码:
flowchart LR
A[Start] --> B
注意:在使用的时候一定要将该部分的内容包含到代码块中
演示效果:
2.流程图的方向
所以一般是从左到右,从上到下
TOP BOTTOM LEFT RIGHT
分为4种
- TD /TB (TOP TO BOTTOM)
- BT
- LR
- RL
演示TB,代码如下:
flowchart TB
A --> B
效果如下:
其他方向的流程图类同
3.节点形状
默认的节点形状是长方形,也可以设置为其他形状
演示代码:
flowchart LR
A(圆角矩形) -.-B([椭圆形]) -.- C((圆形))
E[[subroutine]] -.- F>非对称形状] -.- G{菱形} -.- H{{六角形}}
I[/平行四边形/] -.- J[\平行四边形\] -.- K[\上梯形/] -.- L[/下梯形\]
演示效果:
4.节点连接线
连接线类型 | 表示符号 | 加长表示 |
---|---|---|
箭头 | –> | —> |
直线 | — | ---- |
虚线 | -.- | -…- |
加粗箭头 | ==> | ===> |
加粗直线 | === | === |
虚线箭头 | -.-> | -…-> |
注意: 节点连接线的标识符最起码是三个以上,1个解析不出来的,2个解析器认为是文字,3个
-
表示的是箭头直线,当-
的个数越多,连接线的长度就会越长!
当要在箭头上写文字的时候,可以先要连接线类型写好,两个标识符,再写你想要的文字,再将连接线的类型写完整,如同--你好哇-->
,-.王摇摆.->
演示代码:
flowchart LR
A1 --箭头和文本--> B1 -->|箭头和文本| C1 --> D1
A2 ==加粗直线箭头==> B2 ==> C2
A3 --无箭头直线--- B3 ---|无箭头直线| C3 ==无箭头的粗直线=== D3
A4 -.虚线.-B4 -.- C4 --> D4
演示效果:
5.多节点连接
5.1 一对多
演示代码:(常规版本)
flowchart LR
A --> B
A --> C
B --> D
C --> D
演示代码:(简化版本)
flowchart LR
A --> B & C --> D
演示效果:
5.2 多对多
演示代码:(简化版本)
flowchart TD
A & B ==> C & D
演示效果:
基于以上知识基本上流程图就完全可以用代码来实现了
一个简单的实例:
代码:
flowchart TD
A[开始] --> B[是真的吗?]
B --假的--> E[结束]
B --是--> C
C --> D[再考虑一下]
D --> B
6.其他类型的箭头
类型 | 表示方法 |
---|---|
箭头 | –> |
黑圆 | –o |
黑× | –x |
演示代码:
flowchart LR
A --> B
B --x C
C --o D
演示效果:
注意,箭头是可以双向的,不过要注意,箭头还是3个标识符起步,少了是不行的
效果如下:
7.特殊字符
7.1 如何表示三种括号?
因为在mermaid中大小中三种括号用于表示流程图的形状了
要单独使用他们的话,要进行转义使用
使用方法:正常编写,然后使用双引号""
括起来即可
演示代码:
flowchart LR
A["[Test]"] --> B
演示效果:
7.2 如何表示引号?
使用HTML中的引号标识符即可#quot;
演示代码:
flowchart LR
A["来个引号#quot;"] --> B
演示效果:
flowchart LR
A["来个引号#quot;"] --> B
7.3 表示美元符号
演示代码:
flowchart LR
A["美元符号#36;"] --> B
演示效果:
ENDING
演示代码:
flowchart LR
A["#128512;"]
演示效果:
在学会了Markdown之后再使用mermaid,简直是起飞,把画图的过程可以当做写代码一样,很舒服,这种感觉很好,继续学习吧。
2022年07月07日10:25:02