Waiting for input
What is Mermaid Diagram Editor?
Mermaid is a JavaScript-based diagramming tool that uses Markdown-like text syntax to generate various diagrams. No need to manually drag and drop shapes — just write simple text descriptions to automatically create beautiful flowcharts, sequence diagrams, class diagrams, and more.
This tool provides an online Mermaid editing environment with real-time preview, drag-and-zoom navigation, and export capabilities, helping developers quickly create and share diagrams.
How to Use
Getting Started
- Enter Mermaid syntax in the left editor
- The right panel renders the diagram in real-time
- Use mouse to drag and scroll wheel to zoom
- Click export buttons to save as PNG or SVG
Supported Diagram Types
Examples
Flowchart
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> ESequence
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: Send Request
Server->>Database: Query Data
Database-->>Server: Return Results
Server-->>Client: Send ResponseClass
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+fetch()
}
class Cat {
+purr()
}
Animal <|-- Dog
Animal <|-- CatFAQ
What diagram types are supported?
Supports 9 diagram types: flowchart (graph/flowchart), sequence diagram, class diagram, state diagram, ER diagram, Gantt chart, pie chart, mindmap, and journey map.
How to export diagrams?
Click the 'Export PNG' or 'Export SVG' button on the right panel. PNG is ideal for documents, while SVG is perfect for vector editing and printing.
Can I zoom and pan the diagram?
Yes. Use the mouse scroll wheel to zoom in/out, and drag with the left mouse button to pan. Double-click the preview area to reset the view.
Is my data uploaded to a server?
No. All Mermaid syntax parsing and diagram rendering happen locally in your browser. Your data never leaves your device, ensuring complete privacy.