Agentic Mermaid — beautiful diagrams, made with your agent
Skip to content
Menu
Beautiful diagrams, made with your agent.
Use with an agent<br>Try editor<br>Install locally
15 diagram families
16 built-in styles
20 palettes
JSON custom styles
SVG, PNG, ASCII and Unicode output
Verified source before export
watercolor · paper — Flowchart (1/9)
Open in editor
watercolor · paper — Flowchart
Flowchart in Watercolor and PaperBuild-time render: Checkout service — same source as the previous slide, style watercolor, palette paper, seed 4.
Client
Services
Data<br>Auth#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="GW to Auth" />Cat#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="GW to Cat" />Ord#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="GW to Ord" />S#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Auth to S" />C#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Cat to C" />DB#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Cat to DB" />DB#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Ord to DB" />DB#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="W to DB" />GW#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="UI to GW" />Q#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Ord to Q" />W#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Q to W" /><br>Web app
API gateway
Auth
Catalog
Orders
Queue
Fulfilment worker
Sessions
Cache
Postgres
publication-figure · github-light — Flowchart
Flowchart in Report Figure and GitHub LightBuild-time render: Checkout service — same source as the previous slide, style publication-figure, palette github-light, seed 0.
CLIENT
SERVICES
DATA<br>Auth#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="GW to Auth" />Cat#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="GW to Cat" />Ord#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="GW to Ord" />S#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Auth to S" />C#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Cat to C" />DB#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Cat to DB" />DB#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Ord to DB" />DB#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="W to DB" />GW#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="UI to GW" />Q#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Ord to Q" />W#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Q to W" /><br>Web app
API gateway
Auth
Catalog
Orders
Queue
Fulfilment worker
Sessions
Cache
Postgres
ops-schematic · tokyo-night — Flowchart
Flowchart in Compact Trace Map and Tokyo NightBuild-time render: Checkout service — same source as the previous slide, style ops-schematic, palette tokyo-night, seed 8.
CLIENT
SERVICES
DATA<br>Auth#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="GW to Auth" />Cat#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="GW to Cat" />Ord#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="GW to Ord" />S#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Auth to S" />C#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Cat to C" />DB#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Cat to DB" />DB#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Ord to DB" />DB#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="W to DB" />GW#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="UI to GW" />Q#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Ord to Q" />W#0" data-role="edge" role="graphics-symbol" aria-roledescription="relation" aria-label="Q to W" /><br>WEB APP
API GATEWAY
AUTH
CATALOG
ORDERS
QUEUE
FULFILMENT WORKER
SESSIONS
CACHE
POSTGRES
hand-drawn · catppuccin-latte — Timeline
Timeline in Hand-drawn and Catppuccin LatteBuild-time render: Timeline — Timeline, style hand-drawn, palette catppuccin-latte, seed 3.
Product roadmap
Foundation
Launch
2024 Q1
Prototype
Parser coverage
2024 Q2
Public...