图表
GoAT 图表（Ascii）
Hugo 原生支持 GoAT。这意味着下面的代码块：
```goat
. . . .--- 1 .-- 1 / 1
/ \ | | .---+ .-+ +
/ \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
+ + | | | | ---+ ---+ +
/ \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
/ \ / \ | | | | | | | | '---+ '-+ +
1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
```
将呈现为：
Mermaid 图表
Hugo 目前没有提供 Mermaid 图表的默认模板。但你可以轻松添加自己的模板。一种方法是创建 layouts/_default/_markup/render-codeblock-mermaid.html：
<pre class="mermaid">
{{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}
然后将此片段包含在内容模板的底部（注意：在 .Content 之下，因为渲染钩子直到执行 .Content 之后才会被处理）：
{{ if .Page.Store.Get "hasMermaid" }}
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
{{ end }}
通过这样，你可以在 Markdown 代码块中使用 mermaid 语言：
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: 你好 John，你好吗？
loop 健康检查
John->>John: 对抗疑病症
end
Note right of John: 理智的想法<br/>占上风！
John-->>Alice: 太好了！
John->>Bob: 你呢？
Bob-->>John: 非常好！
```
Goat ASCII 图表示例
图形
复杂
流程
文件树
是由 https://arthursonzogni.com/Diagon/#Tree 创建的。
顺序图
https://arthursonzogni.com/Diagon/#Sequence
流程图
https://arthursonzogni.com/Diagon/#Flowchart
表格
https://arthursonzogni.com/Diagon/#Table