/ Update
13 min
No categories available
No tags available
Diagrams
Without further ado
val views
|
comments
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:
<pre class="mermaid">
{{ .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}Then include this snippet at the bottom of your base template, before the closing body tag:
{{ 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!
```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!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!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 ↗
[embedded code block render hook]: eturl render-codeblock-goat
[GoAT]: https://github.com/bep/goat ↗