mermaid flowchart使用指南

YangVijay

已于 2022-03-20 12:19:36 修改

阅读量2.2k

点赞数 1

分类专栏： office 文章标签：流程图 mermaid flowchart

于 2022-03-18 19:09:05 首次发布

本文链接：https://blog.csdn.net/ywjatjd/article/details/123566338

版权

office 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

摘要

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

节点(node)

定义一个节点

flowchart LR
	A[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

布局

方向
- LR: left to right
- RL: right to left
- TB/TD: top to bottom / top to down
- BT: bottom to top
```
flowchart TB
	A-->B
```

子图(subgraph)
```
flowchart LR
	subgraph P1 [part one]
		direction LR
		A---B
	end
	subgraph P2 [part two]
		direction TB
		C--->D
	end
	P1-->P2
```

注释

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

flowchart LR
%% A-->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;

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;

批量样式修改

通过定义样式类，批量修改节点样式
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;

默认样式修改

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

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

总结

下图用vscode插件markmap绘制

flowchart