在头部代码中增加开关
在文章头部,增加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 客人