Mermaid系列之FlowChart流程图

一.欢迎来到我的酒馆

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

二.什么是mermiad工具

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

mermaid代码：

	```mermaid

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

链接

长方形

圆

圆角矩形

菱形

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

	```mermaid
	graph LR 
	```

LR表示flowchart的对齐方式为从左到右，L表示left，R表示right。
TB表示flowchart的对齐方式为从上到下，T表示top，B表示bottom。
BT表示flowchart的对齐方式为从下到上，B表是bottom，T表示top。

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

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

链接

长方形

圆

圆角矩形

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

三.在vs code中使用mermaid

3.1vscode中需要安装一个mermaid插件：Markdown Preview Mermaid Support。
在设置里找到extions，
然后搜索mermaid，选择第一个进行安装即可。

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

四.基本语法

4.1Flowchart由节点（几何图形）和箭头或线段组成。mermaid代码定义了几何图形和箭头线段的排列方式，并适应不同的箭头类型、多向箭头以及子图之间的任何连接。
提示：在Flowchart流程图中，使用单词 “end” 会破会流程图的结构。你可以将"end"单词大写来解决这个问题。
4.2

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

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