Write Mermaid diagram syntax on the left and see the live rendered diagram on the right. Supports flowcharts, sequence, class, ER and Gantt diagrams — export as SVG in one click.
Mermaid is an open-source JavaScript-based diagramming library that lets you create diagrams from a simple text-based syntax — no drawing tools required. Originally inspired by Markdown, Mermaid diagrams are written as plain text and rendered as SVG directly in the browser. This Mermaid editor lets you write, preview and export diagrams instantly without installing anything.
Mermaid is natively supported on GitHub, GitLab, Notion, Obsidian, Confluence and dozens of other platforms — making it the de-facto standard for embedding diagrams in documentation and README files.
This live Mermaid editor supports all major diagram types available in Mermaid v10.
The most commonly used diagram type. Use flowchart TD (top-down) or flowchart LR (left-right) to define the direction. Nodes are defined with brackets for different shapes: A[Rectangle], B(Rounded), C{Diamond}, D((Circle)). Edges use --> for arrows and --- for lines.
Model interactions between participants over time. Use sequenceDiagram, declare participants, and draw messages with ->> (solid arrow), -->> (dashed arrow) or -x (cross). Loops, alts and notes are also supported for documenting complex API flows.
Document object-oriented structures with classDiagram. Define classes, their attributes, methods and relationships (inheritance <|--, composition *--, aggregation o--). Essential for software architecture documentation and code reviews.
Entity-Relationship diagrams with erDiagram let you model database schemas visually. Define entities, their attributes with types and key constraints (PK, FK), and relationships with cardinality notation (||--o{, }|--|{, etc.).
Plan and visualize project timelines with gantt. Define sections, tasks with start dates and durations, and dependencies between tasks. Ideal for sprint planning, release scheduling and project management documentation.
GitHub, GitLab and many documentation platforms render Mermaid diagrams natively when placed inside a fenced code block labelled ```mermaid. Use this editor to draft your diagram, preview it, and paste the text directly into your README.
Class and ER diagrams let teams discuss system design without needing to share proprietary design files. Since Mermaid source is plain text, diagrams can be version-controlled alongside code — changes are visible in diffs, and diagrams stay in sync with the codebase.
Sequence diagrams are the standard way to document API call chains, authentication flows and event-driven systems. Write the diagram once, export the SVG, and embed it in Confluence, Notion or any wiki.
flowchart TD
A[Start] --> B{Valid?}
B -->|Yes| C[Process]
B -->|No| D[Error]
C --> E[End]
sequenceDiagram Client->>API: GET /users API->>DB: SELECT * DB-->>API: rows API-->>Client: 200 OK
classDiagram Animal <|-- Dog Animal : +String name Animal : +speak() Dog : +fetch()
erDiagram
USER {
int id PK
string email
}
POST {
int id PK
int userId FK
}
USER ||--o{ POST : writes
gantt title Sprint 1 dateFormat YYYY-MM-DD section Frontend Design :2024-01-01, 3d Build :2024-01-04, 5d section Backend API :2024-01-01, 7d
flowchart LR
A[Rectangle]
B(Rounded)
C{Diamond}
D((Circle))
A --> B --> C --> D
Mermaid is an open-source JavaScript library that converts text-based syntax into SVG diagrams in the browser. You write a diagram definition using a simple, Markdown-like syntax and Mermaid parses it and generates a vector graphic. No images are pre-made — diagrams are rendered dynamically from the text you write.
No. The Mermaid library is loaded automatically from a CDN when the page opens. You only need a modern browser — Chrome, Firefox, Edge or Safari. No account, no installation and no server-side processing is involved.
This editor supports all major Mermaid v10 diagram types: Flowchart (TD, LR, BT, RL directions), Sequence Diagram, Class Diagram, Entity-Relationship Diagram, Gantt Chart, State Diagram, Pie Chart, Journey and Git Graph. Use the template buttons in the toolbar to start from a working example.
Click Download SVG to save the diagram as a .svg file — SVG is a vector format that scales to any size without quality loss. Click Copy SVG to copy the raw SVG code to your clipboard, ready to paste into an HTML file, a design tool or a documentation platform.
Yes. GitHub natively renders Mermaid diagrams inside fenced code blocks. Simply paste your Mermaid syntax between triple backticks labelled mermaid:
```mermaidflowchart TD A --> B```
GitLab, Bitbucket, Notion, Obsidian and Confluence (with a plugin) also support Mermaid natively.
Mermaid syntax is strict. The most common causes are: missing keyword at the start (e.g. flowchart TD), special characters in node labels not wrapped in quotes (A["label with special chars (here)"]), incorrect arrow syntax, or mixing diagram types. The error message at the bottom of the editor indicates the problem line.
Yes. Mermaid supports inline styling via style statements and CSS classes via classDef. For example: classDef green fill:#16a34a,color:#fff followed by class A green applies that style to node A. You can also add %%{init: {'theme': 'forest'}}%% at the top of your diagram to switch the global theme.
Lucidchart and draw.io are visual drag-and-drop tools — you place and connect shapes manually. Mermaid is code-driven: you write text, and the layout is computed automatically. Mermaid diagrams live in your codebase as plain text, are version-controllable, and can be generated programmatically. The trade-off is less precise layout control but much faster authoring for standard diagram types.