[转载]在hugo中添加mermaid支持

在markdown中拓展mermaid

前面用有道云笔记的markdown功能，发现他画流程图非常好用。就想把这个功能加入到自己的blog中。mermaid是一个js库，平时可以直接用，要做特别难的再用专业软件转成图片。

步骤

1. 在yoursite/themes/themes_name/layouts/partials/footer.html中添加：

<script src="https://cdn.bootcss.com/mermaid/8.4.8/mermaid.min.js"></script>

2. 在shortcodes目录下新建mermaid.html文件。并输入：

<div class="mermaid" align="{{ if .Get "align" }}
                                {{ .Get "align" }}
                            {{ else }} 
                                center
                            {{ end }}"> 
    {{ safeHTML .Inner }}
</div>

3. 完成，进行测试

graph LR
A(面试)-->B(笔试)
A-->C(面试)
C-->C1(数据结构与算法*)
C-->C2(计算机网络)
C-->C3(操作系统Linux)
B-->B1(数据结构与算法*)

参考

https://kentxxq.com/contents/拓展hugo的markdown_流程图mermaid/