Text to Flowchart

Type or paste Mermaid syntax and get a live diagram — flowchart, sequence, class, and more. Export to SVG, PNG, or draw.io XML. 🔒 100% local — nothing is uploaded

Examples:

Mermaid syntax

Preview

Theme

Your diagram will appear here.

PNG export requires a modern browser. draw.io XML can be imported via File → Import From → XML in draw.io / diagrams.net.

How it works

This tool runs Mermaid.js entirely inside your browser — your text never leaves your device.

1. Write Mermaid syntaxType or paste a diagram definition using Mermaid's simple text notation. Use the type tabs or examples to get started in seconds.

2. Live previewThe diagram re-renders automatically as you type (with a short debounce). Errors are shown inline so you can fix them immediately.

3. Export your diagramDownload as SVG (vector, scales to any size), PNG (raster image for presentations), or draw.io XML (editable in diagrams.net).

4. Local onlyEverything runs in your browser via CDN scripts. No account, no sign-up, no server — your diagrams stay private.

Mermaid syntax quick reference

Syntax	What it produces
flowchart TD	Top-down flowchart (TD = top-down, LR = left-right, RL, BT)
A[Label]	Rectangle node named A with text "Label"
B(Label)	Rounded rectangle (stadium) node
C{Label}	Diamond / decision node
D((Label))	Circle node
A --> B	Arrow from A to B (solid)
A -->\|text\| B	Arrow with label text
A --- B	Line without arrowhead
A -.-> B	Dotted arrow
subgraph Title ... end	Group nodes in a labeled box
sequenceDiagram	Sequence diagram header
Alice->>Bob: Message	Solid arrow message in sequence diagram
Bob-->>Alice: Reply	Dotted arrow message (return)
classDiagram	UML class diagram header
stateDiagram-v2	State machine diagram
erDiagram	Entity-relationship diagram
gantt	Gantt / timeline chart

Frequently asked questions

What is Mermaid syntax and why should I use it?: Mermaid is a lightweight text-based diagramming language inspired by Markdown. Instead of dragging and dropping shapes, you describe your diagram in plain text — for example A --> B draws an arrow from node A to node B. This makes diagrams easy to version-control, write in any text editor, and generate programmatically. Mermaid is now natively supported in GitHub, GitLab, Notion, Obsidian, and many other tools, so your text diagram is instantly portable across platforms.
What diagram types does this tool support?: This tool supports all core Mermaid diagram types: flowchart (the classic box-and-arrow process diagram), sequenceDiagram (shows message flow between actors over time), classDiagram (UML class relationships), stateDiagram-v2 (state machines), erDiagram (entity-relationship for databases), and gantt (project timeline). Click the tabs above the editor for a starter template for each type.
How do I export and use the draw.io XML?: Click "draw.io XML" to download an .xml file, or "Copy XML" to copy it to your clipboard. In draw.io / diagrams.net (the free desktop or web app), go to File → Import From → XML (or Extras → Edit Diagram) and paste the XML. Your diagram will appear as fully editable shapes. Note: because draw.io's native format differs from Mermaid's render graph, the exported XML uses a flow-compatible mxGraph encoding — you may want to rearrange the auto-layout after importing.
Is my diagram text sent to any server?: No. Everything runs inside your browser using locally executed JavaScript. The Mermaid library is loaded once from a CDN (jsdelivr.net) on page load, but after that all rendering happens on your device. Your diagram text is stored locally in your browser's memory and — if you have made edits — optionally in your browser's IndexedDB so it survives a page refresh. Nothing is ever sent to Knackpad's servers or any third party.
Why is my diagram showing a parse error?: Mermaid syntax is whitespace-sensitive. The most common mistakes are: (1) missing the diagram type keyword on the first line (e.g. flowchart TD); (2) using special characters in node labels without wrapping them in quotes — try A["Label with (parens)"]; (3) using reserved Mermaid keywords as node IDs — rename the node; (4) forgetting to indent subgraph contents. The error message shown below the editor will usually point to the offending line.
What is the difference between SVG and PNG export?: SVG (Scalable Vector Graphics) is a resolution-independent format — it looks sharp at any zoom level and can be edited in Figma, Illustrator, or a text editor. It is the best choice for documents, web pages, or further editing. PNG is a raster image, best for embedding in presentations (PowerPoint, Google Slides) or apps that do not support SVG. For large diagrams, use SVG; for quick sharing in slides, use PNG.