mermaid流程图工具_Hexo+Mermaid(一)：记住三、四、五，玩转Mermaid流程图

流程图，英文Flow Chart，是使用图形表示算法思路是一种方法。在Hexo中提供了插件，使得我们可以利用Mermaid这个库来实现流程图，它的显示结果非常漂亮优雅。

Mermaid提供的流程图是一个简化版的，它主要由节点和连线组成，再以文字辅助，总共三种要素。

这里的三、四、五，其中三表示三种基本线型，四表示流程图四个方向，五表示五种节点形状。

0. Hexo+Mermaid专题目录

1. 三种基本线型及扩展

1.1 三种基本线型

节点之间通过连线来连接，一共有3种线的形状，虚线：-.-、实线：–--、粗实线:===。

代码(注意代码块类型为mermaid):

1

2

3

4

5(代码块类型mermaid)

graph TB

A1-.-B1

A2---B2

A3===B3

效果如下：

1.2 给基本线型加上箭头

在基本线型符号串的右边加上>符号，去掉左边第1个符号，使其保持仍然是3个符号，就获得了带箭头的线型。虚线有点特殊，它的第一个符号可以不去掉。

代码如下(注意代码块类型为mermaid):

1

2

3

4

5(代码块类型mermaid)

graph TB

A1.->B1

A2-->B2

A3==>B3

效果如下：

1.3 在线段中间加上说明文字

上面6种连线，中间都可以加上说明文字。带文字连线的符号串是这样来的：

在符号串的左边加上说明文字。

再在说明文字的左边加上基本线型的符号串(只取前两个符号)。

举个例子

虚线带箭头:.->

左边加上说明文字:说明.->

再在左边加上基本线型的前两个符号:-.说明.->

代码如下(注意代码块类型为mermaid):

1

2

3

4

5

6

7

8(代码块类型mermaid)

graph TB

A1-.虚线文字-.-B1

A2-.虚线文字.->B2

A3--实线文字---B3

A4--实线文字-->B4

A5==粗线文字===B5

A6==粗线文字==>B6

效果如下：

1.4 总结

由3种基本线型，加上箭头变为6种，6种线型加上文字变为12种。

2. 四种图形走向

所有节点之间的连线，带箭头的表示其具有方向性，一块Mermaid代码块内，所有节点连线方形是一致的。那么总共有如下四种，用相应的两个字符表示。

TB: 从上到下(也可以用TD)

BT: 从下到上

LR: 从左到右

RL: 从右到左

其中T表示top，B表示bottom，L表示left，R表示right。这里又有个特殊的，TB也可用TD表示。

下面的图分别表示上面四种图形方形

3. 五种节点外观

Mermaid只提供了5种节点的外观。一般就可以满足要求。

语法

形状

示例

[]

矩形

图1

()

矩形带小圆角

图2

(())

大圆

图3

{}

棱形

图4

>]

三角形矩形组合

图5

为什么菱形不是>？因为这个符号要拿来表示箭头，分身乏术，只能用{}来表示。

效果如下：

4. 一种子图形

Mermaid还提供了子图形，可以被嵌入图形中。子图形以subgraph开始，以end结束。子图形必须提供标题，不能对图形方向作主。

代码如下(注意代码块类型为mermaid):

1

2

3

4

5

6

7

8

9

10

11

12

13

14(代码块类型mermaid)

graph TB

A-->D

A-->F

subgraph title2

C-->D

C-->subName1((sub))

end

subgraph title1

A---B

end

subgraph title3

E-.-F

end

效果如下：