Hugo增加Mermaid插件,显示流程图

软件开发大郭
0 评论
/
24 阅读
/
1307 字
04 2022-05
分类:

在头部代码中增加开关

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

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

在模板中添加支持js代码

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

themes/m10c/layouts/_default/single.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 }}

效果展示

流程图效果

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

时序图效果

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