Mermaid diagram

Sequence Diagram — free online editor

Mermaid sequence diagrams show how participants exchange messages over time — ideal for API flows, auth handshakes, and protocol design.

▶ Open in editor

What is a Mermaid sequence diagram?

A sequence diagram has actors or participants drawn left-to-right, each with a vertical lifeline. Messages flow between them top-to-bottom in chronological order. Mermaid supports synchronous arrows, async messages, notes, activations, and control-flow blocks like alt/else, opt, loop, and par.

When to use it

▸Document an API request/response flow
▸Visualize an OAuth or login handshake
▸Explain a distributed-system protocol
▸Capture requirements in a UML-style spec

Syntax in one paragraph

Use `participant A as Name` to declare actors. Messages: `A->>B: text` (solid), `A-->>B` (dotted/reply), `A-)B` (async). Wrap conditional or repeated steps in `alt/end`, `opt/end`, or `loop/end` blocks.

Example: Login + token refresh

sequenceDiagram
    autonumber
    participant U as User
    participant A as API
    participant DB as Database

    U->>A: POST /login
    A->>DB: SELECT user
    DB-->>A: user row
    A->>A: verify password

    alt Valid credentials
        A-->>U: 200 { token, refresh }
    else Invalid
        A-->>U: 401 Unauthorized
    end

▶ Try this example in the editor

More Mermaid diagrams

Flowchart

A Mermaid flowchart visualizes a process as connected nodes and arrows — perfect for documenting algorithms, decision trees, and user journeys.

Class Diagram

Mermaid class diagrams model UML classes — their members, methods, and the relationships between them.

ER Diagram

Mermaid ER diagrams model database schemas — tables, columns, and the relationships between them using crow's-foot cardinality.

State Diagram

Mermaid state diagrams visualize finite-state machines — perfect for UI states, workflow engines, and protocol design.

Gantt Chart

Mermaid Gantt charts plan projects across time — tasks, durations, dependencies, and milestones.

Pie Chart

Mermaid pie charts visualize a single dataset as proportional slices — the easiest Mermaid diagram to start with.

Git Graph

Mermaid Git graphs visualize branching workflows — commits, branches, merges, and tags — in a clean SVG diagram.

Mindmap

Mermaid mindmaps capture ideas around a central topic — branches grow outward by indentation alone, no UI dragging required.

Timeline

Mermaid timelines show events over time grouped into sections — great for histories, roadmaps, and onboarding stories.

Kanban Board

Mermaid 11 added native Kanban boards — list-based, version-controllable, and renderable straight from text.

Full Mermaid editor →

All 11+ diagram templates, live preview, themes