The Mermaid Native project maintains deterministic, verified Kotlin Multiplatform implementations across 32 diagram families. Every example below is exercised in our continuous multiplatform test suite and rendered with the native SVG engine. Each card also live-renders the same source with official Mermaid.js so you can compare missing details. Official Mermaid is comparison-only and is never used as a Native fallback.
A compact grammar flow. Support is intentionally bounded; unsupported constructs return typed diagnostics.
railroad-beta
auth = sequence(
terminal("token"),
choice(
nonterminal("session"),
optional(terminal("refresh"))
),
sequence(terminal("validate"), terminal("store"))
);Rendering official Mermaid…
Actors and use cases. Support is intentionally bounded; unsupported constructs return typed diagnostics.
usecase-beta
direction LR
actor Customer("Customer")
Checkout("Place order")
Receipt[Create receipt]
Customer -- "starts" --> Checkout
Checkout --> ReceiptComparison preview is not available for Usecase — the dialect is Native-only and not implemented in official Mermaid. Native render on the left is the reference.
Sequence messages (bounded). Support is intentionally bounded; unsupported constructs return typed diagnostics.
zenuml
title Token handshake
Client
Store as Token store
Client->Gateway.submit()
Gateway->Store.lookup
Client->Gateway: cancelComparison preview is not available for ZenUML — the dialect is Native-only and not implemented in official Mermaid. Native render on the left is the reference.
Command, event and view. Support is intentionally bounded; unsupported constructs return typed diagnostics.
eventmodeling
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded
rf 04 evt External.InventoryChanged
tf 05 pcr InventoryProcessor
tf 06 rmo InventoryView ->> 03 ->> 04Rendering official Mermaid…
Typed relationships and members. Support is intentionally bounded; unsupported constructs return typed diagnostics.
classDiagram
class Animal
Animal : +String name
Animal : +eat()
Animal <|-- Duck
class Duck
Duck : +swim()Rendering official Mermaid…
A compact lifecycle. Support is intentionally bounded; unsupported constructs return typed diagnostics.
stateDiagram-v2
direction LR
[*] --> Idle
state "Processing request" as Working
Idle --> Working: start
Working --> [*]: finishRendering official Mermaid…
A minimal request/response. Support is intentionally bounded; unsupported constructs return typed diagnostics.
sequenceDiagram
Alice->>Bob: Hello Bob!
Bob-->>Alice: Hi Alice!Rendering official Mermaid…
Nodes, labels and branching. Support is intentionally bounded; unsupported constructs return typed diagnostics.
graph TD
A[Start] ==> B[Process]
B --> C[End]Rendering official Mermaid…
Sections and dated tasks. Support is intentionally bounded; unsupported constructs return typed diagnostics.
gantt
title Release plan
dateFormat YYYY-MM-DD
section Build
Parser :done, parse, 2026-08-19, 2d
Renderer :active, render, 2026-08-21, 3dRendering official Mermaid…
Commits, branches and merge. Support is intentionally bounded; unsupported constructs return typed diagnostics.
gitGraph
commit id: "base" tag: "v1.0"
branch develop
commit id: "feature" type: HIGHLIGHT
checkout main
commit id: "release" type: REVERSE
merge develop id: "merge" tag: "v2 & stable"Rendering official Mermaid…
A small data visualization. Support is intentionally bounded; unsupported constructs return typed diagnostics.
pie showData title Pets adopted
"Dogs" : 386
"Cats" : 85
"Rats" : 15Rendering official Mermaid…
Axes and plotted points. Support is intentionally bounded; unsupported constructs return typed diagnostics.
quadrantChart
title Product portfolio
x-axis Low reach --> High reach
y-axis Low engagement --> High engagement
quadrant-1 Expand
quadrant-2 Promote
quadrant-3 Re-evaluate
quadrant-4 Improve
Campaign A: [0.3, 0.6]
Campaign B: [0.75, 0.25]Rendering official Mermaid…
Axes and a bounded series. Support is intentionally bounded; unsupported constructs return typed diagnostics.
radar-beta
title Team skill matrix
axis m["Math"], s["Science"], e["English"]
curve alice["Alice"]{85, 78, 92}
curve bob["Bob"]{62, 84, 55}
max 100Rendering official Mermaid…
Flow quantities (bounded). Support is intentionally bounded; unsupported constructs return typed diagnostics.
sankey
Grid,Industry,12.5
Grid,"Heating, homes",7.25
Industry,Losses & exports,2.5Rendering official Mermaid…
Dates and events. Support is intentionally bounded; unsupported constructs return typed diagnostics.
timeline
title Product history
2024 : Launch : First users
2025 : ScaleRendering official Mermaid…
Nested weighted leaves. Support is intentionally bounded; unsupported constructs return typed diagnostics.
treemap-beta
"Products & services"
"Mobile": 45
"Web": 35
"API": 20Rendering official Mermaid…
Set overlap (bounded). Support is intentionally bounded; unsupported constructs return typed diagnostics.
venn-beta
title "Team overlap"
set Frontend["Frontend & design"]:20
set Backend:16
set Platform:12
union Frontend,Backend["APIs"]:5
union Frontend,Backend,Platform["Shared tooling"]:2Rendering official Mermaid…
Categorical bars. Support is intentionally bounded; unsupported constructs return typed diagnostics.
xychart-beta
title "Quarterly sales"
x-axis "Quarter" [Q1, Q2, Q3, Q4]
y-axis "Revenue" 0 --> 100
bar [20, 45, 70, 85]
line [25, 40, 75, 90]Rendering official Mermaid…
Service nodes and directed edges (bounded). Support is intentionally bounded; unsupported constructs return typed diagnostics.
architecture-beta
group api(cloud)[API & gateway]
service db(database)[Database] in api
service server(server)[Application server] in api
db:B --> T:serverRendering official Mermaid…
Blocks and connections (bounded). Support is intentionally bounded; unsupported constructs return typed diagnostics.
block
columns 3
api["Public & partner API"]:2
db["Database"]
worker["Worker"]:2
api --> worker
db --> workerRendering official Mermaid…
Context nodes and relationships (bounded). Support is intentionally bounded; unsupported constructs return typed diagnostics.
C4Context
title Banking context
Person(customer, "Customer & partner", "Uses the app")
System(bank, "Banking system", "Shows balances")
Rel(customer, bank, "Uses", "HTTPS")Rendering official Mermaid…
Entities, cardinality and attributes. Support is intentionally bounded; unsupported constructs return typed diagnostics.
erDiagram
CUSTOMER {
int id PK
string name
}
ORDER {
int id PK
int customerId FK
}
CUSTOMER ||--o{ ORDER : placesRendering official Mermaid…
Requirement metadata. Support is intentionally bounded; unsupported constructs return typed diagnostics.
requirementDiagram
requirement secure_login {
id: "AUTH-1"
text: Users authenticate securely
risk: high
verifymethod: test
}
element mobile_client {
type: application
docref: docs/auth.md
}
mobile_client - satisfies -> secure_loginRendering official Mermaid…
Cause/effect analysis (bounded). Support is intentionally bounded; unsupported constructs return typed diagnostics.
ishikawa-beta
Blurry Photo
Process
Out of focus
Shutter speed too slow
Equipment
LENS
Dirty lens
SENSOR
Damaged sensor
Environment
Subject moved too quicklyRendering official Mermaid…
Columns and cards. Support is intentionally bounded; unsupported constructs return typed diagnostics.
kanban
todo[Todo]
spec[Write & review spec]
tests[Add tests]
done[Done]
release[Ship release]Rendering official Mermaid…
Hierarchical topics. Support is intentionally bounded; unsupported constructs return typed diagnostics.
mindmap
root((Project plan))
Discovery
[Requirements]
Research
Delivery
((Native SVG))Rendering official Mermaid…
Bit ranges and labels. Support is intentionally bounded; unsupported constructs return typed diagnostics.
packet
title UDP Packet
0-15: "Source Port"
16-31: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data"Rendering official Mermaid…
Tree-shaped hierarchy. Support is intentionally bounded; unsupported constructs return typed diagnostics.
treeView-beta
project/
src/
index.ts
"README file.md"
package.jsonRendering official Mermaid…
Anchor and component evolution. Support is intentionally bounded; unsupported constructs return typed diagnostics.
wardley-beta
title Tea Shop Value Chain
anchor Business [0.95, 0.63]
component Cup of Tea [0.79, 0.61]
component Tea [0.63, 0.81]
component Hot Water [0.52, 0.80]
component Kettle [0.43, 0.35]
component Power [0.10, 0.70]
Business -> Cup of Tea
Cup of Tea -> Tea
Cup of Tea -> Hot Water
Hot Water -> Kettle
Kettle -> Power
evolve Kettle 0.62
evolve Power 0.89
note "Standardising power allows Kettles to evolve faster" [0.30, 0.49]Rendering official Mermaid…
Swimlane lanes and edges (bounded). Support is intentionally bounded; unsupported constructs return typed diagnostics.
swimlane-beta LR
subgraph customer [Customer & partner]
request[Request service]
receive((Receive update))
end
subgraph support [Support team]
triage{Known issue?}
answer[Send answer]
end
request -->|handoff & review| triage
triage --> answer --> receiveRendering official Mermaid…
Sections, actor steps, and scores. Support is intentionally bounded; unsupported constructs return typed diagnostics.
journey
title Checkout journey
section Discover
Find product: 4: Shopper
Review & compare: 3: Shopper, Advisor
section Purchase
Add to cart: 5: Shopper
Pay securely: 4: Shopper, Payment serviceRendering official Mermaid…
Domains and labels. Support is intentionally bounded; unsupported constructs return typed diagnostics.
cynefin-beta
title Incident response
complex
"Investigate & learn"
"Run chaos experiment"
complicated
"Expert analysis"
clear
"Apply known fix"
chaotic
"Page on-call"
confusion
"Unknown failure"
complex --> complicated : "Pattern found"
chaotic --> complex : "Stabilized"Rendering official Mermaid…
The live gallery above reflects the current bounded support matrix:
.mmd sources and deterministic .svg outputs in samples/./acceptance/.