1.添加方法
先在layouts/shortcodes目录下添加一个叫做mermaid.html文件,里面的内容如下
<div class="mermaid">
{{.Inner}}
</div>
然后在layouts/partials/header.html文件下添加如下代码
{{ if (.Params.mermaid) }}
<!-- MermaidJS support -->
<script async src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
{{ end }}
然后在每次写文章时在头部的 front matter 添加开启如下字段
mermaid: true #是否开启mermaid
可以在archetypes/defaults.md里加入上面的设置,这样每次创建posts时都会自动添加这个字段
2.使用方法
直接输入如下格式:
结果如下
flowchart LR
a --> b & c--> d
表示a到b和c,然后b和c到d
可以通过html包裹的方式使其居中
<div align=center>
这里输入mermaid语法
</div>
如下
flowchart LR
a --> b & c--> d
官方使用方法、语法、作图的链接在这里:
https://mermaid-js.github.io/mermaid/#/
...