图表

GoAT 图表

Hugo原生支持GoAT，这种图表样式比较简单，在文档中较难编写。

不同的样式效果

这是生成的图表

Mermaid 图表

mermaid js 官方文档

Hugo目前没有提供渲染 Mermaid 的模板。

可以通过 Hugo 提供的 Markdown Render Hooks 自定义渲染 mermaid 标识的代码块

创建一个匹配 md 文件中以 mermaid 标识的代码块内容的布局模版
文件路径: layouts/_default/_markup/render-codeblock-mermaid.html

1<!-- render-codeblock-mermaid.html -->
2<!-- md 文件中的 ```mermaid ``` 的代码块内容将应用该布局文件 -->
3<div class="mermaid">
4    {{- .Inner | safeHTML }}
5</div>
6{{ .Page.Store.Set "hasMermaid" true }}

在 Content View 布局模版底部添加渲染 mermaid 功能，需要借助 mermaid js 来渲染 mermaid 代码块的内容

 1<!-- layouts/_default/single.html -->
 2{{define "main"}}
 3    <!-- 其他代码 -->
 4{{ if .Page.Store.Get "hasMermaid" }}
 5  <script type="module">
 6    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
 7    mermaid.initialize({ 
 8      // 页面加载时渲染 mermaid 图表
 9      startOnLoad: true,
10      // 配置主题
11      theme: 'base',
12      // 配置日志等级
13      logLevel: 3,
14    });
15  </script>
16{{ end }}
17{{end}}

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!