mermaid flowchart使用指南

摘要

mermaid flowchart绘制流程图简单方便实用，故将语法总结记录于此。flowchart由节点(node) 和 边(link) 构成，因此掌握如何定义node，以及如何将node用link连接起来就能轻松的绘制流程图。

节点(node)

定义一个节点

flowchart LR
	A[text]

text

改变节点的形状

flowchart LR
	A[矩形]
	B(圆角矩形)
	C{菱形}
	D((圆形))
	E[[子进程]]
	F{{六边形}}
	G([体育场跑道形状])
	H[(圆柱形)]
	I[/平行四边形/]
	J[\平行四边形\]
	K[/梯形\]
	L[\梯形/]
	M>不对成形]

矩形

圆角矩形

菱形

圆形

子进程

六边形

体育场跑道形状

圆柱形

平行四边形

平行四边形

梯形

梯形

不对成形

边(link)

用一条边将两个节点连起来

flowchart LR
	A[教室]-->B[餐厅]

教室

餐厅

没箭头的边

flowchart LR
	A[没有箭头的边]---B[没有箭头的边]

没有箭头的边

没有箭头的边

虚线边

flowchart LR
	A[虚线]-.-B[虚线]

虚线

虚线

加粗的边

flowchart LR
	A[加粗的边]===B[加粗的边]

加粗的边

加粗的边

加长的边

flowchart LR
	A[加长的边]----B[加长的边]
	A[加的更长的边]-----B[加的更长的边]

加长的边

加长的边

加的更长的边

加的更长的边

改变箭头

flowchart LR
	A[注意箭头]--oB[注意箭头]
	C[注意箭头]--xD[注意箭头]
	E[双向箭头]<-->xF[双向箭头]

注意箭头

注意箭头

注意箭头

注意箭头

双向箭头

双向箭头

带文字的边

flowchart TD
    A-->|text|B
    C--text-->D  %%注意text的位置
    E-.->|text|F
    G-.text.->H %%注意text的位置
    I==text==>J
    k==>|text|l

text

text

text

text

text

text

A

B

C

D

E

F

G

H

I

J

k

l

布局

• 方向

  • LR: left to right
  • RL: right to left
  • TB/TD: top to bottom / top to down
  • BT: bottom to top

  flowchart TB
  	A-->B
  

  A

  B

2. 子图(subgraph)

   flowchart LR
   	subgraph P1 [part one]
   		direction LR
   		A---B
   	end
   	subgraph P2 [part two]
   		direction TB
   		C--->D
   	end
   	P1-->P2
   

   part two

   D

   C

   part one

   B

   A

注释

以%%开头，到行尾为注释

flowchart LR
%% A-->B
	C-->B

C

B

自定义样式

link样式

由于边没有ID，故通过编号指定边
lineStyle 0 stroke:#333,stroke-width:3px;
0 指第1条边

flowchart LR
	A-->|text|B
	C-->|text|D
	linkStyle 0 stroke:#0ff, stroke-width:3px, stroke-dasharray:1 4,color:darkblue;
	linkStyle 1 stroke:#f00, stroke-width:1px;

text

text

A

B

C

D

node样式

通过id指定节点
style id stroke:#333, stroke-width:3px, fill:#ff0, stroke-dasharray:1 4;

flowchart LR
	A-->B
	style A stroke:#033, stroke-width:3px;
	style B stroke:#ff0, stroke-width:1px;

A

B

批量样式修改

通过定义样式类，批量修改节点样式
classDef mystyle fill:#333, stroke:#000, stroke-width:3px;
批量修改
class node1,node2,node3 mystyle
或者
A:::mystyle

flowchart LR
	A-->B
	C:::mystyle-->D
	class A,B mystyle;
	classDef mystyle fill:#3f3, stroke:#ff0, stroke-width:3px;

A

B

C

D

默认样式修改

使用关键词default
classDef default fill:#333, stroke:#000, #stroke-width:3px;

flowchart LR
	A-->B
	classDef default fill:#3f3, stroke:#ff0, stroke-width:3px;

A

B

总结

下图用vscode插件markmap绘制