Every supported family rendered with a named style and palette.
Each card uses one supported family, one named style, and one palette. Agents pass this as render options; they do not edit Mermaid source just to change appearance.
The Mermaid source stays the same; the render call supplies watercolor as the style and paper as the palette.
Render options style: ['watercolor', 'paper'], seed: 4
flowchart TD
A[Start] --> B{Decision?}
B -->|Yes| C[Do the thing]
B -->|No| D[Skip it]
C --> E[End]
D --> Estyle: ['watercolor', 'paper'], seed: 4.The Mermaid source stays the same; the render call supplies chalkboard as the style and dusk as the palette.
Render options style: ['chalkboard', 'dusk'], seed: 2
stateDiagram-v2
[*] --> Idle
Idle --> Processing: start
Processing --> Complete: done
Processing --> Failed: error
Failed --> Idle: retry
Complete --> [*]style: ['chalkboard', 'dusk'], seed: 2.The Mermaid source stays the same; the render call supplies publication-figure as the style and github-light as the palette.
Render options style: ['publication-figure', 'github-light'], seed: 0
sequenceDiagram
participant User
participant App
participant API
User->>App: Click export
App->>API: Render SVG
API-->>App: SVG string
App-->>User: Downloadstyle: ['publication-figure', 'github-light'], seed: 0.The Mermaid source stays the same; the render call supplies hand-drawn as the style and catppuccin-latte as the palette.
Render options style: ['hand-drawn', 'catppuccin-latte'], seed: 3
timeline
title Product roadmap
section Foundation
2024 Q1 : Prototype
: Parser coverage
section Launch
2024 Q2 : Public editor
: SVG exportstyle: ['hand-drawn', 'catppuccin-latte'], seed: 3.The Mermaid source stays the same; the render call supplies patent-drawing as the style and paper as the palette.
Render options style: ['patent-drawing', 'paper'], seed: 6
classDiagram
class Renderer {
<<abstract>>
+render(source) string
}
class SVGRenderer {
+render(source) string
}
class RenderPipeline {
+run(source) string
}
Renderer <|-- SVGRenderer
RenderPipeline *-- SVGRenderer : ownsstyle: ['patent-drawing', 'paper'], seed: 6.The Mermaid source stays the same; the render call supplies risograph as the style and salmon as the palette.
Render options style: ['risograph', 'salmon'], seed: 5
erDiagram
CUSTOMER {
string id PK
string email
}
ORDER {
string id PK
date created
}
LINE_ITEM {
string id PK
int quantity
}
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : containsstyle: ['risograph', 'salmon'], seed: 5.The Mermaid source stays the same; the render call supplies status-dashboard as the style and github-dark as the palette.
Render options style: ['status-dashboard', 'github-dark'], seed: 0
journey
title Editor adoption
section Try
Open editor: 5: User
Load example: 4: User, Developer
section Share
Copy URL: 5: User
Export SVG: 4: Developerstyle: ['status-dashboard', 'github-dark'], seed: 0.The Mermaid source stays the same; the render call supplies blueprint as the style and nord as the palette.
Render options style: ['blueprint', 'nord'], seed: 1
architecture-beta
group app(cloud)[Application]
group data(database)[Data]
service web(server)[Web App] in app
service api(server)[API] in app
service db(database)[Postgres] in data
web:R --> L:api
api:R --> L:dbstyle: ['blueprint', 'nord'], seed: 1.The Mermaid source stays the same; the render call supplies accessible-high-contrast as the style and zinc-light as the palette.
Render options style: ['accessible-high-contrast', 'zinc-light'], seed: 0
xychart
title "Weekly renders"
x-axis [Mon, Tue, Wed, Thu, Fri]
y-axis "Renders" 0 --> 100
bar [25, 42, 58, 74, 88]
line [18, 35, 52, 70, 95]style: ['accessible-high-contrast', 'zinc-light'], seed: 0.The Mermaid source stays the same; the render call supplies pen-and-ink as the style and paper as the palette.
Render options style: ['pen-and-ink', 'paper'], seed: 7
pie showData
title Export requests by format
"SVG" : 42
"PNG" : 28
"ASCII" : 18
"Unicode" : 12style: ['pen-and-ink', 'paper'], seed: 7.The Mermaid source stays the same; the render call supplies ops-schematic as the style and nord-light as the palette.
Render options style: ['ops-schematic', 'nord-light'], seed: 8
quadrantChart
title Feature priorities
x-axis Low impact --> High impact
y-axis Low effort --> High effort
quadrant-1 Plan carefully
quadrant-2 Big bets
quadrant-3 Defer
quadrant-4 Quick wins
SVG export: [0.78, 0.28]
MCP setup: [0.62, 0.72]
Palette polish: [0.35, 0.24]style: ['ops-schematic', 'nord-light'], seed: 8.The Mermaid source stays the same; the render call supplies architectural-plan as the style and solarized-light as the palette.
Render options style: ['architectural-plan', 'solarized-light'], seed: 9
gantt
title Release train
dateFormat YYYY-MM-DD
excludes weekends
section Build
Completed task :done, des1, 2024-01-08, 2024-01-10
Active task :active, des2, 2024-01-11, 3d
Future task :des3, after des2, 5d
section Ship
Crit review :crit, rev1, after des3, 2d
Release :milestone, m1, after rev1, 0dstyle: ['architectural-plan', 'solarized-light'], seed: 9.The Mermaid source stays the same; the render call supplies hand-drawn as the style and paper as the palette.
Render options style: ['hand-drawn', 'paper'], seed: 10
mindmap
root((Agent-native release))
discovery[Discovery]
::icon(fa fa-book)
:::urgent large
evidence["`**Evidence** across
interviews, benchmarks, and Unicode naïve café`"]
constraints{{Constraints}}
Security
Determinism
delivery(Delivery)
beta))Beta signal((
launch)Launch cloud(
quality[Quality gates]
Parser round-trip
SVG identity
Terminal width
Ecosystem
Mermaid parity
Terminal toolsstyle: ['hand-drawn', 'paper'], seed: 10.The Mermaid source stays the same; the render call supplies ops-schematic as the style and github-light as the palette.
Render options style: ['ops-schematic', 'github-light'], seed: 11
---
title: Release train with backport
config:
gitGraph:
mainBranchName: main
mainBranchOrder: 0
showBranches: true
showCommitLabel: true
rotateCommitLabel: true
---
gitGraph LR:
accTitle: Release history with feature merge and backport
accDescr: Develop and release branches diverge, main merges develop, and release cherry-picks the merge
commit id:"ROOT" tag:"v1.0.0" msg:"Foundation"
branch develop order:2
commit id:"API" type:HIGHLIGHT tag:"beta" msg:"Build API"
branch release order:3
commit id:"RC" type:REVERSE tag:"rc.1" msg:"Cut release candidate"
checkout develop
commit id:"UI" msg:"Finish interface"
checkout main
commit id:"HOTFIX" type:REVERSE msg:"Patch production"
merge develop id:"MERGE" tag:"v2.0.0" type:HIGHLIGHT
checkout release
cherry-pick id:"MERGE" parent:"UI" tag:"backport"
commit id:"PATCH" msg:"Verify release"style: ['ops-schematic', 'github-light'], seed: 11.The Mermaid source stays the same; the render call supplies watercolor as the style and catppuccin-latte as the palette.
Render options style: ['watercolor', 'catppuccin-latte'], seed: 12
radar-beta
title Model comparison
axis speed["Speed"], accuracy["Accuracy"], cost["Cost"]
axis latency["Latency"], context["Context"], safety["Safety"]
curve a["Model A"]{4, 5, 3, 4, 4, 5}
curve b["Model B"]{5, 3, 4, 3, 5, 3}
graticule polygon
max 5style: ['watercolor', 'catppuccin-latte'], seed: 12.The Mermaid source stays the same; the render call supplies hand-drawn as the style and solarized-light as the palette.
Render options style: ['hand-drawn', 'solarized-light'], seed: 13
sankey-beta
Coal,Electricity,60
Gas,Electricity,80
Solar,Electricity,40
Electricity,Homes,120
Electricity,Industry,60style: ['hand-drawn', 'solarized-light'], seed: 13.The Mermaid source stays the same; the render call supplies architectural-plan as the style and paper as the palette.
Render options style: ['architectural-plan', 'paper'], seed: 14
C4Container
title Internet banking
Person(customer, "Customer", "Checks balances and makes payments")
System_Boundary(bank, "Internet banking") {
Container(web, "Web application", "TypeScript", "Customer portal")
Container(api, "API", "Node.js", "Accounts and payments")
ContainerDb(db, "Accounts", "PostgreSQL", "Balances and transactions")
}
Rel(customer, web, "Uses", "HTTPS")
Rel(web, api, "Calls", "JSON/HTTPS")
Rel(api, db, "Reads and writes", "SQL")style: ['architectural-plan', 'paper'], seed: 14.The Mermaid source stays the same; the render call supplies ops-schematic as the style and github-light as the palette.
Render options style: ['ops-schematic', 'github-light'], seed: 17
packet
title UDP datagram
+16: "Source port"
+16: "Destination port"
+16: "Length"
+16: "Checksum"
+32: "Payload"style: ['ops-schematic', 'github-light'], seed: 17.The Mermaid source stays the same; the render call supplies status-dashboard as the style and catppuccin-latte as the palette.
Render options style: ['status-dashboard', 'catppuccin-latte'], seed: 18
kanban
todo[To do]
packet[Packet family]@{ assigned: "Maya", priority: "High" }
doing[In progress]
kanban[Kanban family]@{ assigned: "Alex", ticket: "AM-409" }
done[Done]
research[Community research]style: ['status-dashboard', 'catppuccin-latte'], seed: 18.The Mermaid source stays the same; the render call supplies patent-drawing as the style and paper as the palette.
Render options style: ['patent-drawing', 'paper'], seed: 15
requirementDiagram
direction LR
requirement reliable {
id: R1
text: Requests retain authored meaning
risk: high
verifymethod: test
}
functionalRequirement edits {
id: R2
text: Typed edits preserve all relationships
risk: medium
verifymethod: inspection
}
element suite {
type: conformance suite
}
reliable - contains -> edits
suite - verifies -> editsstyle: ['patent-drawing', 'paper'], seed: 15.The Mermaid source stays the same; the render call supplies publication-figure as the style and github-light as the palette.
Render options style: ['publication-figure', 'github-light'], seed: 19
treemap
title Product investment
"Build"
"Engineering": 60
"Design": 25
"Learn"
"Research": 30
"Analytics": 15style: ['publication-figure', 'github-light'], seed: 19.The Mermaid source stays the same; the render call supplies architectural-plan as the style and paper as the palette.
Render options style: ['architectural-plan', 'paper'], seed: 20
ishikawa
Delayed release
Process
Manual approvals
Unclear acceptance
People
Shared ownership
Tooling
Slow builds
Cold caches
Environment
Unstable test datastyle: ['architectural-plan', 'paper'], seed: 20.The Mermaid source stays the same; the render call supplies blueprint as the style and nord-light as the palette.
Render options style: ['blueprint', 'nord-light'], seed: 16
block
columns 3
client["Client"] space api["API"]
block:data:3
columns 2
primary[("Primary")] replica[("Replica")]
primary --> replica
end
client --> api
api --> primarystyle: ['blueprint', 'nord-light'], seed: 16.The Mermaid source stays the same; the render call supplies publication-figure as the style and github-light as the palette.
Render options style: ['publication-figure', 'github-light'], seed: 0
eventmodeling
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded
tf 04 rmo CartItems
tf 05 ui CartUIstyle: ['publication-figure', 'github-light'], seed: 0.The Mermaid source stays the same; the render call supplies hand-drawn as the style and dracula as the palette.
Render options style: ['hand-drawn', 'dracula'], seed: 17
zenuml
title Checkout
Buyer as Customer
API
Store
Buyer->API.placeOrder() {
Store.reserve()
if (inStock) {
return confirmation
} else {
return unavailable
}
}
API->Buyer: acceptedstyle: ['hand-drawn', 'dracula'], seed: 17.