Mermaid Diagram Editor
Create flowcharts, sequence diagrams, ER diagrams, Gantt charts, and more from text.
Templates
Enter code to see the diagram
Quick Reference
Flowchart
graph TD / graph LRTD=top-down, LR=left-right
Node Shapes
[rect] (round) {{diamond}}Bracket type defines shape
Arrows
--> / ---> / -..->solid / long / dotted
Sequence
A->>B: messageSolid arrow with label
Labels
A -->|text| BAdd text on arrow
Subgraph
subgraph title ... endGroup nodes together
• Diagram auto-refreshes 0.5 seconds after you stop typing
• SVG is vector format (stays sharp at any zoom), PNG exports at 2x resolution
• Dark mode automatically applies a dark theme to diagrams
What is Mermaid?
Mermaid is a text-based diagramming tool that lets you create diagrams and charts using simple syntax. Without any graphic editor, you can create flowcharts, sequence diagrams, ER diagrams, Gantt charts, pie charts, mind maps, and more. It is natively supported by GitHub, Notion, GitLab, and widely used in technical documentation and engineering blogs.
Supported Diagram Types
| Type | Keyword | Use Case |
|---|---|---|
| Flowchart | graph TD | Process flows, decision trees |
| Sequence | sequenceDiagram | API calls, system communication |
| Class | classDiagram | Object relationships, class hierarchy |
| ER | erDiagram | Database table relationships |
| Gantt | gantt | Project scheduling |
| Pie | pie | Proportions, market share |
| State | stateDiagram-v2 | State machines, lifecycles |
| Mind Map | mindmap | Brainstorming, idea organization |
| Git Graph | gitGraph | Branch strategy, Git workflow |
Tips
- GitHub automatically renders Mermaid code blocks in README files
- Use /mermaid blocks in Notion to embed diagrams
- Export as SVG for crisp display at any resolution
- Set direction with TD (top-down), LR (left-right), BT (bottom-top), RL (right-left)
FAQ
I don't know Mermaid syntax. Can I still use this?▼
Click any template to load example code. Modifying the examples is the quickest way to learn the syntax.
Should I download SVG or PNG?▼
SVG is a vector format that stays sharp at any size, ideal for web and docs. PNG is better for slides and social media sharing.
Is this the same syntax used in GitHub?▼
Yes, identical. Copy the code into a ```mermaid code block in GitHub markdown and it will render the same diagram.
My diagram is not rendering▼
There may be a syntax error. Check the error message and refer to the templates for correct syntax.
What is Mermaid Diagram Editor?
Create diagrams using Mermaid text syntax — flowcharts, sequence, ER, Gantt, pie charts, mind maps, and more. Live preview with the same syntax used in GitHub and Notion. Export as SVG or PNG.