Mermaid系列之FlowChart流程图

鱼馅饼2023-08-07 9:10

一.欢迎来到我的酒馆

介绍mermaid下，Flowchat流程图语法。

2.1 mermaid可以让你使用代码来创建图表和可视化效果。mermaid是一款基于javascript语言的图表工具。

mermaid代码：

c 复制代码

	```mermaid

	flowchart LR 
	A[长方形] -- 链接 --> B((圆)) 
	A --> C(圆角矩形)
	B --> D{菱形}
	C --> D
	```

链接长方形圆圆角矩形菱形

2.2提示：flowchart还可以写成graph，例如：

c 复制代码

	```mermaid
	graph LR 
	```

LR表示flowchart的对齐方式为从左到右，L表示left，R表示right。

TB表示flowchart的对齐方式为从上到下，T表示top，B表示bottom。

BT表示flowchart的对齐方式为从下到上，B表是bottom，T表示top。

2.3 flowchart也可以像编程语言一样，先声明一个组件，然后在使用。

例如：

c 复制代码

	```mermaid
	flowchart LR 
	
	%% []表示一个矩形，字母A表示这个矩形的变量名%%
	A[长方形] 
	B((圆))
	C(圆角矩形)
	D{菱形}
	
	%%-->表示通过id名称连接两个组件%%
	A-- 链接 --> B
	A --> C
	```

链接长方形圆圆角矩形

2.4 mermaid注释

如上文看到的，mermaid使用%%%%作为注释。

3.1vscode中需要安装一个mermaid插件：Markdown Preview Mermaid Support。

在设置里找到extions，

然后搜索mermaid，选择第一个进行安装即可。

3.2 新建一个Markdown文件，将文件的后缀名写为.md，即Markdown文件。

4.1Flowchart由节点（几何图形）和箭头或线段组成。mermaid代码定义了几何图形和箭头线段的排列方式，并适应不同的箭头类型、多向箭头以及子图之间的任何连接。

提示：在Flowchart流程图中，使用单词 "end" 会破会流程图的结构。你可以将"end"单词大写来解决这个问题。

4.2

c 复制代码

	```mermaid
	
	---
	title: Node with text
	---
	%%---title表示流程图的标题 %%
	
	flowchart LR
	    id1[id1]
	```

id1[id1] 声明一个矩形，并给这个矩形命名为id1，矩形里面填充的内容也是id1