diagrams.md (14093B)
1 ---
2 title: Diagrams
3 date: 2022-02-20
4 categories: [content management]
5 keywords: [diagrams,drawing]
6 menu:
7 docs:
8 parent: "content-management"
9 weight: 22
10 weight: 22
11 toc: true
12 ---
13
14
15 {{< new-in "0.93.0" >}}
16
17
18 ## GoAT Diagrams (Ascii)
19
20 Hugo! supports [GoAT](https://github.com/bep/goat) natively. This means that this code block:
21
22 ````
23 ```goat
24 . . . .--- 1 .-- 1 / 1
25 / \ | | .---+ .-+ +
26 / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
27 + + | | | | ---+ ---+ +
28 / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
29 / \ / \ | | | | | | | | '---+ '-+ +
30 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
31
32 ```
33 ````
34
35 Will be rendered as:
36
37 ```goat
38
39 . . . .--- 1 .-- 1 / 1
40 / \ | | .---+ .-+ +
41 / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
42 + + | | | | ---+ ---+ +
43 / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
44 / \ / \ | | | | | | | | '---+ '-+ +
45 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
46 ```
47
48
49
50
51
52 ## Mermaid Diagrams
53
54 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`:
55
56
57 ```go-html-template
58 <div class="mermaid">
59 {{- .Inner | safeHTML }}
60 </div>
61 {{ .Page.Store.Set "hasMermaid" true }}
62 ```
63
64 And then include this snippet at the bottom of the content template (below `.Content`):
65
66 ```go-html-template
67 {{ if .Page.Store.Get "hasMermaid" }}
68 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
69 <script>
70 mermaid.initialize({ startOnLoad: true });
71 </script>
72 {{ end }}
73 ```
74
75 With that you can use the `mermaid` language in Markdown code blocks:
76
77 ```mermaid
78 sequenceDiagram
79 participant Alice
80 participant Bob
81 Alice->>John: Hello John, how are you?
82 loop Healthcheck
83 John->>John: Fight against hypochondria
84 end
85 Note right of John: Rational thoughts <br/>prevail!
86 John-->>Alice: Great!
87 John->>Bob: How about you?
88 Bob-->>John: Jolly good!
89 ```
90
91
92
93 ## Goat Ascii Diagram Examples
94
95 ### Graphics
96
97 ```goat
98 .
99 0 3 P * Eye / ^ /
100 *-------* +y \ +) \ / Reflection
101 1 /| 2 /| ^ \ \ \ v
102 *-------* | | v0 \ v3 --------*--------
103 | |4 | |7 | *----\-----*
104 | *-----|-* +-----> +x / v X \ .-.<-------- o
105 |/ |/ / / o \ | / | Refraction / \
106 *-------* v / \ +-' / \
107 5 6 +z v1 *------------------* v2 | o-----o
108 v
109
110 ```
111
112 ### Complex
113
114 ```goat
115 +-------------------+ ^ .---.
116 | A Box |__.--.__ __.--> | .-. | |
117 | | '--' v | * |<--- | |
118 +-------------------+ '-' | |
119 Round *---(-. |
120 .-----------------. .-------. .----------. .-------. | | |
121 | Mixed Rounded | | | / Diagonals \ | | | | | |
122 | & Square Corners | '--. .--' / \ |---+---| '-)-' .--------.
123 '--+------------+-' .--. | '-------+--------' | | | | / Search /
124 | | | | '---. | '-------' | '-+------'
125 |<---------->| | | | v Interior | ^
126 ' <---' '----' .-----------. ---. .--- v |
127 .------------------. Diag line | .-------. +---. \ / . |
128 | if (a > b) +---. .--->| | | | | Curved line \ / / \ |
129 | obj->fcn() | \ / | '-------' |<--' + / \ |
130 '------------------' '--' '--+--------' .--. .--. | .-. +Done?+-'
131 .---+-----. | ^ |\ | | /| .--+ | | \ /
132 | | | Join \|/ | | Curved | \| |/ | | \ | \ /
133 | | +----> o --o-- '-' Vertical '--' '--' '-- '--' + .---.
134 <--+---+-----' | /|\ | | 3 |
135 v not:line 'quotes' .-' '---'
136 .-. .---+--------. / A || B *bold* | ^
137 | | | Not a dot | <---+---<-- A dash--is not a line v |
138 '-' '---------+--' / Nor/is this. ---
139
140 ```
141
142 ### Process
143
144 ```goat
145 .
146 .---------. / \
147 | START | / \ .-+-------+-. ___________
148 '----+----' .-------. A / \ B | |COMPLEX| | / \ .-.
149 | | END |<-----+CHOICE +----->| | | +--->+ PREPARATION +--->| X |
150 v '-------' \ / | |PROCESS| | \___________/ '-'
151 .---------. \ / '-+---+---+-'
152 / INPUT / \ /
153 '-----+---' '
154 | ^
155 v |
156 .-----------. .-----+-----. .-.
157 | PROCESS +---------------->| PROCESS |<------+ X |
158 '-----------' '-----------' '-'
159 ```
160
161 ### File tree
162
163 Created from https://arthursonzogni.com/Diagon/#Tree
164
165 ```goat { width=300 color="orange" }
166 ───Linux─┬─Android
167 ├─Debian─┬─Ubuntu─┬─Lubuntu
168 │ │ ├─Kubuntu
169 │ │ ├─Xubuntu
170 │ │ └─Xubuntu
171 │ └─Mint
172 ├─Centos
173 └─Fedora
174 ```
175
176
177 ### Sequence Diagram
178
179 https://arthursonzogni.com/Diagon/#Sequence
180
181 ```goat { class="w-40" }
182 ┌─────┐ ┌───┐
183 │Alice│ │Bob│
184 └──┬──┘ └─┬─┘
185 │ │
186 │ Hello Bob! │
187 │───────────>│
188 │ │
189 │Hello Alice!│
190 │<───────────│
191 ┌──┴──┐ ┌─┴─┐
192 │Alice│ │Bob│
193 └─────┘ └───┘
194
195 ```
196
197
198 ### Flowchart
199
200 https://arthursonzogni.com/Diagon/#Flowchart
201
202 ```goat
203 _________________
204 ╱ ╲ ┌─────┐
205 ╱ DO YOU UNDERSTAND ╲____________________________________________________│GOOD!│
206 ╲ FLOW CHARTS? ╱yes └──┬──┘
207 ╲_________________╱ │
208 │no │
209 _________▽_________ ______________________ │
210 ╱ ╲ ╱ ╲ ┌────┐ │
211 ╱ OKAY, YOU SEE THE ╲________________╱ ... AND YOU CAN SEE ╲___│GOOD│ │
212 ╲ LINE LABELED 'YES'? ╱yes ╲ THE ONES LABELED 'NO'? ╱yes└──┬─┘ │
213 ╲___________________╱ ╲______________________╱ │ │
214 │no │no │ │
215 ________▽_________ _________▽__________ │ │
216 ╱ ╲ ┌───────────┐ ╱ ╲ │ │
217 ╱ BUT YOU SEE THE ╲___│WAIT, WHAT?│ ╱ BUT YOU JUST ╲___ │ │
218 ╲ ONES LABELED 'NO'? ╱yes└───────────┘ ╲ FOLLOWED THEM TWICE? ╱yes│ │ │
219 ╲__________________╱ ╲____________________╱ │ │ │
220 │no │no │ │ │
221 ┌───▽───┐ │ │ │ │
222 │LISTEN.│ └───────┬───────┘ │ │
223 └───┬───┘ ┌──────▽─────┐ │ │
224 ┌─────▽────┐ │(THAT WASN'T│ │ │
225 │I HATE YOU│ │A QUESTION) │ │ │
226 └──────────┘ └──────┬─────┘ │ │
227 ┌────▽───┐ │ │
228 │SCREW IT│ │ │
229 └────┬───┘ │ │
230 └─────┬─────┘ │
231 │ │
232 └─────┬─────┘
233 ┌───────▽──────┐
234 │LET'S GO DRING│
235 └───────┬──────┘
236 ┌─────────▽─────────┐
237 │HEY, I SHOULD TRY │
238 │INSTALLING FREEBSD!│
239 └───────────────────┘
240
241 ```
242
243
244 ### Table
245
246 https://arthursonzogni.com/Diagon/#Table
247
248 ```goat { class="w-80 dark-blue" }
249 ┌────────────────────────────────────────────────┐
250 │ │
251 ├────────────────────────────────────────────────┤
252 │SYNTAX = { PRODUCTION } . │
253 ├────────────────────────────────────────────────┤
254 │PRODUCTION = IDENTIFIER "=" EXPRESSION "." . │
255 ├────────────────────────────────────────────────┤
256 │EXPRESSION = TERM { "|" TERM } . │
257 ├────────────────────────────────────────────────┤
258 │TERM = FACTOR { FACTOR } . │
259 ├────────────────────────────────────────────────┤
260 │FACTOR = IDENTIFIER │
261 ├────────────────────────────────────────────────┤
262 │ | LITERAL │
263 ├────────────────────────────────────────────────┤
264 │ | "[" EXPRESSION "]" │
265 ├────────────────────────────────────────────────┤
266 │ | "(" EXPRESSION ")" │
267 ├────────────────────────────────────────────────┤
268 │ | "{" EXPRESSION "}" . │
269 ├────────────────────────────────────────────────┤
270 │IDENTIFIER = letter { letter } . │
271 ├────────────────────────────────────────────────┤
272 │LITERAL = """" character { character } """" .│
273 └────────────────────────────────────────────────┘
274 ```
275
276
277