Mermaid Diagram & Flowchart Editor

Mermaid lets you draw diagrams by writing text instead of dragging boxes. Because the source is plain text, diagrams can live in Git next to your code, be reviewed in pull requests and be rendered directly by GitHub, GitLab, Notion and many documentation tools. This editor gives you a live preview while you write.

How to use it

1. Choose a diagram type or start from an example.
2. Write or edit the Mermaid code; the preview updates as you type.
3. Export the diagram as an image or copy the code into your Markdown.

Example flowchart

flowchart TD
  A[User submits form] --> B{Valid?}
  B -- Yes --> C[Save to database]
  B -- No --> D[Show errors]
  C --> E[Send confirmation email]

This renders a top-down flowchart with a decision diamond and two branches.

Diagram types

• flowchart: processes and decision trees. Directions TD, LR, BT and RL.
• sequenceDiagram: messages between services or actors over time, ideal for API flows.
• classDiagram: classes, attributes and relationships.
• erDiagram: database tables and relationships.
• gantt: project schedules with tasks and dependencies.
• stateDiagram, pie, journey and mindmap.

Tips

• In GitHub Markdown, wrap the code in a fenced block marked mermaid and it renders automatically.
• Put labels containing brackets or special characters in quotes.
• Keep diagrams small; split large systems into several diagrams.
• Syntax errors stop rendering, so check the line reported in the error message.