用Mermaid来支持静态博客绘制流程图

新添备注：此文适用于jekyll博客，不适用Hexo博客--2021/9/29

不支持流程图，时序图，甘特图的静态博客不是好博客，于是今天重点折腾了一下流程图的设置问题。现将过程记录一下：

主要修改了_layouts/default.html，以及media/js和media/css下的相关文件。

default.html中，要在

1
2
3

<head>...</head>中增添js脚本，内容为：
<script
src="/media/js/mermaid.js"></script>

试验了几个版本的js，最终发现官网上7.0版本的对本手机支持的最好。需将该脚本文件放到media/js目录下。

同时将该版本的mermaid.css放到/media/css/目录下，并在style.css中加以引用。即在style.css中需添加一句：

1 2	@import url(mermaid.css);

其次，在发布到_posts目录下的md文件中，如果有流程图等，则需要使用如下的表达，需要严格遵照它的语法规范：

<div class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

</div>

如此，就可以实现如下的流程图

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

时序图示例

<div class="mermaid">
sequenceDiagram
    participant Alice 
    participant Bob 
    Alice->John: Hello John,how are you? 
    loop Healthcheck 
        John->John: Fight against hypochondria 
    end 
    Note right of John: Rational thoughts <br/>prevail... 
    John-->Alice: Great! 
    John->Bob: How about you? 
    Bob-->John: Jolly good!
</div>

sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John,how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

甘特图示例

<div class="mermaid">
gantt 
        dateFormat YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid 
        section A section 
        Completed task :done, des1, 2014-01-06,2014-01-08 
        Active task :active, des2, 2014-01-09, 3d 
        Future task : des3, after des2, 5d 
        Future task2 : des4, after des3, 5d 
        section Critical tasks 
        Completed task in the critical line :crit, done, 2014-01-06,24h 
        Implement parser and jison :crit, done, after des1, 2d 
        Create tests for parser :crit, active, 3d 
        Future task in critical line :crit, 5d 
        Create tests for renderer :2d 
        Add to mermaid :1d
</div>

gantt 
        dateFormat YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid 
        section A section 
        Completed task :done, des1, 2014-01-06,2014-01-08 
        Active task :active, des2, 2014-01-09, 3d 
        Future task : des3, after des2, 5d 
        Future task2 : des4, after des3, 5d 
        section Critical tasks 
        Completed task in the critical line :crit, done, 2014-01-06,24h 
        Implement parser and jison :crit, done, after des1, 2d 
        Create tests for parser :crit, active, 3d 
        Future task in critical line :crit, 5d 
        Create tests for renderer :2d 
        Add to mermaid :1d