Online tool · No install
Online Mermaid Editor
Write Mermaid text on the left, get the diagram on the right. Edit a line and watch it redraw, then export SVG or PNG, build a share link that packs the code into the URL hash, or hit Focus mode to fill the screen with the diagram. Your code and drafts live only in your browser’s localStorage — nothing is sent to a server.
Mermaid syntax 0
Preview
The Mermaid engine downloads on first render (about 194 KB gzipped); each chart type then pulls only its own chunks.
Shortcuts: Ctrl+Enter render · Ctrl+S download SVG · Esc exit focus · auto-redraws 250 ms after you stop typing
Why draw diagrams from text instead of a drag-and-drop tool
Mermaid turns a diagram into plain text: the syntax describing nodes and relations goes straight into Git, survives code review, renders inside Markdown, READMEs and docs sites, and changing one branch doesn’t mean redrawing the whole picture. For anyone who lives in an editor, typing A --> B beats aligning a dozen boxes by hand.
The cost is remembering the syntax, so this page keeps a skeleton for every common diagram below — paste it in and change a few lines. The renderer is official Mermaid, so the syntax matches what you get on GitHub, GitLab, Obsidian and Typora.
Four steps
- Pick an example above or just type on the left. With “Auto-render” on it redraws every 250 ms; turn it off and press Ctrl+Enter to render manually.
- On an error, the exact Mermaid message and line number appear under the preview — follow the line number back into the editor. To study a big diagram, press “Focus mode”: header, title and all the long text below fold away so only the editor and preview fill the screen; taller diagrams scroll inside, and Esc returns you to the same scroll position.
- Choose “Download SVG” to embed it in a page, “Download PNG” for docs or slides (scale and background are in the two dropdowns).
- To show someone, press “Copy share link” — the code is encoded in the URL’s
#fragment, which never reaches server logs; a draft also saves to locallocalStorageand restores next visit.
Supported chart types
| Chart | Keyword | Good for |
|---|---|---|
| Flowchart | flowchart TD / LR | Branching logic, approval chains, call paths |
| Sequence | sequenceDiagram | API call order, auth flows, cache hit vs miss |
| Class | classDiagram | Object relations, module deps, field design |
| State | stateDiagram-v2 | State machines, order/task lifecycles |
| Entity-relationship | erDiagram | Table structure and one-to-many relations |
| Gantt | gantt | Scheduling, milestones, iteration plans |
| Pie | pie | Share-of-total comparisons, e.g. traffic sources |
| Mindmap | mindmap | Requirement breakdown, knowledge maps |
| Timeline | timeline | Version changes, event sequences |
| User journey | journey | Experience scoring, friction points |
| Quadrant | quadrantChart | Prioritisation, two-axis evaluation |
Measured sizes (not guesses): the engine base is 20 chunks, 736 KB (194 KB gzipped). This page draws an example on load, so you pay that once on first render; switching to a sequence chart adds 116 KB, other types pull a few more each — drawing all 11 is about 1.4 MB (406 KB gzipped). Chunk filenames carry content hashes, so repeat visits hit the local cache and only the HTML is new. “Auto-render” only affects whether it redraws as you keep typing; the first render is unavoidable.
Syntax cheatsheet
Every block below pastes straight into the editor. If a node label contains parentheses or quotes, wrap it in double quotes to be safe: A["text (with) parens"].
Flowchart: direction, node shapes, conditions
TD top-down, LR left-right. Boxes [ ], rounded ( ), diamonds { }, parallelograms / /, groups via subgraph.
flowchart LR
U[User] --> S{Cache hit?}
S -- yes --> C[Return]
S -- no --> O[Fetch origin] --> W[Write cache] --> C
subgraph Edge
C
W
end
Sequence: who calls whom, sync or async
->> solid arrow, -->> dashed return, activate draws a lifeline, alt / else branches, loop repeats, note over annotates.
sequenceDiagram
autonumber
participant B as Browser
participant P as Pages
B->>P: GET /en/wallpaper/2026-10-06/
activate P
P-->>B: 200 HTML (edge cache hit)
deactivate P
alt First visit
P->>P: Build static page
end
note over B,P: No backend here; diagrams render entirely client-side
Class and ER: structure and relations
classDiagram
class Site { +String name +render() }
class Cat { +String name +Link[] web }
class Link { +String title +String url }
Site --> Cat : contains
Cat "1" --> "*" Link : lists
Link ..> Site : back home
erDiagram
CAT ||--|{ WEB : groups
CAT { string name }
WEB { string title string url }
USER ||--o{ CUSTOM : overrides
Gantt: dateFormat first, then tasks
section groups tasks. A task row is status, id, start, duration; start can be a date or after someId.
gantt
title Start page roadmap
dateFormat YYYY-MM-DD
section Content
Wallpaper snapshot :done, a1, 2026-09-21, 8d
Bilingual archive :done, a2, after a1, 6d
section Tools
Mermaid editor :active, b1, 2026-10-06, 5d
Cheatsheet & FAQ :b2, after b1, 3d
State: entry, transitions, exit
stateDiagram-v2 [*] --> Collapsed Collapsed --> Expanded : click card Expanded --> Collapsed : click elsewhere Expanded --> Editing : click pencil Editing --> Expanded : save Collapsed --> [*]
Mindmap, timeline, journey, quadrant, pie
mindmap
root((Start page))
Traffic
Wallpapers
Tools
Retention
Custom sites
Local drafts
timeline title Version highlights 2026-09 : Same-origin sites : Weather via Open-Meteo 2026-10 : Bilingual wallpapers : Editable site rows
journey
title A first-time visitor
section Open
See today’s wallpaper: 5: Visitor
Find a familiar site: 3: Visitor
section Customize
Add own site: 4: Visitor
Lost on another device: 1: Visitor
quadrantChart title Feature priority x-axis Low cost --> High cost y-axis Low reach --> High reach quadrant-1 Do first quadrant-2 Slow path quadrant-3 Skip quadrant-4 Depends Mermaid tool: [0.32, 0.66] Wallpaper favs: [0.2, 0.3]
pie showData title Traffic sources "Search" : 42 "Direct" : 31 "Referral" : 17 "Other" : 10
Export: SVG or PNG
SVG keeps text nodes, scales without blurring, and is usually tens of KB — best for pages, docs sites and Markdown repos; the downside is that some chat apps can’t preview it inline. PNG is universally viewable; this page exports at 2× by default (1x/2x/3x selectable) and lets you pick transparent, white or dark background, so pasting into slides or tickets won’t leave a white halo.
Export runs entirely through the browser’s canvas + toBlob, with no server involved, so internal system names in a diagram never leave your machine.
One measured exception: user-journey (journey) labels still use foreignObject HTML, which taints the canvas and blocks pixel export — use “Download SVG” for those. The other ten disable htmlLabels, so PNG works.
FAQ
Do I need to install anything or sign up?
No. The page is static files and rendering happens in your browser; the Mermaid engine loads on first render, then uses HTTP caching.
Where is my draft stored, and does it survive a new device?
In your browser’s localStorage under key mermaidDraft; clearing browsing data loses it. For long-term saving use “Copy code” or “Copy share link” and keep it in your own repo or notes.
Why is the first render a bit slow?
The engine isn’t downloaded yet: the base is about 736 KB (194 KB gzipped, 19 chunks), and each chart type pulls its own modules (mostly a few tens of KB). After that, renders within the session take hundreds of milliseconds; the status line shows each render’s real timing.
What do I fix on a Parse error?
Three causes cover most: full-width punctuation slipped into the syntax, using reserved word end as a node name in flowchart/stateDiagram, or gantt’s dateFormat not matching the actual dates. The error carries a line number — go straight to it in the editor.
Is the share link safe?
The code is Base64-encoded in the URL hash fragment, which is never sent to the server, so it stays out of access logs. But it does sit in your own browser history, so for sensitive content paste plain code instead.
Does it match how GitHub renders Mermaid?
It’s the same official parser, so the syntax matches. GitHub pins its own Mermaid build and can lag a version or two on newer diagram types; before pasting into a README, favour the long-stable flowchart, sequence, class and er syntax.
What tools come next
This is a slot for the user’s choice, not body copy. Candidates: a regex tester with a common pattern library, JSON / YAML convert and format, a QR-code generator, a CRON expression explainer. Each would be its own static page that loads dependencies only on that page, with a single entry link from the home. Links and copy land once these are chosen.
About Start
This page is one of the online tools from Start, a new-tab page with no account and no extension: it takes the daily Bing image as its background, has a multi-engine search box, Open-Meteo weather and air quality, lays your frequent sites into Bento cards, and lets you add your own sites and export them as JSON. The day-by-day wallpaper archive is at /en/wallpaper/.