版权声明：转载需注明出处 https://blog.csdn.net/suoxd123/article/details/84992282
目录
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;
```
语法结构
```mermaid
graph 方向
节点以及节点连线（定义和连线步骤可以分开）
（样式调整）
```
显示方向
- TB/TD（ top bottom/top down）表示从上到下
- BT（bottom top）表示从下到上
- RL（right left）表示从右到左
- LR（left right）表示从左到右
节点类型
节点本身的展现形式，是通过不同括号来代表各自不同的形状，默认为矩形。
- 默认节点： A
- 矩形节点： B[矩形]
- 圆角矩形节点： C(圆角矩形)
- 圆形节点： D((圆形))
- 非对称节点： E>非对称]
- 菱形节点： F{菱形}
语法详解
节点连线
线条本身的形式有多种，通过常规的英文格式的格式来标识，具体如下：
- 箭头连接 A1- ->B1
- 开放连接 A2- - -B2
- 虚线箭头连接 A3.->B3 或者 A3-.->B3
- 虚线连接 A4.-B4 或者 A4-.-B4
- 粗线箭头连接 A5==>B5
- 粗线开放连接 A6===B6
- 标签虚线箭头连接 A7-.text.->B7
- 标签开放连接 A8- -text- - -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"})
```
语法结构
```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 李,王: 李四想了很长时间, 文字太长了<br/>不适合放在一行.
deactivate 王
loop 李四再想想
李-->>王: 我还要想想
王-->>李: 想想吧
end
李-->>张: 打量着王五...
张->>王: 很好... 王五, 你怎么样?
```
语法结构
```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
```
参考自：
https://mermaidjs.github.io/
http://flowchart.js.org/
欢迎关注我公众号，为你增加看世界的维度。
