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

#电脑技术

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

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

default.html中，要在

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

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

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

@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