Mermaid sequence diagrams
A Mermaid sequence diagram shows how systems or people exchange messages over time: participants sit along the top, time flows downward, and each line of code is one message. It's the standard way to document APIs, auth flows, and service-to-service communication.
A card payment flow with a success and a failure branch.
Sequence diagrams are where text-based syntax beats dragging boxes hardest — inserting a message in the middle of a flow is one line of code instead of re-arranging twenty arrows. Describe the interaction to MermaidCreator's AI and it drafts the participants and messages for you.
When to use a sequence diagram
- API documentation — request/response flows between services
- Authentication and OAuth flows
- Webhook and retry behaviour
- Incident postmortems — what called what, in which order
The Mermaid code
Copy it anywhere Mermaid renders — or see the full syntax reference.
sequenceDiagram
participant C as Checkout
participant P as Payment API
participant B as Bank
C->>P: charge(card, amount)
activate P
P->>B: authorize
B-->>P: auth code
alt authorized
P-->>C: 200 receipt
else declined
P-->>C: 402 declined
end
deactivate PFrequently asked questions
- How do I create a sequence diagram in Mermaid?
- Start with `sequenceDiagram`, optionally declare participants with aliases (`participant A as API`), then write one message per line: `A->>B: request` for a solid arrow and `B-->>A: response` for a dashed reply. Blocks like `alt`/`else`, `loop`, and `opt` model branching and repetition.
- Can I show loops and conditions in a Mermaid sequence diagram?
- Yes. Wrap messages in `loop <label> … end` for repetition, `alt <case> … else <case> … end` for branches, and `opt <label> … end` for optional steps. `activate`/`deactivate` (or the `+`/`-` shorthand) draw the vertical activation bars.
- Can AI generate a sequence diagram for me?
- Yes. Describe the interaction — for example 'OAuth login flow between browser, app server, and identity provider' — and MermaidCreator's AI drafts the full sequence diagram. You then refine it in code or with follow-up prompts.