mermaid – 编程技术记录 https://blog.z6z8.cn 世界你好! Mon, 01 Dec 2025 10:26:16 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.8.3 在hugo里集成mermaid图支持 https://blog.z6z8.cn/2025/12/01/%e5%9c%a8hugo%e9%87%8c%e9%9b%86%e6%88%90mermaid%e5%9b%be%e6%94%af%e6%8c%81/ https://blog.z6z8.cn/2025/12/01/%e5%9c%a8hugo%e9%87%8c%e9%9b%86%e6%88%90mermaid%e5%9b%be%e6%94%af%e6%8c%81/#respond Mon, 01 Dec 2025 09:42:07 +0000 https://blog.z6z8.cn/?p=1514 本文环境：
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]
]]> https://blog.z6z8.cn/2025/12/01/%e5%9c%a8hugo%e9%87%8c%e9%9b%86%e6%88%90mermaid%e5%9b%be%e6%94%af%e6%8c%81/feed/ 0