Mermaid常用语法记录

Mermaid是一种基于js的绘图工具，可以通过特定的代码编写流程图，再通过解析器渲染出来，生成的是html代码，而不是图片。我用的支持解析Mermaid的编辑器是typora，它添加了对Mermaid的解析支持。

如果想要把typora编写的流程图直接复制到typecho中显示出来，除了把typecho的解析器改成vditor.js，也可以参考之前一篇文章。

图表种类

Mermaid支持生成以下几种图表：

• 流程图（Flow Chart）
• 饼图(Pie Chart)
• 时序图（Sequence Diagram）
• 状态图(State Diagram)
• 甘特图（Gantt Diagram）
• 类图(class Diagram)

语法基本结构

Mermaid在markdown中以代码块标签包裹，并写明所用语法mermaid，所要写的代码放在代码块中。

基本框架示例

```mermaid
你要写的代码

```

流程图

基本语法：

```mermaid
graph LR
%% 这是一行注释，以“%%”开头，流程图中不显示，仅用来说明问题。
%% "-->"这个符号代表“指向”，看形状通俗易懂。
    文本1 --> 文本2
    文本1 --> 文本3 --> 文本6
    文本3 --> 文本5
    文本1 --> 文本4
    文本4 --> 文本7
    文本4 --> 文本5
```

• 上面的graph为流程图关键字，不同的图表有不同的关键字，LR表示left to right,从左往右排列流程图。同理可得：
• RL：从右往左
• TB：从上往下（也可用TD）
• BT：从下往上

效果示例：

文本ID

可以发现，只要文本相同的框就会被判定为同一个，如上面流程图中"文本3"和“文本4”都指向同一个“文本5”。那有时我们需要在不同的子项中指向内容相同的框，但是不是同一个，比如让文本4指向另外一个单独的文本5，就需要引入ID,相当于给这个框命一个名字。

语法示例：

```mermaid
graph LR
    文本1 --> 文本2
    文本1 --> 文本3 --> 文本6
    文本3 --> 文本5
    文本1 --> 文本4
    文本4 --> 文本7
    文本4 --> A(文本5)
%% 像上面的"A"就是给“文本5”的ID，自身用括号包裹起来，以示和上面的“文本5”相区别
```

效果示例：

自定义文本框形状

文本框形状由上述的自定义ID后的符号表示,如果没有自定义则默认为矩形,在上一个流程图中最后一个“文本5”文本框为圆角矩形，是因为用括号( )包裹“文本5”，可自定义形状的符号如下

• id + [文字] 矩形
• id + (文字) 圆角矩形
• id + >文字] 不对称矩形
• id + {文字} 菱形
• id + ((文字)) 圆形

示例代码及效果：

```mermaid
graph LR
%%包裹文本的符号不同，显示的文本框也不同
    A>文本1] --> B[文本2]
    C(文本1) --> D((文本2))
    E((文本1)) --> F{文本2}
```

自定义连接线

文本框之间的连接线也可以自定义，语法如下：

• 实线+箭头，这是最普通的一种，也是上面例子所用到的，注意中间连接线的变化。

```mermaid
graph LR
    A --> B
```

效果：

• 实线+无箭头，中间的>改成-

```mermaid
graph LR
    A --- B
```

效果：

• 虚线+箭头

```mermaid
graph LR
    A -.-> B
```

效果：

• 虚线+无箭头

```mermaid
graph LR
    A -.- B
```

效果：

• 加粗线+箭头

```mermaid
graph LR
    A ==> B
```

效果：

• 加粗线+无箭头

```mermaid
graph LR
    A === B
```

效果：

• 实线+箭头+描述

```mermaid
graph LR
    A --我是描述--> B
```

效果：

• 实线+无箭头+描述

```mermaid
graph LR
    A --我是描述--- B
```

效果：

• 虚线+箭头+描述

```mermaid
graph LR
    A -.我是描述.-> B
```

效果：

• 虚线+无箭头+描述

```mermaid
graph LR
    A -.我是描述.- B
```

效果：

• 加粗线+箭头+描述

```mermaid
graph LR
    A ==我是描述==> B
```

效果：

待完善