一、开启流程图功能

在_config.yml中找到mermaid属性^[1]
将其中的enable设为true，这样就能在全局使用流程图功能
接着将specific设为true，使Mermaid只有在文章头部设置mermaid:true时，才会被启用，加快其他网页的加载速度

要使用Mermaid流程图，可以通过以下两种格式：

1
2
3

{% mermaid %}
...
{% endmermaid %}

1
2
3

```mermaid
...
``` # 防止反引号被吞

个人更倾向于用第二种。

二、基本语法

1. 带文本的基本节点

1 2	`flowchart LR id[这是一个节点]`

flowchart LR
    id[这是一个节点]

id代表节点名

2. 流程图排布方向

左右排列的流程图

1 2	`flowchart LR id1 ---> id2`

flowchart LR
    id1 ---> id2

其中LR代表流程图左右排布

上下排列流程图

1 2	`flowchart TD Start ---> Stop`

flowchart TD
    Start ---> Stop

可以用TD或者TB

其他排列
- BT 从下到上
- RL 从右到左

3. 节点形状

圆角

1 2	`flowchart LR id1(这是一个节点)`

flowchart LR
    id1(这是一个节点)

椭圆

1 2	`flowchart LR id([这是一个节点])`

flowchart LR
    id([这是一个节点])

子程序

1 2	`flowchart LR id[[这是一个节点]]`

flowchart LR
    id[[这是一个节点]]

圆柱

1 2	`flowchart LR id[(这是一个节点)]`

flowchart LR
    id[(这是一个节点)]

圆形

1 2	`flowchart LR id((这是一个节点))`

flowchart LR
    id((这是一个节点))

旗帜

1 2	`flowchart LR id>这是一个节点]`

flowchart LR
    id>这是一个节点]

菱形

1 2	`flowchart LR id{这是一个节点}`

flowchart LR
    id{这是一个节点}

六角形

1 2	`flowchart LR id{{这是一个节点}}`

flowchart LR
    id{{这是一个节点}}

平行四边形

1 2	`flowchart LR id[/这是一个节点/]`

flowchart LR
    id[/这是一个节点/]

平行四边形（往左倾斜）

1 2	`flowchart LR id[\这是一个节点\]`

flowchart LR
    id[\这是一个节点\]

梯形

1 2	`flowchart LR id[/这是一个节点\]`

flowchart LR
    id[/这是一个节点\]

倒梯形

1 2	`flowchart LR id[\这是一个节点/]`

flowchart LR
    id[\这是一个节点/]

同心圆

1 2	`flowchart LR id(((这是一个节点)))`

同心圆是9.0以上版本加入的，Fluid主题所使用的版本是8.14.0

4. 线条样式

实线

1 2	`flowchart LR A---B`

flowchart LR
    A---B

虚线

1 2	`flowchart LR A-.-B`

flowchart LR
    A-.-B

粗实线

1 2	`flowchart LR A===B`

flowchart LR
    A===B

5. 线条长度

线条长度是根据线条符号的数量来定的，如虚线-..-就比虚线-.-长

6. 箭头样式

普通箭头

1 2	`flowchart LR A<-->B`

flowchart LR
    A<-->B

实心点

1 2	`flowchart LR A o--o B`

flowchart LR
    A o--o B

1 2	`flowchart LR A x--x B`

flowchart LR
    A x--x B

7. 带文本的线

带文本的线

1 2	`flowchart LR A-- 这是一条线 ---B`

flowchart LR
    A-- 这是一条线 ---B

左边起码两道杠，右边起码三道

或者可以这样写：

1 2	`flowchart LR A---\|这是一条线\|B`

flowchart LR
    A---|这是一条线|B

带文本的虚线

1 2	`flowchart LR A-. 这是一条线 .-B`

flowchart LR
    A-. 这是一条线 .-B

8. &符号使用

&符号可以实现节点一对多，多对一的关联模式
实例如下：

1 2	`flowchart LR a --> b & c --> d`

flowchart LR
    a --> b & c --> d

以及

1 2	`flowchart TD a & b --> c & d`

flowchart TD
    a & b --> c & d

9. 特殊字符

如果想在文本中使用括号、斜杆等有特殊含义的符号，可以给文本加上双引号

1 2	`flowchart LR id["这是一个节点(特殊符号)"]`

flowchart LR
    id["这是一个节点(特殊符号)"]

另外也可以使用HTML规定的字符实体^[2]

1 2	`flowchart LR A["这是一个节点:#quot;"] --> B["这是一个节点:#9829;"]`

flowchart LR
    A["这是一个节点:#quot;"] --> B["这是一个节点:#9829;"]

10. 注释

在流程图中使用%%来标记注释

1
2
3

flowchart LR 
    %% 这是一段注释
    A[这是一个节点]

11. 子图

flowchart TB
    c1 --> a2
    subgraph one
        a1 --> a2
    end
    subgraph two
        b1 --> b2
    end
    subgraph three
        c1 --> c2
    end
    one --> two
    three --> two
    two --> c2

flowchart TB
    c1 --> a2
    subgraph one
        a1 --> a2
    end
    subgraph two
        b1 --> b2
    end
    subgraph three
        c1 --> c2
    end
    one --> two
    three --> two
    two --> c2

可以手动指定排布方向

