如何在Markdown中用Mermaid画流程图

只挑了自己感兴趣的功能写下来, 其他更多的需求可以参考这里.

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

以下两句没有试成功

graph LR;
   a --> b & c--> d;
  graph TB;
    A & B--> C & D;

1. 整体布局

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

   • TB - top bottom
   • BT - bottom top
   • RL - right left
   • LR - left right
   • TD - same as TB

2. 之后的A,B,C等都是节点的标识（标识中不能使用空格）

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

graph TD;
	A;
	B(B);
	C((C));
	D>D];
	E{E};

A

B

C

D

E

4. 连线

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];

描述

A

B

A1

B1

A2

B2

A3

B3

A4

B4

A5

B5

5. Subgraph

graph TB;
         subgraph one
         a1-->a2
         end;
         
         subgraph two
         b1-->b2
         end;
         
         subgraph three
         c1-->c2
         end;
         
         c1-->a2;

three

two

one

c1

c2

b1

b2

a1

a2

6. 定制一个节点

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;

Start

Stop

7. 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;

A:::someclass

B

8. 节点内换行问题:(Typora同样的code反而不显示)

graph TB;
A[长方形] --> |描述| B((圆));
A --> C(圆角长方形圆角长方形
圆角长方形圆角长方形
圆角长方形圆角长方形)
B --> D{菱形};
C --> D;

描述

长方形

圆

圆角长方形圆角长方形
圆角长方形圆角长方形
圆角长方形圆角长方形

菱形

Reference:

https://blog.csdn.net/lz710117239/article/details/79133396

https://www.jianshu.com/p/b421cc723da5

https://mermaid-js.github.io/mermaid/#/flowchart

https://blog.csdn.net/weixin_40422121/article/details/102365784

https://github.com/mermaid-js/mermaid/issues/384