在hugo里集成mermaid图支持

Mon, 01 Dec 2025 09:42:07 +0000

本文环境： hugo v0.152.2+extended+withdeploy darwin/amd64 BuildDate=2025-10-24T15:31:49Z VendorInfo=Homebrew

一般使用了hugo主题的话，默认是集成了mermaid图。若不使用hugo主题，那么就需要自己手动集成了。步骤如下：

创建 layouts/_markup/render-codeblock-mermaid.html

负责开启一个mermaid图的html区块，内容如下：

<pre class="mermaid">
    {{- .Inner | safeHTML }}
  </pre>
  {{ .Page.Store.Set "hasMermaid" true }}

修改 layouts/_default/baseof.html

如果没有该文件就创建一个。默认情况下，所有html页面的主体结构和内容由这个文件渲染。和mermaid图相关的内容如下:

<!DOCTYPE html>
<html lang="zh-CN">

<body>
   ......
   ......
   ......

   <!-- 必须放到最后在 （.Content 之下），因为这渲染钩子直到执行 .Content 之后才会被处理），否则.Page.Store.Get "hasMermaid"永远为false -->
       {{ if .Page.Store.Get "hasMermaid" }}
    <!-- 只有文章里写了 mermaid 才加载下面这些资源，节省性能 -->
        <script type="module">
            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
            mermaid.initialize({ startOnLoad: true });
        </script>
    {{ end }}
</body>
</html>

添加一个mermaid图看看效果

在网站的任意一个markdown文件里添加样例，看下效果

Hugo on 编程技术记录

在hugo里集成mermaid图支持

创建 layouts/_markup/render-codeblock-mermaid.html

修改 layouts/_default/baseof.html

添加一个mermaid图看看效果