Jekyll添加流程图

2021/01/27

流程图

写博客的时候是使用Typora工具编写,Typora工具可以绘制mermaid流程图,但是上传到GIthub Pages就不支持,不会对流程图进行一个渲染,所以进行一个扩展。

原因

  • kramdown渲染引擎没有实现对mermaid语法的渲染成流程图,只是渲染成代码块

思路

  • 引入mermaidjs文件
  • 使用Jquery语句对mermaid的代码块进行转换,转换成mermaid的js渲染的div

引入js

mermaid - 猫云的mermaid项目地址,有各个版本mermaid需要引入的文件

我引入的7.1.2的版本

<script src="https://cdn.bootcdn.net/ajax/libs/mermaid/7.1.2/mermaid.core.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/mermaid/7.1.2/mermaid.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/mermaid/7.1.2/mermaid.min.js"></script>

替换代码块

由于kramdown渲染引擎只是渲染成代码块,并不能变成mermaid需要的div,所以使用js进行一个替换

注意: 这个替换`js`不要写在头部,写在尾部。 因为写在头部的时候文章还没渲染出来,所以替换失败
<script type="text/javascript">
        $('.language-mermaid').each(function() {
            $(this).unwrap()
            $(this).replaceWith( "<div class=\"mermaid\">" + $(this).html() + "</div>" );
    });
</script>

附上mermaid语法编写的流程图

graph RL
	id1[A] --普通线--> id2[b]

目 录