目录

支持mermaid设置绘图展示开关

Front Matter:

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

好处:避免所有页面或所有文章无脑加载绘图相关的js、css等资源文件。

在模板中添加支持js代码

可在对应模板,singe或script等文章模板html文件中添加如下js代码:

{{ 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 }}

js等资源文件建议使用国内或自有CDN源。

范例

流程图:

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

时序图:

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