Diagram as Code
Renders Mermaid flowcharts, sequence diagrams and pie charts as you type with its own parser and layout, lists exactly which syntax it supports, and exports SVG or PNG.
Mermaid text on the left, the picture on the right, updating as you type. The parser, the layout and the renderer are this site’s own rather than the Mermaid library, which is why the supported grammar is listed on the page in full — three diagram types, and for each exactly the constructs that are read.
Mermaid code
Preview
Supported grammar (anything else is reported as an error with a line number)
Flowchart — graph / flowchart
- Directions TD, TB, LR, RL, BT
- Shapes [ ], ( ), ([ ]), [[ ]], [( )], (( )), > ], { }, {{ }}
- Lines -->, ---, -.->, -.-, ==>, ===
- Labels -->|text|, -- text -->, -. text .->, == text ==>
- A --> B --> C, A & B --> C
- subgraph name [title] … end (nesting allowed)
- style, classDef, class, :::className
- %% comments, ; separators
Not supported: click, linkStyle, direction, the <-->, --o and --x arrows, Markdown strings
Sequence — sequenceDiagram
- participant A as Name, actor B
- ->>, -->>, ->, -->, -x, --x, -), --)
- ->>+B / ->>-B, activate / deactivate
- Note left of · right of · over A,B
- loop, alt / else, opt … end
- autonumber
Not supported: par, critical, break, rect, box, create/destroy, links
Pie — pie
- pie [showData] [title Something]
- "name" : value
Class, state, ER, gantt, mindmap and the other diagram types are not drawn yet. There is a separate tool for Gantt charts.
How to use it
Start from an example
Flowchart, sequence and pie each have a sample that uses most of what the parser understands. Editing one is faster than writing from the syntax list.
Read the error by line number
Anything outside the supported grammar is refused with the line and what was wrong, rather than leaving a blank canvas for you to bisect.
Export or print
SVG keeps the text selectable and scales cleanly; PNG at 2× is the safe choice for a slide deck or a chat message.
Common questions
Which diagram types work?
Flowchart (graph / flowchart), sequenceDiagram and pie. Class, state, ER, gantt, gitGraph, mindmap and the rest are named in the error rather than failing vaguely — for a Gantt chart there is a separate tool on this site.
My diagram works on mermaid.live but not here
Likely a construct outside the list on the page — `click`, `linkStyle`, `direction` inside a subgraph, the `<-->`, `--o` and `--x` arrows, YAML front matter, or Markdown strings. The error names which one, and the list is the full contract.
Does Korean text lay out correctly?
Yes. Box widths are measured with CJK characters counted at full width, so a Korean label does not overflow its node the way it does in renderers that assume every character is half-width.
Is my diagram sent anywhere?
No. Parsing and rendering happen in the page, and the draft is kept in this browser. Nothing is uploaded, which matters when the diagram is your internal architecture.
Feed it from
Gantt Chart Builder
Turns a task table — typed in or pasted as CSV — into a Gantt chart on a day, week or month scale with dependency arrows, milestones, a today line and weekend shading, exported as SVG or PNG or printed.
Todo List
Keeps a checklist in your browser with due dates, tags and keyboard-first editing, exportable as Markdown.
Scratch Notepad
A plain-text scratchpad that saves as you type and survives a reload, with a word count.
Sprite Sheet Packer
Packs many images into one atlas and emits the CSS or JSON frame map alongside it.
Next
These accept what this tool produces, so the result can go straight in.
Gantt Chart Builder
Turns a task table — typed in or pasted as CSV — into a Gantt chart on a day, week or month scale with dependency arrows, milestones, a today line and weekend shading, exported as SVG or PNG or printed.
Markdown Editor
Edits Markdown with a live preview and exports the rendered HTML, with GFM tables and task lists.
SVG Optimiser
Removes editor cruft, collapses transforms and rounds path precision, showing the rendered diff.
Todo List
Keeps a checklist in your browser with due dates, tags and keyboard-first editing, exportable as Markdown.
Base64 Encoder & Decoder
Encodes and decodes Base64 and Base64URL for text or files, handling UTF-8 correctly.
Background Remover
Keys out a flat or single-colour background in OKLab and returns a transparent PNG, with a brush for fixing the edges.