Flowchart Editor
Visual Mermaid flowchart editing: drag on the canvas, auto layout, AI generation, one-click sharing and Markdown export.
Flowchart tutorials
FAQ
How do I draw a flowchart online and export Markdown?
Add nodes, drag to connect, double-click to edit text — the code panel generates Mermaid code live. Click Copy md block and paste into GitHub, Typora, Yuque or any Mermaid-compatible platform.
Why does the exported layout differ slightly from the canvas?
Mermaid syntax does not store node coordinates. Exported code is auto-laid-out by the Mermaid engine on any platform (this tool included) — the structure is identical but node placement may vary slightly. That is inherent to Mermaid.
Which Mermaid syntax is supported?
Common flowchart syntax: 5 node shapes (rectangle/rounded/diamond/stadium/circle), solid and dashed lines, arrows, edge labels, one level of subgraph grouping, and classDef colors. Unsupported syntax is reported with line numbers on import — content is never silently dropped.
Is any data uploaded to a server?
Canvas editing runs entirely in your browser; drafts and history stay in your device's localStorage. Only two things touch the network: AI generation (BYOK mode connects directly to the model provider; fallback mode is relayed by the backend and not stored) and sharing (the Mermaid source is stored on the backend to create the link, auto-expiring after 7 days).
How do I use AI flowchart generation?
Click AI generate and describe your process in a sentence or two; the AI renders it onto the canvas for further manual tweaks. Configure a model API key in Settings, or use the managed fallback quota.
How long do share links last? Will opening someone's share overwrite my canvas?
Share links are valid for 7 days by default. Opening a share loads it straight onto the canvas, but your current canvas is first snapshotted into History, so you can restore it anytime — nothing is lost.