Mermaid Chart Editor
Create, preview, and export Mermaid diagrams with live rendering and syntax error detection.
How it works
- 1
Choose a template or start typing
Select a diagram template from the dropdown or write Mermaid syntax directly in the editor.
- 2
See the live preview
The diagram renders automatically as you type. Syntax errors are shown with line numbers.
- 3
Fix errors automatically
Click the Auto Fix button to correct common syntax mistakes like wrong arrows or missing keywords.
- 4
Export your diagram
Download as SVG or PNG, copy the image to your clipboard, or copy the Mermaid source code.
Common use cases
Simple flowchart
graph TD A[Start] --> B{Decision} B -->|Yes| C[OK] B -->|No| D[Cancel]
Sequence diagram
sequenceDiagram Alice->>Bob: Hello Bob-->>Alice: Hi!
About This Tool
Write Mermaid diagram syntax and see the rendered result in real time. The editor highlights keywords, detects syntax errors with line-level feedback, and offers a one-click auto-fix for common mistakes like wrong arrow syntax, missing end keywords, and unclosed brackets.
Choose from ten starter templates -- flowcharts, sequence diagrams, class diagrams, state machines, ER diagrams, Gantt charts, pie charts, mindmaps, timelines, and git graphs -- or start from scratch. Export your finished diagram as SVG, PNG, copy the image to your clipboard, or copy the Mermaid source code.
All rendering happens in your browser using the official Mermaid library. Nothing is uploaded to any server.
More examples
Examples
Simple flowchart
Input
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[OK]
B -->|No| D[Cancel]Output
Rendered flowchart with decision diamond and two paths
Sequence diagram
Input
sequenceDiagram Alice->>Bob: Hello Bob-->>Alice: Hi!
Output
Rendered sequence diagram with message arrows
Frequently Asked Questions
- What is Mermaid?
- Mermaid is a JavaScript-based diagramming language that lets you create flowcharts, sequence diagrams, class diagrams, and more using simple text syntax. It is widely used in Markdown documents and documentation platforms.
- What diagram types are supported?
- Flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, mindmaps, timelines, and git graphs. Templates are provided for each type.
- Is my diagram data sent to a server?
- No. All rendering happens entirely in your browser using the official Mermaid library. Your data never leaves your device.
- What does the auto-fix button do?
- It applies rule-based corrections for common syntax mistakes: wrong arrow syntax, missing end keywords for subgraphs, spaces in node IDs, and other frequent errors.
- What export formats are available?
- You can download your diagram as SVG or PNG, copy the rendered image directly to your clipboard, or copy the Mermaid source code.