序
Mermaid FlowChat(中译为美人鱼,就好比一条美人鱼在流动构成了流程图),是一种在MarkDown中以特定格式的文字生成流程图或是图标的方法。
一种简单的降价式脚本语言,用于通过javascript从文本生成图表。
(官方文档点这里)
Mermaid FlowCharts的使用方法
在下面这段文字(代码块中)的前面和后面一行各自添加```(键盘左上,与~共用一个键)即可生成如下图的展示结果(注意在使用时需要增加mermaid标识,加载那三点后面)。其实在CSDN中写文章时,也可以通过上面工具栏中最右侧的问号图标拉到文章最末,将例子复制粘贴到自己的编辑文档中,再将例子稍作修改也能达到自己想要的结果,不过要特别注意的就是有些空格是必不可少的,而且标点一定要用英文模式输入,否则一些中文标点也会使你达不成目的。
- 关于流程图流向
注:LR(Left-Right)表示横向左至右流程图,TD(Top-Down)表示纵向上至下流程图用TB(Top-Bottom)也一样。字母反过来就是相应箭头方向相反。
mermaid
graph LR
START -.-> END
mermaid
graph TD
A-->B
A-->C
B-->D
C-->D
- 关于图形框
如上两种展示效果,一般无特殊的表示符号就是在矩形框中添加文字。
如果想要其他形式的话(如圆角矩形框或圆形、菱形),就请看下面展示,使用方法与上面的相同。
注:由于定义的是一个结点,所以不管LR还是其他的都不影响。
mermaid
graph LR
label(圆括号表示是圆角矩形框,外面的label就是一个自设变量)
mermaid
graph LR
label((两层圆括号表示圆形框))-->
Label((圆圈大小会随写入的字多少改变直径))
mermaid
graph LR
L{花括号表示菱形}
mermaid
graph LR
L>书签型,左尖括号,右方括号]
- 关于连接方式
可以注意到,上面的展示方式中,结点与结点之间的连接方式用到了"–>“和”—“还有”-.->“分别表示其间有无箭头相连以及虚线连接。如果要用更粗的连接还能使用”==>"表示粗连接。
其他还有在有箭头的连线上附加文字。如下:
mermaid
graph LR
A-->| cause |B
或
mermaid
graph LR
A-- cause -->B
效果都一样。
无箭头连线上附加文字:
mermaid
graph LR
A-- 短线左二右三 ---B
或
mermaid
graph LR
A---|左三短线|B
效果也都一样。
虚线上附上文字:
mermaid
graph LR
A-. 左右要有两点 .-> B
粗连接上附加文字:
mermaid
graph LR
A ==>|contect| B
其他
由于上面展现的都是底色为灰色的结点块,且一般是少量结点的流程图。
以下这种白底的结点块可能会更加清晰简洁明了。
mermaid
flowchat
st=>start: start
e=>end: end
op=>operation: what you want
cond=>condition: Sure?
st->op->cond
cond(yes)->e
cond(no)->op
注:上半部分用"=>“及”:“可在相应结点框中写入文字说明,下半部分用”->"表示节点间的连接关系。另:start表示开始,end表示结束,都应用圆角框。而operation表示操作,用矩形框表示,condition表示判断,用菱形框表示。括号内的yes和no标注判断的走向。
在官网的文档(一开始有贴网址)上还有其他一些表现形式,但是这里讲到的我认为已经足够做一幅不错的流程图了(只要注意相应的格式就可以了)。