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.