mermaid中的流程图
1. 图形
图形布局分四个方向，上下、下上、左右、右左，分别是TB(TD)/BT(DT)/RL/LR，字母必须为大写，具体代码如下：
```mermaid
graph TD;
开始 --> 结束;
2. 节点和形状
-
带文字节点：为节点设置一个id，id后括号中写该节点内容
graph TD;
id1[这是一个节点]
-
圆边节点：()
graph TD;
id2(圆边节点)
-
圆形节点：(())
graph TD;
id3((圆形节点))
-
非对称形状节点
graph TD;
id4>非对称节点]
*：目前只有这种非对称形状，反过来无效
-
菱形节点
graph TD;
id5{菱形节点}
3. 节点之间的连接
-
实线箭头连接
graph LR;
A --> B
-
开放连接（没有箭头）
graph LR;
A — B
-
连接上加文字
graph LR;
A – TEXT — B
或
A —| TEXT | B
*：第一种形式必须前边两个减号后边三个，第二种形式必须前边三个减号，即必须严格按照说明文档，否则无法解析，后面内容不再赘述
-
带箭头和文字的连接
graph LR;
A -->| TEXT | B
或
A – TEXT --> B
-
虚线连接
graph LR;
A -.-> B
-
带文字的虚线连接
graph LR;
A -. TEXT .-> B
-
粗箭头连接
graph LR;
A ==> B
-
带文本的粗连接
graph LR;
A == TEXT ==> B
4. 破坏语法的特殊字符
-
将文本放在引号内一遍渲染复杂字符
graph LR;
id1["(TEXT)"]
此处不加引号会出错
-
实体代码转义字符1
graph LR;
A[“TEXT WITH QUOTE#quot;”] -->B
5.子图1
-
模式
subgraph title
graph definition
end
示例：
graph TB;
c1 --> a2;
subgraph one;
a1 --> a2;
end;
subgraph two;
b1 --> b2;
end;
subgraph three;
c1 --> c2;
end;
graph TB; c1 --> a2; subgraph one; a1 --> a2; end; subgraph two; b1 --> b2; end; subgraph three; c1 --> c2; end;*：换行和缩进以及分号都不是必须的
6. 相互作用
主要学习mermaid在markdown中的运用，此部分在markdown中无效
7. 样式和类
-
连接样式
graph LR;
A1 --> B1;
A2 --> B2;
linkStyle 1 stroke:#ff3,stroke-width:4px;*：因为连接线没有id，所以要设置其样式要指定是第几条连接线，索引从0开始
-
对节点设置样式
grpah LR;
id1(Start)–>id2(Stop);
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5; -
可以定义样式类，再设置到对应节点上1
定义类：
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
附加到节点：
class nodeId1 className;
或
class nodeId1,nodeId2 className;
graph LR;
id1(Start) --> id2(Stop)
classDef c1 fill:#f9f,stroke:#333,stroke-width:4px;
class id1,id2 c1; -
CSS类
markdown不支持
-
默认类
如果一个类被命名为default，则会被分配给所有没有特定类定义的类（暂不清楚含义）
8. 对fontawesome的基本支持1
graph TD
B[“fa:fa-twitter for peace”]
B–>C[fa:fa-ban forbidden]
B–>D(fa:fa-spinner);
B–>E(A fa:fa-camera-retro perhaps);
具体支持哪些图标需要对照fontawesome进行测试
9. 格式问题
- 语句结尾分号是可选的
- 节点和连接线之间允许单个空格，但是节点及其文本和连接及其文本之间不应该有空格