📊Mermaid Diagram Editor
Draw flowcharts, sequence diagrams, Gantt charts, class diagrams, and pie charts from text code. Embed-ready for GitHub README, Notion, Obsidian. Download SVG/PNG.
How to use
- 1Pick a sample to start from.
- 2Edit code on the left — the preview on the right updates live.
- 3Download as SVG or PNG.
FAQ
What is Mermaid?+
An open-source tool for drawing diagrams from text. Since you write code instead of clicking, it's easy to version, copy, and edit — popular among developers and technical writers.
Can I embed in GitHub READMEs?+
Yes. Since 2022, GitHub auto-renders ```mermaid code blocks in Markdown. Generate code here and paste it directly into your README.
What about Notion or Obsidian?+
Obsidian renders code blocks natively. Notion needs a plugin. The most compatible approach is to export PNG and embed the image.
Which diagrams are supported?+
10+ types — flowchart, sequenceDiagram, gantt, classDiagram, stateDiagram, ER diagram, pie chart, etc.
How do I use these in PowerPoint or Keynote?+
Download as PNG and insert as an image. We export at 2x resolution, so it stays crisp in print.
Can I do complex designs?+
Mermaid favors quick, clear diagrams. For fully custom designs, look at draw.io, Figma, or Excalidraw.