3，graph语法学习

来源：http://soft.xiaoshujiang.com/docs/grammar/feature/mermaid/#mermaid_5

本文在Vue主题下效果更好

概述

Generation of diagram and flowchart from text in a similar manner as markdown

通过 mermaid 可以实现以纯文本的方式绘制流程图，序列图，甘特图等。

小书匠编辑器在 markdown 强大的优势下，更是无缝集成了 mermaid 的所有功能，用户不需要任何配置，只要打开了语法开关，就可以使用所有 mermaid 图例功能。再加上小书匠的实时预览功能，可以马上查看到输入的 mermaid 代码生成的效果图。大大提高了用户绘图的速度。

使用

元数据标识: grammar_mermaid

想要使用该语法，需要在设置>扩展语法 里把mermaid选项打开。或者在每篇文章的元数据里通过 grammar_mermaid 进行控制。系统默认关闭mermaid语法功能

mermaid 提供了流程图，序列图，甘特图等多种图形效果

mermaid的语法为代码块语法的执行功能，语言为 mermaid

示例

​```mermaid!
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
如上内容效果如下：

```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```

# mermaid

## 流程图

因为 mermaid 支持不同图表，所以所有的流程图需要以 `graph` 开头

### 图表方向

在 `graph` 的后方添加流程图的显示方向

*   TB -从上到下
*   BT - 从下到上
*   RL - 从右到左
*   LR - 从左到右
*   TD - 跟 TB 一样，从上到下

​```mermaid!
graph LR
Start --> Stop

如上内容效果如下：

````mermaid
graph LR
    Start --> Stop

​```mermaid!
graph TB
    Start --> Stop
```
如上内容效果如下：

````mermaid
graph TB
    Start --> Stop
```

### 节点形状

#### 默认结点

​```mermaid!
graph TB
id

如上内容效果如下：

````mermaid
graph TB
    id

带文字说明的结点

​```mermaid
graph LR
    id1[This is the text in the box]
```
如上内容效果如下：

````mermaid
graph LR
    id1[This is the text in the box]
```

#### 带圆角文字说明的结点

​```mermaid!
graph LR
id1(This is the text in the box)

如上内容效果如下：

````mermaid
graph LR
    id1(This is the text in the box)

带文字说明的圆形结点

​```mermaid!
graph LR
    id1((This is the text in the circle))
```
如上内容效果如下：

````mermaid
graph LR
    id1((This is the text in the circle))
```

#### 带文字说明的飘带结点

​```mermaid!
graph LR
id1>This is the text in the box]

如上内容效果如下：

````mermaid
graph LR
    id1>This is the text in the box]

带文字说明的菱形结点

​```mermaid!
graph LR
    id1{This is the text in the box}
```
如上内容效果如下：

````mermaid
graph LR
    id1{This is the text in the box}
```

### 结点间的连线

结点间可以有不同形式的连接，比如实线，虚线，带箭头的线等

#### 带箭头的线

​```mermaid!
graph LR
A–>B

如上内容效果如下：

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

没有任何修饰的线

​```mermaid!
graph LR
    A --- B
```
如上内容效果如下：

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

#### 在线上有描述文字的线

​```mermaid!
graph LR
A-- This is the text —B

或者

​```mermaid!
graph LR
A—|This is the text|B

如上内容效果如下：

````mermaid
graph LR
    A-- This is the text ---B