Diagrams
GoAT diagrams (ASCII)
Hugo natively supports GoAT diagrams with an embedded code block render hook. This means that this code block:
```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
```
Will be rendered as:
Mermaid diagrams
Hugo does not provide a built-in template for Mermaid diagrams. Create your own using a code block render hook:
layouts/_default/_markup/render-codeblock-mermaid.html
<pre class="mermaid">
{{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}And then include this snippet at the bottom of the content template:
{{ if .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 }}
With that you can use the mermaid language in Markdown code blocks:
```mermaid
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 <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
Goat ASCII diagram examples
Graphics
Complex
Process
File tree
Created from https://arthursonzogni.com/Diagon/#Tree
Sequence diagram
https://arthursonzogni.com/Diagon/#Sequence
Flowchart
https://arthursonzogni.com/Diagon/#Flowchart
Table
https://arthursonzogni.com/Diagon/#Table