1+++
2date = '2025-10-04T13:39:53+02:00'
3draft = true
4title = 'Diagrams'
5image = 'https://images.unsplash.com/photo-1580894908361-967195033215?auto=format&fit=crop&w=1400&q=80'
6description = 'Experimenting with GoAT diagram support in Hugo, including syntax, options, and rendered examples.'
7tags = ['diagrams', 'hugo', 'goat']
8+++
9
10Hugo version >= 0.93.0
11
12## GoAT Diagrams (Ascii)
13
14Hugo! supports [GoAT](https://github.com/bep/goat) natively. This means that this code block:
15
16````
17```goat
18 . . . .--- 1 .-- 1 / 1
19 / \ | | .---+ .-+ +
20 / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
21 + + | | | | ---+ ---+ +
22 / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
23 / \ / \ | | | | | | | | '---+ '-+ +
24 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
25
26```
27````
28
29Will be rendered as:
30
31```goat
32
33 . . . .--- 1 .-- 1 / 1
34 / \ | | .---+ .-+ +
35 / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
36 + + | | | | ---+ ---+ +
37 / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
38 / \ / \ | | | | | | | | '---+ '-+ +
39 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
40```
41
42## GoAT Diagrams Examples
43
44### Graphics
45
46```goat
47 .
48 0 3 P * Eye / ^ /
49 *-------* +y \ +) \ / Reflection
50 1 /| 2 /| ^ \ \ \ v
51 *-------* | | v0 \ v3 --------*--------
52 | |4 | |7 | *----\-----*
53 | *-----|-* +-----> +x / v X \ .-.<-------- o
54 |/ |/ / / o \ | / | Refraction / \
55 *-------* v / \ +-' / \
56 5 6 +z v1 *------------------* v2 | o-----o
57 v
58
59```
60
61### Complex
62
63```goat
64+-------------------+ ^ .---.
65| A Box |__.--.__ __.--> | .-. | |
66| | '--' v | * |<--- | |
67+-------------------+ '-' | |
68 Round *---(-. |
69 .-----------------. .-------. .----------. .-------. | | |
70 | Mixed Rounded | | | / Diagonals \ | | | | | |
71 | & Square Corners | '--. .--' / \ |---+---| '-)-' .--------.
72 '--+------------+-' .--. | '-------+--------' | | | | / Search /
73 | | | | '---. | '-------' | '-+------'
74 |<---------->| | | | v Interior | ^
75 ' <---' '----' .-----------. ---. .--- v |
76 .------------------. Diag line | .-------. +---. \ / . |
77 | if (a > b) +---. .--->| | | | | Curved line \ / / \ |
78 | obj->fcn() | \ / | '-------' |<--' + / \ |
79 '------------------' '--' '--+--------' .--. .--. | .-. +Done?+-'
80 .---+-----. | ^ |\ | | /| .--+ | | \ /
81 | | | Join \|/ | | Curved | \| |/ | | \ | \ /
82 | | +----> o --o-- '-' Vertical '--' '--' '-- '--' + .---.
83 <--+---+-----' | /|\ | | 3 |
84 v not:line 'quotes' .-' '---'
85 .-. .---+--------. / A || B *bold* | ^
86 | | | Not a dot | <---+---<-- A dash--is not a line v |
87 '-' '---------+--' / Nor/is this. ---
88
89```
90
91### Process
92
93```goat
94 .
95 .---------. / \
96 | START | / \ .-+-------+-. ___________
97 '----+----' .-------. A / \ B | |COMPLEX| | / \ .-.
98 | | END |<-----+CHOICE +----->| | | +--->+ PREPARATION +--->| X |
99 v '-------' \ / | |PROCESS| | \___________/ '-'
100 .---------. \ / '-+---+---+-'
101 / INPUT / \ /
102 '-----+---' '
103 | ^
104 v |
105 .-----------. .-----+-----. .-.
106 | PROCESS +---------------->| PROCESS |<------+ X |
107 '-----------' '-----------' '-'
108```
109
110### File tree
111
112Created from <https://arthursonzogni.com/Diagon/#Tree>
113
114```goat { width=300 color="orange" }
115───Linux─┬─Android
116 ├─Debian─┬─Ubuntu─┬─Lubuntu
117 │ │ ├─Kubuntu
118 │ │ ├─Xubuntu
119 │ │ └─Xubuntu
120 │ └─Mint
121 ├─Centos
122 └─Fedora
123```
124
125
126### Sequence Diagram
127
128<https://arthursonzogni.com/Diagon/#Sequence>
129
130```goat { class="w-40" }
131┌─────┐ ┌───┐
132│Alice│ │Bob│
133└──┬──┘ └─┬─┘
134 │ │
135 │ Hello Bob! │
136 │───────────>│
137 │ │
138 │Hello Alice!│
139 │<───────────│
140┌──┴──┐ ┌─┴─┐
141│Alice│ │Bob│
142└─────┘ └───┘
143
144```
145
146
147### Flowchart
148
149<https://arthursonzogni.com/Diagon/#Flowchart>
150
151```goat
152 _________________
153 ╱ ╲ ┌─────┐
154 ╱ DO YOU UNDERSTAND ╲____________________________________________________│GOOD!│
155 ╲ FLOW CHARTS? ╱yes └──┬──┘
156 ╲_________________╱ │
157 │no │
158 _________▽_________ ______________________ │
159 ╱ ╲ ╱ ╲ ┌────┐ │
160╱ OKAY, YOU SEE THE ╲________________╱ ... AND YOU CAN SEE ╲___│GOOD│ │
161╲ LINE LABELED 'YES'? ╱yes ╲ THE ONES LABELED 'NO'? ╱yes└──┬─┘ │
162 ╲___________________╱ ╲______________________╱ │ │
163 │no │no │ │
164 ________▽_________ _________▽__________ │ │
165 ╱ ╲ ┌───────────┐ ╱ ╲ │ │
166 ╱ BUT YOU SEE THE ╲___│WAIT, WHAT?│ ╱ BUT YOU JUST ╲___ │ │
167 ╲ ONES LABELED 'NO'? ╱yes└───────────┘ ╲ FOLLOWED THEM TWICE? ╱yes│ │ │
168 ╲__________________╱ ╲____________________╱ │ │ │
169 │no │no │ │ │
170 ┌───▽───┐ │ │ │ │
171 │LISTEN.│ └───────┬───────┘ │ │
172 └───┬───┘ ┌──────▽─────┐ │ │
173 ┌─────▽────┐ │(THAT WASN'T│ │ │
174 │I HATE YOU│ │A QUESTION) │ │ │
175 └──────────┘ └──────┬─────┘ │ │
176 ┌────▽───┐ │ │
177 │SCREW IT│ │ │
178 └────┬───┘ │ │
179 └─────┬─────┘ │
180 │ │
181 └─────┬─────┘
182 ┌───────▽──────┐
183 │LET'S GO DRING│
184 └───────┬──────┘
185 ┌─────────▽─────────┐
186 │HEY, I SHOULD TRY │
187 │INSTALLING FREEBSD!│
188 └───────────────────┘
189
190```
191
192
193### Table
194
195<https://arthursonzogni.com/Diagon/#Table>
196
197```goat { class="w-80 dark-blue" }
198┌────────────────────────────────────────────────┐
199│ │
200├────────────────────────────────────────────────┤
201│SYNTAX : { PRODUCTION } . │
202├────────────────────────────────────────────────┤
203│PRODUCTION: IDENTIFIER "=" EXPRESSION "." . │
204├────────────────────────────────────────────────┤
205│EXPRESSION: TERM { "|" TERM } . │
206├────────────────────────────────────────────────┤
207│TERM : FACTOR { FACTOR } . │
208├────────────────────────────────────────────────┤
209│FACTOR : IDENTIFIER │
210├────────────────────────────────────────────────┤
211│ | LITERAL │
212├────────────────────────────────────────────────┤
213│ | "[" EXPRESSION "]" │
214├────────────────────────────────────────────────┤
215│ | "(" EXPRESSION ")" │
216├────────────────────────────────────────────────┤
217│ | "{" EXPRESSION "}" . │
218├────────────────────────────────────────────────┤
219│IDENTIFIER: letter { letter } . │
220├────────────────────────────────────────────────┤
221│LITERAL : """" character { character } """" .│
222└────────────────────────────────────────────────┘
223```