Mermaid Live Editor — FlowChart & Diagram Editor
Write Mermaid markdown-like syntax and see flowcharts, sequence diagrams, ER diagrams, Gantt charts, and more render live. Runs entirely in your browser — nothing you type is ever uploaded.
Related tools
Create flowcharts, UML, ER diagrams, network diagrams, and org charts with a full-featured diagram editor, entirely in your browser.
Design and visualize database schemas with an interactive diagram editor, entirely in your browser.
Write rich, structured content with a block-style editor and get clean JSON output, entirely in your browser.
Write and edit Markdown in a live WYSIWYG editor with tables, task lists, code blocks, and slash commands, entirely in your browser.
Sketch diagrams, wireframes, and hand-drawn-style illustrations on a virtual whiteboard, entirely in your browser.
Visualize, build, and test regular expressions with a railroad-diagram editor.
About Mermaid Live Editor — FlowChart & Diagram Editor
Mermaid Live Editor lets you write diagrams as text — a markdown-like syntax for flowcharts, sequence diagrams, ER diagrams, Gantt charts, class diagrams, and more — and see them render live as you type. The build here is self-hosted directly from the mermaid-js/mermaid-live-editor project's own source and runs entirely client-side: nothing you type is uploaded to any server by this site.
How to use
- Type or paste Mermaid syntax into the code editor, or pick a sample diagram to start from.
- Watch the diagram render live in the preview pane as you edit.
- Use the toolbar to switch diagram type, toggle a hand-drawn look, and export as SVG or PNG — the current diagram state is encoded directly in the URL, so you can share or bookmark a link to reopen it.
Frequently asked questions
- Is my diagram code uploaded anywhere?
- No. Parsing and rendering happen entirely in your browser — nothing you type is sent to a server by this site. The diagram state is compressed into the page URL itself, not stored in a database, so links can be shared without a server round-trip.
- Does it ever make network requests?
- Only if you explicitly use its GitHub Gist import feature to load a diagram from a gist URL, which fetches from api.github.com. Nothing else here calls out to a network by default.
- What diagram types are supported?
- Flowcharts, sequence, class, state, ER, Gantt, pie, mindmap, timeline, Git graphs, and many more — the full set Mermaid supports.