在头部代码中增加开关

在文章头部，增加mermaid:true开关

1
2
3
4
5
6
7

---
title: "hugo支持绘图"
isCJKLanguage: true
date: 2020-10-13 22:24:53
...
mermaid: true
---

在模板中添加支持js代码

在你的主题文件夹中，找到文章模板，添加下面的js代码， 例如我的模板位置：

1

themes/m10c/layouts/_default/single.html

JS代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{{ if .Params.mermaid }}
<script
  src="https://cdn.jsdelivr.net/npm/mermaid@8.8.2/dist/mermaid.min.js"
  integrity="sha256-KqisLh8jVMBRjpNkOhH5W9VWs+F6x6vQksLqxs7+x9A="
  crossorigin="anonymous"
></script>
<script>
  // Replace mermaid pre.code to div
  Array.from(document.getElementsByClassName("language-mermaid")).forEach(
    (el) => {
      el.parentElement.outerHTML = `<div class="mermaid">${el.innerText}</div>`;
    }
  );
</script>
<style>
  /* Set svg to center */
  .mermaid svg {
    display: block;
    margin: auto;
  }
</style>
{{ end }}

效果展示

流程图效果

1
2
3
4
5

graph LR;
    爷爷-->爸爸
    爷爷-->叔叔
    爸爸-->我
    爸爸-->姐姐

时序图效果

1
2
3
4
5

sequenceDiagram;
    服务员->>客人: 你好，请问有什么可以帮助你的？
    activate 客人
    客人-->>服务员: 谢谢，没有。
    deactivate 客人