Title here
Summary here
Diagrams
Use a fenced code block with the mermaid language identifier to add a diagram.
Usage
```mermaid
flowchart LR
A[Write content] --> B[Build site]
B --> C[Publish]
```No additional page or site settings are required.
Examples
Mermaid supports many diagram types.
Flowcharts
Use flowchart to show processes and relationships:
flowchart LR A[Write content] --> B[Build site] B --> C[Publish]
```mermaid
flowchart LR
A[Write content] --> B[Build site]
B --> C[Publish]
```Sequence diagrams
Use sequenceDiagram for interactions between participants:
sequenceDiagram participant Browser participant Server Browser->>Server: Request page Server-->>Browser: Return HTML
```mermaid
sequenceDiagram
participant Browser
participant Server
Browser->>Server: Request page
Server-->>Browser: Return HTML
```Gantt charts
Use gantt to show project tasks and dependencies:
gantt title Documentation release dateFormat YYYY-MM-DD axisFormat %d/%m section Content Write guide :done, content, 2026-08-01, 5d Review guide :review, after content, 3d Publish :publish, after review, 1d
```mermaid
gantt
title Documentation release
dateFormat YYYY-MM-DD
axisFormat %d/%m
section Content
Write guide :done, content, 2026-08-01, 5d
Review guide :review, after content, 3d
Publish :publish, after review, 1d
```Class diagrams
Use classDiagram to describe relationships between types:
classDiagram class User class Account User "1" --> "1" Account : owns
```mermaid
classDiagram
class User
class Account
User "1" --> "1" Account : owns
```Git graphs
Use gitGraph to document branches and commits:
gitGraph commit branch develop checkout develop commit checkout main merge develop
```mermaid
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
```Learn more
Mermaid
Create diagrams and visualizations from text with Mermaid's open-source syntax.
Mermaid diagrams
Hugo guide to adding Mermaid diagrams with a code block render hook.
Prev
Code BlocksNext
Mathematics