Mermaid Editor

Online editing and preview for flowcharts, sequence diagrams, and Gantt charts using Mermaid syntax.

Template Selection

Mermaid Code

Preview

Mermaid Syntax Cheatsheet

Flowchart

Yes

Sequence Diagram

sequenceDiagram
  participant A as Client
  participant B as Server
  A->>B: Send Request
  B-->>A: Return Response

Gantt Chart

gantt
  title Project Plan
  section Phase 1
  Requirements Analysis :a1, 2024-01-01, 10d
  Development :a2, after a1, 20d

Pie Chart

pie title Tech Stack Ratio
  "Vue" : 40
  "React" : 30
  "Angular" : 15
  "Others" : 15

Usage Guide

Features

Mermaid is a text-based diagram description language that can generate flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, pie charts, ER diagrams, mindmaps, and more through simple markup syntax, suitable for embedding in documents and Markdown.

Steps

Click buttons in the "Template Selection" card at the top to quickly load sample code; edit Mermaid code in the left text box, and the right side automatically renders the preview (with debouncing); click "Refresh" for manual refresh; supports exporting to SVG, PNG, JPG, and WebP formats via the "Download Diagram" button.

Supported Chart Types

Flowchart (graph), Sequence (sequenceDiagram), Gantt (gantt), Class Diagram (classDiagram), State Diagram (stateDiagram-v2), Pie Chart (pie), ER Diagram (erDiagram), Mindmap (mindmap).

Notes

Mermaid library is loaded dynamically via CDN, requiring internet on first use; securityLevel is set to loose to support complex syntax; rendering errors are displayed in the preview area; bitmap export uses SVG-to-Canvas conversion; 2x or 3x scale is recommended for clearer images.