Markdown中用Mermaid画流程图

正在学SAS, 所以想养成每条语句后面加 ;的习惯, mermaid语句里其实可以不用;结尾

以下两句没有试成功

graph LR;
a –> b & c–> d;
graph TB;
A & B–> C & D;
1
2
3
4
整体布局

第一行的graph LR中graph指定是一个图，第二个LR指定图的方向，所有的方向关键词为:

TB – top bottom
BT – bottom top
RL – right left
LR – left right
TD – same as TB
之后的A,B,C等都是节点的标识（标识中不能使用空格）

节点默认只显示标识,但也可以通过如下方法控制其显示

graph TD;
A;
B(B);
C((C));
D>D];
E{E};
1
2
3
4
5
6
A
B
C
D
E
连线
graph LR;
A[A] –> B[B];
A1[A] — B1[B];
A4[A] -.- B4[B];
A5[A] -.-> B5[B];
A7[A] ==> B7[B];
A2[A] — 描述 — B2[B];
A3[A] — 描述 –> B3[B];
A6[A] -. 描述 .-> B6[B];
A8[A] == 描述 ==> B8[B];
1
2
3
4
5
6
7
8
9
10
描述
A
B
A1
B1
A2
B2
A3
B3
A4
B4
A5
B5
Subgraph
graph TB;
subgraph one
a1–>a2
end;

subgraph two
b1–>b2
end;

subgraph three
c1–>c2
end;

c1–>a2;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
three
two
one
c1
c2
b1
b2
a1
a2
定制一个节点
graph LR;
id1(Start)–>id2(Stop);
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#bbf,stroke:#f66,stroke-;
width:2px,color:#fff,stroke-dasharray: 5, 5;
1
2
3
4
5
Start
Stop
Classes 自定义一个样式

除了直接写code, 还有一个办法是定义一个class, 每次用的时候把它attach在某个节点上.

定义:
classDef className fill:#f9f,stroke:#333,stroke-width:4px;

一般的使用:
class nodeId1 className;

快捷使用方式:

nodeID1:::className –> nodeID2;

使用在多个节点上:(Typora可以显示效果…)
class nodeId1,nodeId2 className;

graph LR;
A:::someclass –> B;
classDef someclass fill:#f96;
1
2
3
A:::someclass
B
节点内换行问题:(Typora同样的code反而不显示)
graph TB;
A[长方形] –> |描述| B((圆));
A –> C(圆角长方形圆角长方形<br>圆角长方形圆角长方形<br>圆角长方形圆角长方形)
B –> D{菱形};
C –> D;