Mermaid Diagram Editor
Write declarative text and render flowcharts, sequence diagrams, class models, state machines, and Gantt charts in real time. Export crisp vector SVGs or high-resolution PNGs without leaving your browser.
Mermaid Syntax7 lines223 chars
Live Preview100%
|
Enter Mermaid code on the left to render diagram
Supported Diagram Types & Syntax
Mermaid lets you produce clean diagrams directly from simple text. This eliminates the friction of manual drag-and-drop tools and keeps your diagrams version-controllable in Git.
Flowcharts (graph TD / LR)
Decision trees, pipelines, and logic branches.
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Success]Sequence Diagrams
API handshakes, authentication, and service messaging.
sequenceDiagram
Alice->>Bob: Hello Bob
Bob-->>Alice: Hi AliceState Machines (stateDiagram-v2)
Order states, workflow transitions, and lifecycle.
stateDiagram-v2
[*] --> Pending
Pending --> ActiveEntity-Relationship (erDiagram)
Database schemas, primary/foreign keys, and relations.
erDiagram
USER ||--o{ POST : writesFrequently Asked Questions
- Is my diagram sent to any external server?
- Never. The entire Mermaid rendering pipeline operates locally on your machine. Your proprietary system architectures and logic flows remain 100% private.
- Can I use these diagrams in GitHub READMEs and Notion?
- Yes. GitHub natively supports Mermaid code blocks inside Markdown files using
```mermaid. You can also download the rendered SVG or PNG and embed it directly into any document. - How do I fix Mermaid syntax errors?
- The editor automatically validates your syntax as you type. If an arrow, node identifier, or delimiter is malformed, a red diagnostic alert will display the exact line error.