markdown 中流程图详解

   markdown有不同的插件实现，对应的语法也不太一样，对于插件就是把引用的语法对应成相应的标签，本文以CSDN中写作为例进行分别对mermaid和flowchart进行实例说明和语法解释。

1. Mermaid 流程图

示例

	```mermaid
	graph TB
	A[Apple]-->B{Boy}
	A---C(Cat)
	B.->D((Dog))
	C==喵==>D
	style A fill:#2ff,fill-opacity:0.1,stroke:#faa,stroke-width:4px
	style D stroke:#000,stroke-width:8px;
	```

喵

Apple

Boy

Cat

Dog

语法结构

	```mermaid
	graph 方向
	节点以及节点连线（定义和连线步骤可以分开）
	（样式调整）
	```

显示方向

• TB/TD（ top bottom/top down）表示从上到下
• BT（bottom top）表示从下到上
• RL（right left）表示从右到左
• LR（left right）表示从左到右

节点类型

   节点本身的展现形式，是通过不同括号来代表各自不同的形状，默认为矩形。

• 默认节点： A
• 矩形节点： B[矩形]
• 圆角矩形节点： C(圆角矩形)
• 圆形节点： D((圆形))
• 非对称节点： E>非对称]
• 菱形节点： F{菱形}

A

矩形

圆角矩形

圆形

非对称

菱形

语法详解

节点连线

   线条本身的形式有多种，通过常规的英文格式的格式来标识，具体如下：

• 箭头连接 A1- ->B1
• 开放连接 A2- - -B2
• 虚线箭头连接 A3.->B3 或者 A3-.->B3
• 虚线连接 A4.-B4 或者 A4-.-B4
• 粗线箭头连接 A5==>B5
• 粗线开放连接 A6===B6
• 标签虚线箭头连接 A7-.text.->B7
• 标签开放连接 A8- -text- - -B8

text

text

A1

B1

A2

B2

A3

B3

A4

B4

A5

B5

A6

B6

A7

B7

A8

B8

节点样式

   样式写法跟矢量图（SVG）中CSS的写法一致，含有的属性有：

style 节点  样式

---

2. Flowchart流程图

示例

	```mermaid
	flowchat
	st=>start: 开始
	e=>end: 结束
	op1=>operation: 操作1 | past
	op2=>operation: 操作2 | current
	op3=>operation: 操作3 | future
	pa=>parallel: 多输出操作4 | approved
	cond=>condition: 确认？ | rejected
	
	st->op1->cond
	cond(true)->e	
	cond(no)->op2(right)->op3->pa(path1,right)->op1
	pa(path2,left) ->e
	st@>op1({"stroke":"Blue"})@>cond({"stroke":"Green"})@>e({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})
	```

Created with Raphaël 2.2.0 开始 操作1 确认？ 结束 操作2 操作3 多输出操作4 yes no

语法结构

	```mermaid
	flowchat
	定义节点
	连接节点
	（样式调整）
	```

节点类型

  目前官网提供7种节点，其实还有很多别的节点类型，但可能插件脚本还没支持。

• 开始（椭圆形）：start
• 结束（椭圆形）：end
• 操作（矩形）：operation
• 多输出操作（矩形）：parallel
• 条件判断（菱形）：condition
• 输入输出（平行四边形）：inputoutput
• 预处理/子程序（圣旨形）：subroutine

语法详解

节点定义

变量名=>节点标识: 节点显示名

节点连线

变量名1->变量名2->...->变量名n

连线样式

  设置变量m和变量n之间连线的样式，具体样式由变量n后面key-value控制，需要两个变量之间有直接连线。语法中的连接符为（@>）。

变量名m@>变量名n({"key":"value"})

关键字

• yes/true：condition类型变量连接时，用于分别表示yes条件的流向
• no/false：同上，表示否定条件的流向
• left/right：表示连线出口在节点位置（默认下面是出口，如op3），可以跟condition变量一起用：cond(yes,right)
• path1/path2/path3：parallel变量的三个出口路径（默认下面是出口）

节点状态

  为节点设置不同的状态，可以通过不同的颜色显示，其中状态包括下面6个，含义如英文所示，不过CSDN中好像目前还不支持：

• past
• current
• future
• approved
• rejected
• invalid

---

3. 时序图

示例

	```mermaid
	    sequenceDiagram
	    participant 张 as 张三
	    participant 李 as 李四
	    participant 王 as  王五   
	    张 ->> +李: 你好！李四, 最近怎么样?
	    李-->> 王: 你最近怎么样，王五？
	    李--x -张: 我很好，谢谢!
	    activate 王
	    李-x 王: 我很好，谢谢!   
	    Note over 李,王: 李四想了很长时间, 文字太长了
不适合放在一行.
	    deactivate 王
	    loop 李四再想想
	    李-->>王: 我还要想想
	    王-->>李: 想想吧
	    end
	    李-->>张: 打量着王五...
	    张->>王: 很好... 王五, 你怎么样?
	```

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 我还要想想 想想吧 loop [ 李四再想想 ] 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

语法结构

	```mermaid
	    sequenceDiagram
	    participant 别名 as 对象显示名（全部直接用显示名时可以不写）
	    顺序增加图表中消息
	    （可以加入标签提示）
	```

语法详解

消息格式

【对象1】【箭头类型】【对象2】 : 消息内容

连接样式

一共6种箭头类型的样式：

• 实线：->
• 虚线：- ->
• 带箭头的实线：->>
• 带箭头的虚线：- ->>
• 带x的实线：-x
• 带x的虚线：- -x

激活方块

  这部分有两种写法，第一种是显示通过语法实现，语法如下，会在指定对象的消息中增加，示例中李四；第二种直接在对象前面增加加减号（开始时用加号“+”，结束时用减号“-”），则在加号对应的对象上开始，减号对应的时间结束，示例中王五。

开始：activate 【对象】
结束：deactivate 【对象】

注释

Note 【位置】 【对象】

注释显示的位置有三个，以被标记的对象中心为参考系，基于横跨多个时，可以都逗号分隔，如示例：

• right of
• left of
• over

循环（while）

见示例

loop 循环说明
【消息流】
end

条件（if/else）

alt 条件说明
【消息流】
else
【消息流】
end

opt 条件说明
【消息流】
end

示例内容太多了，为了防止太臃肿，把条件内容独立出来进行演示，当有else时，用alt，否则用opt。

	```mermaid
	    sequenceDiagram
	    participant 张 as 张三
	    participant 李 as 李四
	    张 ->> 李: 你好！李四, 最近怎么样?
	    alt 如果感冒了
	    李->> 张: 不太好，生病了。
	    else 挺好的
	    李->> 张: 我很好，谢谢。
	    end
	        opt 另外补充
	        李->> 张: 谢谢问候。
	    end
	```

张三 李四 你好！李四, 最近怎么样? 不太好，生病了。 我很好，谢谢。 alt [ 如果感冒了 ] [ 挺好的 ] 谢谢问候。 opt [ 另外补充 ] 张三 李四

参考自：
https://mermaidjs.github.io/
http://flowchart.js.org/