flowchart LR
    subgraph TOP
        direction TB
        subgraph B1
            direction RL
            i1 --> l1
        end
        subgraph B2
            direction BT
            i2 --> f2
        end
    end
    A --> TOP --> B
    B1 --> B2

flowchart LR
    subgraph TOP
        direction TB
        subgraph B1
            direction RL
            i1 --> l1
        end
        subgraph B2
            direction BT
            i2 --> f2
        end
    end
    A --> TOP --> B
    B1 --> B2

12. 绑定点击事件

想要开启交互功能，需要现在配置设置securityLevel为loose
接着在JS中定义一个回调函数

<script>
    function callback() {
        alert('Hello World')
    }
</script>

最后在定义流程图

flowchart LR
    A --> B --> C --> D --> E
    click A callback "这是一条提示"
    click B call callback()
    click C "http://baidu.com" _blank %% 跳转到百度
    click D href "http://baidu.com" _blank

可以直接在jsfiddle^[3]上测试该功能

13. 设置样式

Mermaid支持修改流程图背景fill的颜色和边框Stroke的样式，具体有以下三种方式

直接设置style

flowchart LR
    id1(Start) --> id2(Stop)
    style id1 fill:#f9f, storke:#333, stroke-width:4px
    style id2 fill:#bbf, stroke:#f66, storke-width:2px, color:#fff, stroke-dasharray: 100 100

flowchart LR
    id1(Start) --> id2(Stop)
    style id1 fill:#f9f, storke:#333, stroke-width:4px
    style id2 fill:#bbf, stroke:#f66, storke-width:2px, color:#fff, stroke-dasharray: 5 5

使用classDef

1
2
3

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96

使用:::来指定class名

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96

给节点添加类名
首先定一个CSS

<style>
    .cssClass > rect { # 流程图的标签是rect
        fill: #f00;
        stroke: #ff0;
        stroke-width: 4px;
    }
</style>

1
2
3

flowchart LR
    A --> B[AAA<span>BBB</span>AAA] --> C
    class A cssClass %% 给A节点挂上cssClass类

这个方案在8.14.0版本不起作用，因为CSS的优先级没有Mermaid本身的高，被覆盖了

14. 图标

Mermaid本身支持通过特定语法规则给节点文本添加图标
但在Fluid中只引入了mermaid.min.js，这个脚本并不包括FontAwesome^[4]，需要手动引入。
这里我用jsDelivr^[5]来加速加载。

即可以通过以下代码展示图标：

flowchart TD:
    B["fa:fa-twitter for peace"]
    B --> C[fa:fa-ban forbidden]
    B --> D[fa:fa-spinner]
    B --> E[A fa:fa-camera-retro perhaps]

如果图标不显示，那很可能是因为绘制图标的path标签中的fill属性被同样使用SVG绘制流程图的Mermaid给覆盖了。
而这个fill属性会影响到图标的颜色。
所以图标跟节点的背景颜色变成一样的，导致我一度以为图标没有渲染出来。
那么解决办法就是把fill属性的值改回来。

1
2
3

.svg-inline--fa > path { # .svg-inline--fa可以选取到所有FontAwesome标签
    fill: currentColor !important; # !important 优先级最高，强制覆盖所有CSS属性
}

currentColor代表color属性设置的值，如果color属性不存在，则从父辈的color继承

三、图例（待写）

1. 时序图

2. 程序图

四、实战

1. TCP三次握手流程

sequenceDiagram
    participant C as 客户端
    particiPant S as 服务器
    C ->> S: SYN=1,seq=J
    Note over C,S: 第一次握手
    S ->> C: SYN=1,ACK=1,ack=J+1,seq=K
    Note over C,S: 第二次握手
    C ->> S: ACK=1,ack=K+1
    Note over C,S: 第三次握手

sequenceDiagram
    participant C as 客户端
    particiPant S as 服务器
    C ->> S: SYN=1,seq=J
    Note over C,S: 第一次握手
    S ->> C: SYN=1,ACK=1,ack=J+1,seq=K
    Note over C,S: 第二次握手
    C ->> S: ACK=1,ack=K+1
    Note over C,S: 第三次握手

2. JS原型链

flowchart BT
    A(f) ---|f.__proto__| B ---|Foo.__proto__| C ---|Object.__proto__| D(null)
    E[Foo] -->|Foo.prototype| B(Foo的原型对象prototype)
    F[Object] -->|Object.protype| C(Object的原型对象prototype)
    B -->|原型对象.constructor| E
    C -->|原型对象.constructor| F

flowchart BT
    subgraph Foo
        direction LR
        E[Foo] -->|Foo.prototype| B(Foo的原型对象prototype)
        B -->|原型对象.constructor| E
    end
    subgraph Object
        direction LR
        F[Object] -->|Object.protype| C(Object的原型对象prototype)
        C -->|原型对象.constructor| F
    end
    A(f) -.-|f.__proto__| B -.-|Foo.__proto__| C -.-|Object.__proto__| D(null)

参考
Mermaid官方文档
 Mermaid官方文档2
Mermaid在线编辑器

Fluid Mermaid流程图使用指南 ↩
HTML字符实体 ↩
jsfiddle ↩
FontAwesome官网 ↩
jsDelivr的FontAwesome资源 ↩

Hexo 博客 Mermaid 流程图

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

Vue双向数据绑定的原理与实现上一篇

图床下一篇