mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-21 20:46:30 -05:00
264 lines
14 KiB
Markdown
264 lines
14 KiB
Markdown
|
---
|
|||
|
|
title: Diagrams
|
|||
|
|
description: Use fenced code blocks and markdown render hooks to display diagrams.
|
|||
|
|
categories: [content management]
|
|||
|
|
keywords: [diagrams,drawing]
|
|||
|
|
menu:
|
|||
|
|
docs:
|
|||
|
|
parent: content-management
|
|||
|
|
weight: 50
|
|||
|
|
weight: 50
|
|||
|
|
toc: true
|
|||
|
|
---
|
|||
|
|
{{< new-in 0.93.0 >}}
|
|||
|
|
|
|||
|
|
## GoAT diagrams (ASCII)
|
|||
|
|
|
|||
|
|
Hugo supports [GoAT](https://github.com/bep/goat) natively. This means that this code block:
|
|||
|
|
|
|||
|
|
````txt
|
|||
|
|
```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:
|
|||
|
|
|
|||
|
|
```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 diagrams
|
|||
|
|
|
|||
|
|
Hugo currently does not provide default templates for Mermaid diagrams. But you can easily add your own. One way to do it would be to create `layouts/_default/_markup/render-codeblock-mermaid.html`:
|
|||
|
|
|
|||
|
|
```go-html-template
|
|||
|
|
<pre class="mermaid">
|
|||
|
|
{{- .Inner | safeHTML }}
|
|||
|
|
</pre>
|
|||
|
|
{{ .Page.Store.Set "hasMermaid" true }}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
And then include this snippet at the bottom of the content template (**Note**: below `.Content` as the render hook is not processed until `.Content` is executed):
|
|||
|
|
|
|||
|
|
```go-html-template
|
|||
|
|
{{ 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 }}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
With that you can use the `mermaid` language in Markdown code blocks:
|
|||
|
|
|
|||
|
|
````text
|
|||
|
|
```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
|
|||
|
|
|
|||
|
|
```goat
|
|||
|
|
.
|
|||
|
|
0 3 P * Eye / ^ /
|
|||
|
|
*-------* +y \ +) \ / Reflection
|
|||
|
|
1 /| 2 /| ^ \ \ \ v
|
|||
|
|
*-------* | | v0 \ v3 --------*--------
|
|||
|
|
| |4 | |7 | *----\-----*
|
|||
|
|
| *-----|-* +-----> +x / v X \ .-.<-------- o
|
|||
|
|
|/ |/ / / o \ | / | Refraction / \
|
|||
|
|
*-------* v / \ +-' / \
|
|||
|
|
5 6 +z v1 *------------------* v2 | o-----o
|
|||
|
|
v
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Complex
|
|||
|
|
|
|||
|
|
```goat
|
|||
|
|
+-------------------+ ^ .---.
|
|||
|
|
| A Box |__.--.__ __.--> | .-. | |
|
|||
|
|
| | '--' v | * |<--- | |
|
|||
|
|
+-------------------+ '-' | |
|
|||
|
|
Round *---(-. |
|
|||
|
|
.-----------------. .-------. .----------. .-------. | | |
|
|||
|
|
| Mixed Rounded | | | / Diagonals \ | | | | | |
|
|||
|
|
| & Square Corners | '--. .--' / \ |---+---| '-)-' .--------.
|
|||
|
|
'--+------------+-' .--. | '-------+--------' | | | | / Search /
|
|||
|
|
| | | | '---. | '-------' | '-+------'
|
|||
|
|
|<---------->| | | | v Interior | ^
|
|||
|
|
' <---' '----' .-----------. ---. .--- v |
|
|||
|
|
.------------------. Diag line | .-------. +---. \ / . |
|
|||
|
|
| if (a > b) +---. .--->| | | | | Curved line \ / / \ |
|
|||
|
|
| obj->fcn() | \ / | '-------' |<--' + / \ |
|
|||
|
|
'------------------' '--' '--+--------' .--. .--. | .-. +Done?+-'
|
|||
|
|
.---+-----. | ^ |\ | | /| .--+ | | \ /
|
|||
|
|
| | | Join \|/ | | Curved | \| |/ | | \ | \ /
|
|||
|
|
| | +----> o --o-- '-' Vertical '--' '--' '-- '--' + .---.
|
|||
|
|
<--+---+-----' | /|\ | | 3 |
|
|||
|
|
v not:line 'quotes' .-' '---'
|
|||
|
|
.-. .---+--------. / A || B *bold* | ^
|
|||
|
|
| | | Not a dot | <---+---<-- A dash--is not a line v |
|
|||
|
|
'-' '---------+--' / Nor/is this. ---
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Process
|
|||
|
|
|
|||
|
|
```goat
|
|||
|
|
.
|
|||
|
|
.---------. / \
|
|||
|
|
| START | / \ .-+-------+-. ___________
|
|||
|
|
'----+----' .-------. A / \ B | |COMPLEX| | / \ .-.
|
|||
|
|
| | END |<-----+CHOICE +----->| | | +--->+ PREPARATION +--->| X |
|
|||
|
|
v '-------' \ / | |PROCESS| | \___________/ '-'
|
|||
|
|
.---------. \ / '-+---+---+-'
|
|||
|
|
/ INPUT / \ /
|
|||
|
|
'-----+---' '
|
|||
|
|
| ^
|
|||
|
|
v |
|
|||
|
|
.-----------. .-----+-----. .-.
|
|||
|
|
| PROCESS +---------------->| PROCESS |<------+ X |
|
|||
|
|
'-----------' '-----------' '-'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### File tree
|
|||
|
|
|
|||
|
|
Created from <https://arthursonzogni.com/Diagon/#Tree>
|
|||
|
|
|
|||
|
|
```goat { width=300 color="orange" }
|
|||
|
|
───Linux─┬─Android
|
|||
|
|
├─Debian─┬─Ubuntu─┬─Lubuntu
|
|||
|
|
│ │ ├─Kubuntu
|
|||
|
|
│ │ ├─Xubuntu
|
|||
|
|
│ │ └─Xubuntu
|
|||
|
|
│ └─Mint
|
|||
|
|
├─Centos
|
|||
|
|
└─Fedora
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Sequence diagram
|
|||
|
|
|
|||
|
|
<https://arthursonzogni.com/Diagon/#Sequence>
|
|||
|
|
|
|||
|
|
```goat { class="w-40" }
|
|||
|
|
┌─────┐ ┌───┐
|
|||
|
|
│Alice│ │Bob│
|
|||
|
|
└──┬──┘ └─┬─┘
|
|||
|
|
│ │
|
|||
|
|
│ Hello Bob! │
|
|||
|
|
│───────────>│
|
|||
|
|
│ │
|
|||
|
|
│Hello Alice!│
|
|||
|
|
│<───────────│
|
|||
|
|
┌──┴──┐ ┌─┴─┐
|
|||
|
|
│Alice│ │Bob│
|
|||
|
|
└─────┘ └───┘
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Flowchart
|
|||
|
|
|
|||
|
|
<https://arthursonzogni.com/Diagon/#Flowchart>
|
|||
|
|
|
|||
|
|
```goat
|
|||
|
|
_________________
|
|||
|
|
╱ ╲ ┌─────┐
|
|||
|
|
╱ DO YOU UNDERSTAND ╲____________________________________________________│GOOD!│
|
|||
|
|
╲ FLOW CHARTS? ╱yes └──┬──┘
|
|||
|
|
╲_________________╱ │
|
|||
|
|
│no │
|
|||
|
|
_________▽_________ ______________________ │
|
|||
|
|
╱ ╲ ╱ ╲ ┌────┐ │
|
|||
|
|
╱ OKAY, YOU SEE THE ╲________________╱ ... AND YOU CAN SEE ╲___│GOOD│ │
|
|||
|
|
╲ LINE LABELED 'YES'? ╱yes ╲ THE ONES LABELED 'NO'? ╱yes└──┬─┘ │
|
|||
|
|
╲___________________╱ ╲______________________╱ │ │
|
|||
|
|
│no │no │ │
|
|||
|
|
________▽_________ _________▽__________ │ │
|
|||
|
|
╱ ╲ ┌───────────┐ ╱ ╲ │ │
|
|||
|
|
╱ BUT YOU SEE THE ╲___│WAIT, WHAT?│ ╱ BUT YOU JUST ╲___ │ │
|
|||
|
|
╲ ONES LABELED 'NO'? ╱yes└───────────┘ ╲ FOLLOWED THEM TWICE? ╱yes│ │ │
|
|||
|
|
╲__________________╱ ╲____________________╱ │ │ │
|
|||
|
|
│no │no │ │ │
|
|||
|
|
┌───▽───┐ │ │ │ │
|
|||
|
|
│LISTEN.│ └───────┬───────┘ │ │
|
|||
|
|
└───┬───┘ ┌──────▽─────┐ │ │
|
|||
|
|
┌─────▽────┐ │(THAT WASN'T│ │ │
|
|||
|
|
│I HATE YOU│ │A QUESTION) │ │ │
|
|||
|
|
└──────────┘ └──────┬─────┘ │ │
|
|||
|
|
┌────▽───┐ │ │
|
|||
|
|
│SCREW IT│ │ │
|
|||
|
|
└────┬───┘ │ │
|
|||
|
|
└─────┬─────┘ │
|
|||
|
|
│ │
|
|||
|
|
└─────┬─────┘
|
|||
|
|
┌───────▽──────┐
|
|||
|
|
│LET'S GO DRING│
|
|||
|
|
└───────┬──────┘
|
|||
|
|
┌─────────▽─────────┐
|
|||
|
|
│HEY, I SHOULD TRY │
|
|||
|
|
│INSTALLING FREEBSD!│
|
|||
|
|
└───────────────────┘
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Table
|
|||
|
|
|
|||
|
|
<https://arthursonzogni.com/Diagon/#Table>
|
|||
|
|
|
|||
|
|
```goat { class="w-80 dark-blue" }
|
|||
|
|
┌────────────────────────────────────────────────┐
|
|||
|
|
│ │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│SYNTAX = { PRODUCTION } . │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│PRODUCTION = IDENTIFIER "=" EXPRESSION "." . │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│EXPRESSION = TERM { "|" TERM } . │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│TERM = FACTOR { FACTOR } . │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│FACTOR = IDENTIFIER │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│ | LITERAL │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│ | "[" EXPRESSION "]" │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│ | "(" EXPRESSION ")" │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│ | "{" EXPRESSION "}" . │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│IDENTIFIER = letter { letter } . │
|
|||
|
|
├────────────────────────────────────────────────┤
|
|||
|
|
│LITERAL = """" character { character } """" .│
|
|||
|
|
└────────────────────────────────────────────────┘
|
|||
|
|
```
|