MarkDown中写流程图的方法

序

Mermaid FlowChat(中译为美人鱼，就好比一条美人鱼在流动构成了流程图),是一种在MarkDown中以特定格式的文字生成流程图或是图标的方法。
一种简单的降价式脚本语言，用于通过javascript从文本生成图表。
（官方文档点这里）

Mermaid FlowCharts的使用方法

在下面这段文字（代码块中）的前面和后面一行各自添加```（键盘左上，与~共用一个键）即可生成如下图的展示结果(注意在使用时需要增加mermaid标识，加载那三点后面)。其实在CSDN中写文章时，也可以通过上面工具栏中最右侧的问号图标拉到文章最末，将例子复制粘贴到自己的编辑文档中，再将例子稍作修改也能达到自己想要的结果，不过要特别注意的就是有些空格是必不可少的，而且标点一定要用英文模式输入，否则一些中文标点也会使你达不成目的。

1. 关于流程图流向

注：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

1. 关于图形框

如上两种展示效果，一般无特殊的表示符号就是在矩形框中添加文字。
如果想要其他形式的话（如圆角矩形框或圆形、菱形），就请看下面展示，使用方法与上面的相同。
注：由于定义的是一个结点，所以不管LR还是其他的都不影响。

mermaid
graph LR
    label(圆括号表示是圆角矩形框,外面的label就是一个自设变量)

mermaid
graph LR
    label((两层圆括号表示圆形框))-->
    Label((圆圈大小会随写入的字多少改变直径))

mermaid
graph LR
   	L{花括号表示菱形}

mermaid
graph LR
    L>书签型,左尖括号,右方括号]

3. 关于连接方式
   可以注意到，上面的展示方式中，结点与结点之间的连接方式用到了"–>“和”—“还有”-.->“分别表示其间有无箭头相连以及虚线连接。如果要用更粗的连接还能使用”==>"表示粗连接。
   其他还有在有箭头的连线上附加文字。如下：

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标注判断的走向。

在官网的文档（一开始有贴网址）上还有其他一些表现形式，但是这里讲到的我认为已经足够做一幅不错的流程图了（只要注意相应的格式就可以了）。