使用Mermaid在hugo的Markdown中绘制UML

简介

Mermaid是一个提供绘图功能的JavaScript项目。 它目前(8.6.4)支持:

使用

在Markdown中,使用Mermaid十分简单。


```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

写出以上代码块,就可以在网页渲染时,自动变成以下的svg图。

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

本文不对如何用它表达思想,做过多描述,详见官网文档。 此外,还可在其在线编辑器直接试用: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居中显示。

结语

用好Mermaid,可以让Markdown的表现力增色不少。 以后,本站也会更多地使用它来做更好的表达。


相关笔记