使用Mermaid在hugo的Markdown中绘制UML
source link: https://note.qidong.name/2020/07/mermaid/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
使用Mermaid在hugo的Markdown中绘制UML
2020-07-31 22:01:02 +08 字数：959 标签： Hugo Markdown
简介 ¶
Mermaid是一个提供绘图功能的JavaScript项目。
它目前（8.6.4）支持：
使用 ¶
在Markdown中，使用Mermaid十分简单。
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
写出以上代码块，就可以在网页渲染时，自动变成以下的svg图。
本文不对如何用它表达思想，做过多描述，详见官网文档。 此外，还可在其在线编辑器直接试用：mermaid-live-editor
以下介绍如何配置使用。
配置 ¶
在GitLab等平台中，内置了Mermaid，只是版本不是最新。 想要使用，直接写就好。
在自己的hugo网站中，则需要在head.html这类的模板中，配置一番。
确保在最后的网页中，在恰当的位置包含以下要素。
<head>
...
<script async src="https://cdn.staticfile.org/mermaid/8.6.4/mermaid.min.js"></script>
</head>
<body>
...
<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>
</body>
其中，<head>部分是引入mermaid.js。
这里使用的是staticfile.org作为CDN，可按需替换。
在<body>的最后，需要加上<script>这段，用处是替换mermaid代码块为<div>，确保mermaid.js开始工作。
如果没有这段<script>，把```mermaid写成<div class="mermaid">也是能用的，但不够优雅。
最后的<style>则是让svg居中显示。
另一种配置 ¶
以下是本站一次更新后的配置。
除了CDN使用jsdelivr、版本更新为8.8.2以外，主要改动是在Hugo模板中添加了if。
{{ if .Params.mermaid }}
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/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 }}
额外加上了.Params.mermaid的检查，避免所有页面都需要加载它。
在需要使用的Hugo页面，可以在Front Matter中添加一个配置，显式指定使用Mermaid。
以下为TOML形式的示例：
+++
...
mermaid = true
+++
结语 ¶
用好Mermaid，可以让Markdown的表现力增色不少。 以后，本站也会更多地使用它来做更好的表达。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK