Mermaid diagrams
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 mermaid as the language:
```mermaid
flowchart LR
A --> B
```
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:
```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
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
```
```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
stateDiagram-v2
[*] --> Idle
Idle --> Running: start
Running --> Paused: pause
Paused --> Running: resume
Running --> Stopped: stop
Stopped --> [*]
```
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +isMammal() bool
Duck : +String beakColor
Duck : +quack()
Fish : +int sizeInFeet
Fish : +canEat()
```
```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
pie title Index distribution
"Primary" : 60
"Replica" : 30
"Frozen" : 10
```
```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
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
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
mindmap
root((Elastic Stack))
Elasticsearch
Indexing
Search
Aggregations
Kibana
Dashboards
Alerting
Logstash
Beats
```
```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
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
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
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
kanban
column1[Backlog]
task1[Update docs]
task2[Fix search bug]
column2[In Progress]
task3[Add dark mode]
column3[Done]
task4[Upgrade cluster]
```
```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
treemap-beta
title Index storage allocation
"hot" : 512
"warm" : 256
"cold" : 128
"frozen" : 64
```
```mermaid
venn-beta
set A["Search"]
set B["Analytics"]
set C["Observability"]
union A, B["Full Elastic"]
union B, C["Monitoring"]
```
```mermaid
sankey-beta
Logs,Logstash,40
Metrics,Logstash,30
Logstash,Elasticsearch,70
Elasticsearch,Kibana,70
```
```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
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
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
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
treeView-beta
elastic-stack/
elasticsearch/
index.ts :::highlight ## entry point
search.ts
aggregations.ts
kibana/
discover.ts
dashboards.ts
integrations/
beats.ts
logstash.ts
```
Diagrams include interactive controls that appear on hover:
- Zoom in/out: Click
+/-or holdCtrl(Cmdon 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.