Diagram examples
March 13,
2022
Mermaid with custom CSS#
graph LR;
A-->B[AAA];
B-->D;
%% Class Definitions
%% =================
class A cssClass;
classDef cssClass fill:#f9f,stroke:#333,stroke-width:4px, font-size:15px;
graph-easy rendering#
┌──────┐
│ B │
└──────┘
:
:
∨
┌───┐ ┌──────┐ ┌───┐ label between arrow, yo! ┌───┐
│ A │ ··> │ cool │ ──> │ E │ ∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼> │ F │
└───┘ └──────┘ └───┘ └───┘
∧
:
:
┌──────┐
│ C │
└──────┘
┌─────────────────┐ ┌───┐
│ Long Node Label │ A │ │
│ left │ long │ B │
│ right │ edge label │ │
│ center │ ────────────> │ │
└─────────────────┘ └───┘
Code block highlight test#
code block with languate set
code block without language
Simple code
goat (hugo built-in)#
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
5
0
4
2
6
3
7
+
z
+
y
+
x
v
1
v
P
0
X
v
3
E
y
v
e
2
R
e
f
r
a
c
t
i
o
n
R
e
f
l
e
c
t
i
o
n
&
A
M
S
i
o
i
q
f
b
B
x
u
j
o
e
a
(
-
x
d
r
a
>
e
f
R
>
c
o
C
n
u
o
b
(
n
r
)
)
d
n
e
e
J
d
r
o
s
i
n
N
o
R
D
t
o
i
u
a
a
n
g
d
d
l
o
i
t
n
e
D
i
a
g
o
n
a
l
s
C
V
u
e
r
r
v
t
e
i
d
c
a
l
n
o
t
A
N
C
:
o
u
l
d
r
r
i
A
a
/
I
v
n
s
i
n
e
e
h
s
t
d
-
e
-
t
r
l
B
i
h
i
i
s
i
o
n
'
s
r
e
q
n
.
u
*
o
o
b
t
t
o
e
l
a
s
d
'
*
l
i
n
e
D
o
n
S
e
e
?
a
r
c
3
h
Sequence Diagram#
https://arthursonzogni.com/Diagon/#Sequence
┌
│
└
┌
│
└
─
A
─
─
A
─
─
l
─
─
l
─
f
b
─
i
┬
│
│
│
│
│
│
┴
i
─
o
a
─
c
─
─
H
<
─
c
─
o
r
─
e
─
H
─
e
─
─
e
─
┐
│
┘
e
─
l
─
┐
│
┘
l
─
l
─
l
─
o
─
2
2
o
─
─
─
A
─
B
─
l
─
o
─
i
─
3
6
b
─
c
─
┌
│
└
!
─
e
─
┌
│
└
─
B
─
>
!
─
─
B
─
─
o
┬
│
│
│
│
│
│
┴
o
─
4
7
─
b
─
─
b
─
┐
│
┘
┐
│
┘
5
8