一.欢迎来到我的酒馆
介绍mermaid下,Flowchat流程图语法。
目录
- 一.欢迎来到我的酒馆
- 二.什么是mermiad工具
- 三.在vs code中使用mermaid
- 四.基本语法
二.什么是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 %% []表示一个矩形,字母A表示这个矩形的变量名%%A[长方形] B((圆))C(圆角矩形)D{菱形}%%-->表示通过id名称连接两个组件%%A-- 链接 --> BA --> 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 LRid1[id1]```
id1[id1] 声明一个矩形,并给这个矩形命名为id1,矩形里面填充的内容也是id1