hexo 利用 Markdown 语法画 mermaid 流程图

hexo默认不支持流程图，flowchart是一种简便好用的解决方案，但由于其语法过于简单，导致其在应付稍复杂一些的流程图时捉襟见肘，本文记录在hexo中添加Mermaid流程图的方法。

添加支持

安装插件

npm install --save hexo-filter-mermaid-diagrams

主题配置

在主题配置文件中找到mermaid选项，将enable设置为true。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eSEHx6mr-1606317280418)(https://photos.zywvvd.com/image_canglan/20201123235944.png)]

加入mermaid代码块

graph TD
    B((开始)) -->C{判断}
    C --  a=1 -->D[执行语句1]
    C --  a=2  -->E[执行语句2]
    C --  a=3 -->F[执行语句3]
    C -- a=4  -->G[执行语句4]
    D--> AA((结束))
    E--> AA
    F--> AA
   G--> AA

流程图语法

方向

方向	含义
TB	从上到下
BT	从下到上
RL	从右到左
LR	从左到右
TD	与TB相同

节点

语法结构如下：A[名称] --> B(名称)
其中，A、B均代表形状名称，-->表示箭头指向，形状样式用后面的括号来表示，括号里面的内容是形状中要显示的文本内容。其中有以下几种形状：

括号形式	形状样式
[ ]	矩形框
( )	圆角矩形框
{ }	菱形
(( ))	圆形

连接线

符号	箭头
–>	箭头
—	没有箭头
– 文字 — / — \|文字\|	带文字的连接线
–>\|文字\| / – 文字 -->	带箭头和文字的连接
-.->	虚线
-. 文字 .->	带文字的虚线连接
==>	粗连接线
== 文本 ==>	带文本的粗连接

子图

语法：

subgraph title
    graph definition
end

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

样式链接

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

综合应用

graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end
    style id1 fill:#f9f,stroke:#333,stroke-width:4px

序列图语法

使用以下语法开始序列图

sequenceDiagram
    [参与者1][消息线][参与者2]:消息体
    ...

参与者

上例中的张三、李四都是参与者，上例中的语法是最简单的，也可以明显表明参与者有哪些

sequenceDiagram
    participant 参与者 1
    participant 参与者 2
    ...
    participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 312345

消息线

|类型|描述|
|->|无箭头的实线|
|-->|无箭头的虚线|
|->>|有箭头的实线|
|-->>|有箭头的虚线|
|-x|末端为叉的实线（表示异步）|
|--x|末端为叉的虚线（表示异步）|

处理中

在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。

或者使用以下语法直接说明某个参与者进入“处理中”状态

activate 参与者1

标注

语法如下

Note 位置表述 参与者: 标注文字1

其中位置表述可以为

表述	含义
right of	右侧
left of	左侧
over	在当中，可以横跨多个参与者

循环

语法如下

loop 循环的条件
    循环体描述语句
end123

判断

alt 条件 1 描述
    分支 1 描述语句
else 条件 2 描述 # else 分支可选
    分支 2 描述语句
else ...
    ...
end1234567

如果遇到可选的情况，即没有 else 分支的情况，使用如下语法：

opt 条件描述
    分支描述语句
end

综合应用

sequenceDiagram
    participant z as 张三
    participant l as 李四
    loop 日复一日
        z->>l: 吃了吗您呐？
        l-->>z: 吃了，您呢？
        activate z
        Note left of z: 想了一下
        alt 还没吃
            z-xl: 还没呢，正准备回去吃
        else 已经吃了
            z-xl: 我也吃过了，哈哈
        end
        opt 大过年的
            l-->z: 祝您新年好啊
        end
    end

参考资料

https://mermaid-js.github.io/mermaid/#/flowchart
https://www.jianshu.com/p/af48cc77b57a
https://baijiahao.baidu.com/s?id=1641809867954032650&wfr=spider&for=pc
https://blog.csdn.net/fenghuizhidao/article/details/79440583