Mermaid系列之FlowChart流程图

一.欢迎来到我的酒馆

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

二.什么是mermiad工具

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

mermaid代码：

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

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

	```mermaidgraph LR ```

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

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

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

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

三.在vs code中使用mermaid

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

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

四.基本语法

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

	```mermaid---title: Node with text---%%---title表示流程图的标题 %%flowchart LRid1[这是一个长方形组件]```

[] 用于声明一个矩形组件，并给这个矩形组件命名为id1