MarkdownNote
Back to Home
Mermaid Diagram Editor
Create flowcharts, sequence diagrams, and more with live preview
About the Mermaid Diagram Editor
Create diagrams from text with this free online Mermaid editor. Write Mermaid syntax on the left and see the diagram render live on the right — no drawing tools, no dragging boxes around.
Start from built-in templates for flowcharts, sequence diagrams, class diagrams, state diagrams, ER (entity-relationship) diagrams, Gantt charts, pie charts and mind maps. Zoom the preview, then export the diagram as PNG or SVG, or copy it as a Markdown code block for GitHub, GitLab, Notion or Obsidian, which render Mermaid natively.
How to use Mermaid Editor
- Pick a template. Choose Flowchart, Sequence, Class, State, ER, Gantt, Pie or Mind Map — or start typing.
- Edit the code. Change nodes, arrows and labels; the preview updates live.
- Export. Download as PNG or SVG, or copy as a Markdown code block.
Features
- Live preview
- 8 diagram templates
- Export to PNG and SVG
- Copy as Markdown ```mermaid block
- Zoom controls
- Runs in your browser
Frequently asked questions
What is Mermaid?
Mermaid is a text-based diagram language. You describe the diagram in a few lines of code and it is drawn automatically. GitHub, GitLab, Notion and Obsidian render Mermaid code blocks.
How do I make a flowchart online?
Choose the Flowchart template, edit the nodes (for example A[Start] --> B{Decision}) and export the result as PNG or SVG.
Can I use the diagram in a GitHub README?
Yes. Click “Copy as Markdown” and paste the ```mermaid block into your README — GitHub renders it automatically.
Is it free?
Yes. It is completely free, with no sign-up, no watermark and no usage limits.