Create Diagrams with Mermaid — Flowcharts, Sequences & More

Mermaid is a powerful text-based diagramming tool that lets you create professional diagrams using simple syntax. It's perfect for documentation, presentations, and technical writing.

What is Mermaid?

Mermaid uses a Markdown-inspired syntax to generate diagrams. Instead of dragging and dropping shapes, you write simple text that describes your diagram, and Mermaid renders it automatically.

Flowcharts

Flowcharts are perfect for showing processes and decision flows:

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Key elements:

• TD — Top to Down direction (also: LR, RL, BT)
• [Text] — Rectangle node
• {Text} — Diamond (decision) node
• --> — Arrow connection
• -->|Label| — Arrow with label

Sequence Diagrams

Great for showing interactions between systems or people:

sequenceDiagram
    User->>Server: Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>User: Response

Key elements:

• ->> — Solid arrow
• -->> — Dashed arrow (response)
• participant — Define actors

Class Diagrams

For software architecture and UML:

classDiagram
    class Animal {
        +String name
        +makeSound()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

Gantt Charts

For project timelines:

gantt
    title Project Schedule
    dateFormat YYYY-MM-DD
    section Phase 1
    Design    :a1, 2026-01-01, 7d
    Develop   :a2, after a1, 14d
    section Phase 2
    Testing   :a3, after a2, 7d

Exporting Diagrams

Our Mermaid Editor lets you export diagrams as:

• PNG — For documents and presentations
• SVG — For web and scalable graphics

Tips for Better Diagrams

• Keep it simple — Don't overcrowd your diagrams
• Use meaningful labels — Clear text helps understanding
• Choose the right direction — TD for hierarchies, LR for processes
• Use subgraphs — Group related elements together