本文环境：
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文件里添加样例，看下效果
```mermaid
flowchart LR
%% 左右布局（TD=上下，LR=左右，TB=上下，BT=下上）
Start[开始] --> Stop[结束]
A[矩形节点] --> B(圆角矩形)
C{菱形判断} -->|是| D[操作1]
C -->|否| E[操作2]
发表回复
要发表评论，您必须先登录。