How to Create Mermaid Diagrams: Flowcharts, Sequence Diagrams & More from Text

What Mermaid Is

Mermaid is a JavaScript library that renders diagrams from text descriptions. Instead of drawing boxes and arrows in a design tool, you write a few lines of a simple markup language. The result: diagrams that live in your Markdown files, are version-controlled in Git, render in GitHub/GitLab natively, and can be reviewed in pull requests just like code. Mermaid is built into GitHub Markdown, GitLab, Notion, and Obsidian.

Flowcharts

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Deploy]
    B -->|No| D[Debug]
    D --> B
    C --> E[Monitor]
    E --> F[Done]

Direction: TD (top-down), LR (left-right), BT (bottom-top), RL (right-left). Node shapes: [] rectangle, () rounded, {} diamond (decision), (()) circle, [[]] subroutine.

Sequence Diagrams

sequenceDiagram
    Client->>Server: POST /login
    Server->>Database: SELECT user
    Database-->>Server: user row
    Server->>Server: verify password hash
    Server-->>Client: JWT token

Arrows: ->> solid line, -->> dashed, -x async with X. Participants are auto-created from the names you use; explicitly declare them with participant Name for ordering control.

Class Diagrams

classDiagram
    class User {
        +String id
        +String email
        +login()
        +logout()
    }
    User "1" --> "*" Post : creates

Entity Relationship Diagrams (ERDs)

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "ordered in"

Gantt Charts

gantt
    title Sprint Plan
    dateFormat  YYYY-MM-DD
    section Backend
    API design      :done, a1, 2026-06-23, 3d
    Implementation  :active, a2, after a1, 5d
    Testing         :a3, after a2, 2d

Create Mermaid Diagrams Now

Write Mermaid syntax in ToolsVito's Mermaid Diagram Editor and see the diagram render live. Export as SVG or PNG for your documentation. All rendering happens in your browser.