20. August 2022
Diagram Support Hugo v0.93.0 - 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:
1<div class="mermaid">
2 {{- .Inner | safeHTML }}
3</div>
4{{ .Page.Store.Set "hasMermaid" true }}
And then include this snippet at the bottom of the content template (below .Content):
1{{ if .Page.Store.Get "hasMermaid" }}
2 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
3 <script>
4 mermaid.initialize({ startOnLoad: true });
5 </script>
6{{ end }}
With that you can use the mermaid language in Markdown code blocks:
Gitgraph Diagrams ¶
gitGraph
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
commit id:"TWO"
cherry-pick id:"B"
commit id:"THREE"
checkout develop
commit id:"C23"
My Home Local Network diaram ¶
graph TD
FTT[ UT] --> |ftth| U(innbox G21)
U[ Innbox G21] -->|wan| A(RBD53iG-5HacD2HnD)
A[ RBD53iG-5HacD2HnD] -->|in| DNS(DNS)
DNS[ DNS] --> |out| A[ RBD53iG-5HacD2HnD]
A[ RBD53iG-5HacD2HnD] -->|lan| HS(Hassio)
A[ RBD53iG-5HacD2HnD] -->|lan| T1(Desctop)
A[ RBD53iG-5HacD2HnD] -->|lan| PS(POE)
A[ RBD53iG-5HacD2HnD] -->|wlan| E[Cam w01]
A[ RBD53iG-5HacD2HnD] -->|wlan| E2[Cam w02]
A[ RBD53iG-5HacD2HnD] -->|wlan| E1[iPad2]
PS -->|poe| R1[RLC 512]
PS -->|poe| R2[RLC 512]
HS <--> |usb| ZB( Coordinator )
ZB[ Coordinator] --> |wbee| ZP1(bm1)
ZB[ Coordinator] --> |wbee| ZP2(bm2)
ZB[ Coordinator] --> |wbee| ZP3(dw1)
ZB[ Coordinator] --> |wbee| ZP4(dw2)
ZB[ Coordinator] --> |wbee| ZP5(lp1)
ZB[ Coordinator] --> |wbee| ZP6(lp2)
ZB[ Coordinator] --> |wbee| ZP7(qp)
Sequence diagram ¶
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
A stadium-shaped node ¶
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
%%{init: {'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[ Car]
subgraph section
C
D
E
F
G
end
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left
Gantt Graph ¶
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
User Journey Diagram ¶
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me