---
title: Mermaid diagrams
description: Mermaid diagrams are rendered server-side to inline SVG at build time. No JavaScript runtime is required to display them. Use a fenced code block with...
url: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/3805/syntax/diagrams
products:
- Elastic Docs Builder
---
# Mermaid diagrams
Mermaid diagrams are rendered server-side to inline SVG at build time. No JavaScript runtime is required to display them.
```mermaid
flowchart LR
A[Write Mermaid] --> B[Server renders SVG] --> C[Browser displays]
```
## Basic usage
Use a fenced code block with `mermaid` as the language:
```markdown
```mermaid
flowchart LR
A --> B
```
```
## Styling
Diagrams support a fixed set of semantic style classes that match the site's design system. Inline `classDef`, `style`, and `linkStyle` directives are not supported.
Apply a class to a node using the `:::classname` shorthand or the `class` statement:
```markdown
```mermaid
flowchart LR
A[Start]:::note --> B{Decided?}:::warning
B -->|Yes| C[Deploy]:::success
B -->|No| D[Rollback]:::error
```
```
```mermaid
flowchart LR
A[Start]:::note --> B{Decided?}:::warning
B -->|Yes| C[Deploy]:::success
B -->|No| D[Rollback]:::error
```
The available classes are:
| Class | Use for |
|-------------|--------------------------------------|
| `note` | Informational nodes, neutral context |
| `tip` | Recommended paths, positive guidance |
| `warning` | Caution required, review needed |
| `important` | Key nodes that must not be missed |
| `caution` | Destructive or risky actions |
| `error` | Failure states, invalid paths |
| `success` | Completion, healthy states |
| `plain` | De-emphasised or secondary nodes |
| `highlight` | Active, selected, or focal nodes |
All eight classes in one diagram:
```mermaid
flowchart LR
N[note]:::note
T[tip]:::tip
W[warning]:::warning
I[important]:::important
C[caution]:::caution
E[error]:::error
S[success]:::success
P[plain]:::plain
```
## Diagram types
### Flowchart
```markdown
```mermaid
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
```
```
```mermaid
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
```
```mermaid
flowchart LR
A[Start]:::note --> B{Decision}:::warning
B -->|Yes| C[Action 1]:::tip --> E[End]:::success
B -->|No| D[Action 2]:::error --> E
```
### Sequence diagram
```markdown
```mermaid
sequenceDiagram
participant C as Client
participant S as Server
participant D as Database
C->>S: POST /search
S->>D: SELECT query
D-->>S: rows
S-->>C: 200 OK
```
```
```mermaid
sequenceDiagram
participant C as Client
participant S as Server
participant D as Database
C->>S: POST /search
S->>D: SELECT query
D-->>S: rows
S-->>C: 200 OK
```
### State diagram
```markdown
```mermaid
stateDiagram-v2
[*] --> Idle
Idle --> Running: start
Running --> Paused: pause
Paused --> Running: resume
Running --> Stopped: stop
Stopped --> [*]
```
```
```mermaid
stateDiagram-v2
[*] --> Idle
Idle --> Running: start
Running --> Paused: pause
Paused --> Running: resume
Running --> Stopped: stop
Stopped --> [*]
```
```mermaid
stateDiagram-v2
[*] --> Idle
Idle --> Running: start
Running --> Paused: pause
Paused --> Running: resume
Running --> Stopped: stop
Stopped --> [*]
class Idle plain
class Running success
class Paused warning
class Stopped error
```
### Class diagram
```markdown
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +isMammal() bool
Duck : +String beakColor
Duck : +quack()
Fish : +int sizeInFeet
Fish : +canEat()
```
```
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +isMammal() bool
Duck : +String beakColor
Duck : +quack()
Fish : +int sizeInFeet
Fish : +canEat()
```
### ER diagram
```markdown
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
CUSTOMER {
string name
string email
}
ORDER {
int id
date created
}
```
```
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
CUSTOMER {
string name
string email
}
ORDER {
int id
date created
}
```
### Pie chart
```markdown
```mermaid
pie title Index distribution
"Primary" : 60
"Replica" : 30
"Frozen" : 10
```
```
```mermaid
pie title Index distribution
"Primary" : 60
"Replica" : 30
"Frozen" : 10
```
### Quadrant chart
```markdown
```mermaid
quadrantChart
title Feature prioritisation
x-axis Low effort --> High effort
y-axis Low impact --> High impact
quadrant-1 Do now
quadrant-2 Plan
quadrant-3 Deprioritise
quadrant-4 Delegate
Search API: [0.3, 0.8]
Alerting: [0.7, 0.7]
Dark mode: [0.5, 0.3]
Export CSV: [0.8, 0.2]
```
```
```mermaid
quadrantChart
title Feature prioritisation
x-axis Low effort --> High effort
y-axis Low impact --> High impact
quadrant-1 Do now
quadrant-2 Plan
quadrant-3 Deprioritise
quadrant-4 Delegate
Search API: [0.3, 0.8]
Alerting: [0.7, 0.7]
Dark mode: [0.5, 0.3]
Export CSV: [0.8, 0.2]
```
### Timeline
```markdown
```mermaid
timeline
title Elasticsearch major releases
2010 : 0.x — initial release
2014 : 1.0 — stable API
2015 : 2.0 — performance
2016 : 5.0 — unified stack
2019 : 7.0 — cluster coordination
2021 : 8.0 — security by default
```
```
```mermaid
timeline
title Elasticsearch major releases
2010 : 0.x — initial release
2014 : 1.0 — stable API
2015 : 2.0 — performance
2016 : 5.0 — unified stack
2019 : 7.0 — cluster coordination
2021 : 8.0 — security by default
```
### Git graph
```markdown
```mermaid
gitGraph
commit id: "init"
branch feature
checkout feature
commit id: "add search"
commit id: "add filters"
checkout main
merge feature id: "merge PR"
commit id: "tag v2.0"
```
```
```mermaid
gitGraph
commit id: "init"
branch feature
checkout feature
commit id: "add search"
commit id: "add filters"
checkout main
merge feature id: "merge PR"
commit id: "tag v2.0"
```
### Mindmap
```markdown
```mermaid
mindmap
root((Elastic Stack))
Elasticsearch
Indexing
Search
Aggregations
Kibana
Dashboards
Alerting
Logstash
Beats
```
```
```mermaid
mindmap
root((Elastic Stack))
Elasticsearch
Indexing
Search
Aggregations
Kibana
Dashboards
Alerting
Logstash
Beats
```
### Gantt chart
```markdown
```mermaid
gantt
title Release schedule
dateFormat YYYY-MM-DD
section Planning
Requirements :done, req, 2024-01-01, 2024-01-15
Design :done, des, 2024-01-10, 2024-01-25
section Build
Implementation :active, imp, 2024-01-20, 2024-02-15
Testing : test, 2024-02-10, 2024-02-28
section Release
Deploy : dep, 2024-03-01, 2024-03-05
```
```
```mermaid
gantt
title Release schedule
dateFormat YYYY-MM-DD
section Planning
Requirements :done, req, 2024-01-01, 2024-01-15
Design :done, des, 2024-01-10, 2024-01-25
section Build
Implementation :active, imp, 2024-01-20, 2024-02-15
Testing : test, 2024-02-10, 2024-02-28
section Release
Deploy : dep, 2024-03-01, 2024-03-05
```
### User journey
```markdown
```mermaid
journey
title Onboarding a new cluster
section Install
Download package: 5: Ops
Configure nodes: 3: Ops
section Connect
Run health check: 4: Ops, Dev
Ingest first data: 4: Dev
section Verify
Check dashboards: 5: Dev
```
```
```mermaid
journey
title Onboarding a new cluster
section Install
Download package: 5: Ops
Configure nodes: 3: Ops
section Connect
Run health check: 4: Ops, Dev
Ingest first data: 4: Dev
section Verify
Check dashboards: 5: Dev
```
### C4 diagram
```markdown
```mermaid
C4Context
Person(user, "User", "Searches docs")
System(docs, "Docs site", "Elastic documentation")
System_Ext(es, "Elasticsearch", "Powers search")
Rel(user, docs, "Reads")
Rel(docs, es, "Queries")
```
```
```mermaid
C4Context
Person(user, "User", "Searches docs")
System(docs, "Docs site", "Elastic documentation")
System_Ext(es, "Elasticsearch", "Powers search")
Rel(user, docs, "Reads")
Rel(docs, es, "Queries")
```
### Requirement diagram
```markdown
```mermaid
requirementDiagram
requirement search_req {
id: 1
text: Full-text search under 100ms
risk: high
verifyMethod: test
}
element api {
type: component
}
api - satisfies -> search_req
```
```
```mermaid
requirementDiagram
requirement search_req {
id: 1
text: Full-text search under 100ms
risk: high
verifyMethod: test
}
element api {
type: component
}
api - satisfies -> search_req
```
### Kanban
```markdown
```mermaid
kanban
column1[Backlog]
task1[Update docs]
task2[Fix search bug]
column2[In Progress]
task3[Add dark mode]
column3[Done]
task4[Upgrade cluster]
```
```
```mermaid
kanban
column1[Backlog]
task1[Update docs]
task2[Fix search bug]
column2[In Progress]
task3[Add dark mode]
column3[Done]
task4[Upgrade cluster]
```
### Radar chart (beta)
```markdown
```mermaid
radar-beta
title Cluster health dimensions
axis Throughput, Latency, Durability, Scalability, Observability
curve c1["Primary"]{80, 70, 90, 85, 75}
curve c2["Replica"]{60, 85, 95, 70, 80}
max 100
graticule polygon
```
```
```mermaid
radar-beta
title Cluster health dimensions
axis Throughput, Latency, Durability, Scalability, Observability
curve c1["Primary"]{80, 70, 90, 85, 75}
curve c2["Replica"]{60, 85, 95, 70, 80}
max 100
graticule polygon
```
### Treemap (beta)
```markdown
```mermaid
treemap-beta
title Index storage allocation
"hot" : 512
"warm" : 256
"cold" : 128
"frozen" : 64
```
```
```mermaid
treemap-beta
title Index storage allocation
"hot" : 512
"warm" : 256
"cold" : 128
"frozen" : 64
```
### Venn diagram (beta)
```markdown
```mermaid
venn-beta
set A["Search"]
set B["Analytics"]
set C["Observability"]
union A, B["Full Elastic"]
union B, C["Monitoring"]
```
```
```mermaid
venn-beta
set A["Search"]
set B["Analytics"]
set C["Observability"]
union A, B["Full Elastic"]
union B, C["Monitoring"]
```
### Sankey diagram (beta)
```markdown
```mermaid
sankey-beta
Logs,Logstash,40
Metrics,Logstash,30
Logstash,Elasticsearch,70
Elasticsearch,Kibana,70
```
```
```mermaid
sankey-beta
Logs,Logstash,40
Metrics,Logstash,30
Logstash,Elasticsearch,70
Elasticsearch,Kibana,70
```
### XY chart (beta)
```markdown
```mermaid
xychart-beta
title Indexing throughput (docs/sec)
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis 0 --> 50000
bar [12000, 18000, 15000, 22000, 30000, 28000]
line [12000, 18000, 15000, 22000, 30000, 28000]
```
```
```mermaid
xychart-beta
title Indexing throughput (docs/sec)
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis 0 --> 50000
bar [12000, 18000, 15000, 22000, 30000, 28000]
line [12000, 18000, 15000, 22000, 30000, 28000]
```
### Packet diagram (beta)
```markdown
```mermaid
packet-beta
0-7: "Version"
8-15: "IHL"
16-31: "Total Length"
32-63: "Identification + Flags + Fragment"
64-71: "TTL"
72-79: "Protocol"
80-95: "Header Checksum"
96-127: "Source IP"
128-159: "Destination IP"
```
```
```mermaid
packet-beta
0-7: "Version"
8-15: "IHL"
16-31: "Total Length"
32-63: "Identification + Flags + Fragment"
64-71: "TTL"
72-79: "Protocol"
80-95: "Header Checksum"
96-127: "Source IP"
128-159: "Destination IP"
```
### Architecture diagram (beta)
```markdown
```mermaid
architecture-beta
group ech(cloud)[Elastic Cloud]
service es(elastic:elasticsearch)[Elasticsearch] in ech
service kbn(elastic:kibana)[Kibana] in ech
service apm(elastic:apm)[APM] in ech
service edot(server)[EDOT Collector]
edot:R --> L:apm
apm:R --> L:es
kbn:T -- B:es
```
```
```mermaid
architecture-beta
group ech(cloud)[Elastic Cloud]
service es(elastic:elasticsearch)[Elasticsearch] in ech
service kbn(elastic:kibana)[Kibana] in ech
service apm(elastic:apm)[APM] in ech
service edot(server)[EDOT Collector]
edot:R --> L:apm
apm:R --> L:es
kbn:T -- B:es
```
### Block diagram (beta)
```markdown
```mermaid
block-beta
columns 3
A["Ingest"]:1 B["Transform"]:1 C["Store"]:1
D["Beats"]:1 E["Logstash"]:1 F["Elasticsearch"]:1
A --> B --> C
D --> E --> F
```
```
```mermaid
block-beta
columns 3
A["Ingest"]:1 B["Transform"]:1 C["Store"]:1
D["Beats"]:1 E["Logstash"]:1 F["Elasticsearch"]:1
A --> B --> C
D --> E --> F
```
### Tree view (beta)
```markdown
```mermaid
treeView-beta
elastic-stack/
elasticsearch/
index.ts :::highlight ## entry point
search.ts
aggregations.ts
kibana/
discover.ts
dashboards.ts
integrations/
beats.ts
logstash.ts
```
```
```mermaid
treeView-beta
elastic-stack/
elasticsearch/
index.ts :::highlight ## entry point
search.ts
aggregations.ts
kibana/
discover.ts
dashboards.ts
integrations/
beats.ts
logstash.ts
```
## Interactive controls
Diagrams include interactive controls that appear on hover:
- **Zoom in/out**: Click `+` / `-` or hold `Ctrl` (`Cmd` on macOS) and scroll.
- **Reset**: Click the reset button to return to the default view.
- **Fullscreen**: Click the expand button to open the diagram in a fullscreen modal.
- **Pan**: Click and drag to pan when zoomed in.