mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
d276e901b3
63386081c update cSpell config update 15c76494b Update cSpell custom dictionary (#1694) 34f3167b7 Update image processing (#1625) 7462cc798 fix: pipes in sample code break table creation (#1686) 48736447e Update anchorize.md 2ff0bd10b netlify: Hugo 0.95.0 0fc1d21b2 Update configuration.md 41855e372 Fix #1682 8c663433e Update related.md 7aa072eab netlify: Hugo 0.94.2 1682c7ee7 Update render-hooks.md ce1283cc4 Move the Render Hooks doc to its own page bbbbfbfc6 Update configuration-markup.md 92d91a316 Update configuration-markup.md 2e8068823 Update configuration-markup.md ff2dbca60 Update configuration-markup.md 89d8e5d65 Add code block documenation e993539f0 Update shortcodes.md c1b28dbfe netlify: Hugo 0.94.1 81b8c9b83 Merge branch 'tempv0.94.1' 4763b3d50 docs: Regenerate CLI docs b18463971 netlify: Bump to Hugo 0.94.0 4152ebc1d Merge branch 'tempv0.94.0' ba3a11ac2 docs: Regenerate docshelper e64016d13 docs: Regenerate docshelper 29180e4d2 add `.html` suffix to partial usage and references 3213e00f2 Docs tidy-up 6cfcae4b7 docs: Regenerate CLI docs 8a6cd0b4d docs: Regenerate docshelper b20ab262f Merge commit 'd706529720b3b2ccb99719ccd578062ca25a0cc2' git-subtree-dir: docs git-subtree-split: 63386081c55de6a7f97adde564a9cfc2ad326119
277 lines
14 KiB
Markdown
277 lines
14 KiB
Markdown
---
|
||
title: Diagrams
|
||
date: 2022-02-20
|
||
categories: [content management]
|
||
keywords: [diagrams,drawing]
|
||
menu:
|
||
docs:
|
||
parent: "content-management"
|
||
weight: 22
|
||
weight: 22
|
||
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:
|
||
|
||
````
|
||
```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
|
||
<div class="mermaid">
|
||
{{- .Inner | safeHTML }}
|
||
</div>
|
||
{{ .Page.Store.Set "hasMermaid" true }}
|
||
```
|
||
|
||
And then include this snippet at the bottom of the content template (below `.Content`):
|
||
|
||
```go-html-template
|
||
{{ if .Page.Store.Get "hasMermaid" }}
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||
<script>
|
||
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
|
||
|
||
```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 } """" .│
|
||
└────────────────────────────────────────────────┘
|
||
```
|
||
|
||
|
||
|