Free Online Sequence Diagram Generator
A sequence diagram shows the messages that pass between the parts of a system, in the order they happen. Each participant gets its own lifeline running down the page, and each arrow between lifelines is one message.
This editor renders the diagram from plain text, so an auth flow or an API call sequence can live in a code review or a design doc as a few lines that stay accurate because they are trivial to update.
An OAuth-style login flow
Mermaid source
sequenceDiagram
actor User
participant App
participant AuthServer
User->>App: Click "Log in"
App->>AuthServer: Redirect with client_id
AuthServer-->>User: Show login form
User->>AuthServer: Submit credentials
AuthServer-->>App: Authorization code
App->>AuthServer: Exchange code for token
AuthServer-->>App: Access token
App-->>User: Logged inactor draws a stick figure instead of a box, which reads better for a human participant. ->> is a solid arrow for a request, and -->> is a dashed arrow for its response — the convention most teams use to separate calls from returns.
An API request with error handling
Mermaid source
sequenceDiagram
participant Client
participant API
participant DB
Client->>API: POST /orders
API->>DB: INSERT order
alt insert succeeds
DB-->>API: order id
API-->>Client: 201 Created
else insert fails
DB-->>API: constraint error
API-->>Client: 409 Conflict
endalt / else / end brands a block with two branches, exactly like an if/else in code, and Mermaid draws it as a labelled box that splits into two paths. Use opt instead of alt for a branch with no else.
Questions
What's the difference between ->> and -->>?
->> draws a solid arrow, conventionally a request or a call. -->> draws a dashed arrow, conventionally the response to that call. Mermaid does not enforce the meaning — it's a readability convention — but following it makes long diagrams much easier to scan.
How do I show a participant as a person instead of a box?
Declare it with actor instead of participant, for example actor User. Mermaid draws a stick figure for actors and a rectangle for participants; everything else about messaging works the same for both.
How do alt and opt blocks work?
alt ... else ... end draws a two-way branch, like the success/failure paths of an API call. opt ... end draws a single optional branch with no else. Both can be nested inside loop or par blocks for retries and concurrent messages.