hexo 利用 Markdown 语法画 mermaid 流程图

一时失言乱红尘 2022-12-24 00:45 273阅读 0赞

> 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

a=1

a=2

a=3

a=4

开始

判断

执行语句1

执行语句2

执行语句3

执行语句4

结束

### 流程图语法 ###

#### 方向 ####

<table> 
 <thead> 
  <tr> 
   <th>方向</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>TB</td> 
   <td>从上到下</td> 
  </tr> 
  <tr> 
   <td>BT</td> 
   <td>从下到上</td> 
  </tr> 
  <tr> 
   <td>RL</td> 
   <td>从右到左</td> 
  </tr> 
  <tr> 
   <td>LR</td> 
   <td>从左到右</td> 
  </tr> 
  <tr> 
   <td>TD</td> 
   <td>与TB相同</td> 
  </tr> 
 </tbody> 
</table>

#### 节点 ####

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

<table> 
 <thead> 
  <tr> 
   <th>括号形式</th> 
   <th>形状样式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[ ]</td> 
   <td>矩形框</td> 
  </tr> 
  <tr> 
   <td>( )</td> 
   <td>圆角矩形框</td> 
  </tr> 
  <tr> 
   <td>{ }</td> 
   <td>菱形</td> 
  </tr> 
  <tr> 
   <td>(( ))</td> 
   <td>圆形</td> 
  </tr> 
 </tbody> 
</table>

#### 连接线 ####

<table> 
 <thead> 
  <tr> 
   <th>符号</th> 
   <th>箭头</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>–&gt;</td> 
   <td>箭头</td> 
  </tr> 
  <tr> 
   <td>—</td> 
   <td>没有箭头</td> 
  </tr> 
  <tr> 
   <td>– 文字 — / — |文字|</td> 
   <td>带文字的连接线</td> 
  </tr> 
  <tr> 
   <td>–&gt;|文字| / – 文字 --&gt;</td> 
   <td>带箭头和文字的连接</td> 
  </tr> 
  <tr> 
   <td>-.-&gt;</td> 
   <td>虚线</td> 
  </tr> 
  <tr> 
   <td>-. 文字 .-&gt;</td> 
   <td>带文字的虚线连接</td> 
  </tr> 
  <tr> 
   <td>==&gt;</td> 
   <td>粗连接线</td> 
  </tr> 
  <tr> 
   <td>== 文本 ==&gt;</td> 
   <td>带文本的粗连接</td> 
  </tr> 
 </tbody> 
</table>

#### 子图 ####

语法：

subgraph title
        graph definition
    end

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

three

two

one

#### 样式链接 ####

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

Start

Stop

#### 综合应用 ####

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

其中位置表述可以为

<table> 
 <thead> 
  <tr> 
   <th>表述</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>right of</td> 
   <td>右侧</td> 
  </tr> 
  <tr> 
   <td>left of</td> 
   <td>左侧</td> 
  </tr> 
  <tr> 
   <td>over</td> 
   <td>在当中，可以横跨多个参与者</td> 
  </tr> 
 </tbody> 
</table>

#### 循环 ####

语法如下

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

张三李四吃了吗您呐？吃了，您呢？想了一下还没呢，正准备回去吃我也吃过了，哈哈alt\[还没吃\]\[已经吃了\]祝您新年好啊opt\[大过年的\]loop\[日复一日\]张三李四

### 参考资料 ###

*  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

[flowchart]: https://www.zywvvd.com/2020/11/23/hexo/13_flowchart/flowchart/