Sequence Diagram Examples

Preview and edit six Mermaid sequence diagram examples, from API responses and asynchronous jobs to activation bars and optional interactions. Use the syntax reference, adapt the code, and open your diagram in the editor to share or export.

Open online preview Try examples on this page

Preview and edit a Mermaid sequence diagram

Edit the code below or load an example. Open the current code in the full editor to choose a theme, share a link, or export PNG/SVG.

Mermaid code

Live preview

Paste Mermaid diagram code to preview.

Open current code in editor

Your code, theme, and diagram configuration travel with the link. Flowchart spacing uses the Standard preset.

Sequence examples for API and service workflows

API request sequence example

Follow a browser request through an API to a database and back. Use this when explaining which service is responsible for each step.

sequenceDiagram
  participant Browser
  participant API
  participant Database
  Browser->>API: Request data
  API->>Database: Query records
  Database-->>API: Return records
  API-->>Browser: Render response

Solid messages carry requests and dashed messages show replies in this example.
Rename the messages to actual operations; include only details relevant to the interaction being documented.

Open example in editor

Authorized and denied responses

Document the two outcomes of a protected API call. Both branches respond to the client so the failure case is visible.

sequenceDiagram
  autonumber
  participant Client
  participant API
  Client->>API: GET /reports
  alt Token valid
    API-->>Client: 200 Report data
  else Token missing or expired
    API-->>Client: 401 Sign in required
  end

alt and else represent alternative outcomes, not two responses sent for one call.
autonumber adds message numbers for discussion in a review.

Open example in editor

Asynchronous job with later processing

Accept a job before the worker finishes. The 202 response acknowledges acceptance; it is separate from the worker’s completion.

---
config:
  sequence:
    mirrorActors: false
---
sequenceDiagram
  participant Client
  participant API
  participant Queue
  participant Worker
  Client->>API: Start export
  API-)Queue: Publish job
  API-->>Client: 202 Accepted
  Queue-)Worker: Deliver job
  activate Worker
  Note right of Worker: Generate file
  Worker-->>Queue: Acknowledge completion
  deactivate Worker

Open arrowheads distinguish the event messages; they describe the design rather than running a queue.
Add polling or a completion notification if your product exposes the result to the client.
config.sequence.mirrorActors: false hides the repeated participant boxes at the bottom. This option is retained when opening and sharing the code.

Open example in editor

Sequence diagram viewer sample

Read the interactions from top to bottom. Declaring participants first keeps Client, API, and Worker in the intended order.

sequenceDiagram
  participant Client
  participant API
  participant Worker
  Client->>API: Submit request
  API->>Worker: Queue job
  Worker-->>API: Return result
  API-->>Client: Show response

Each message names its sender, receiver, and label.
This starter shows a request/result exchange; use the asynchronous example collection for queued work that completes after a response.

Open example in editor

Participants and an activation bar

Show when an API is actively handling a request. The activation bar starts on receipt and ends after the response.

sequenceDiagram
  actor User
  participant API as Web API
  User->>API: Load profile
  activate API
  Note right of API: Read profile
  API-->>User: Profile details
  deactivate API

An alias gives a participant a readable display name without changing its ID.
Pair activate and deactivate for the same participant.

Open example in editor

An optional interaction

Add a diagnostic log only when tracing is enabled. The response stays outside the optional block because it is always sent.

sequenceDiagram
  participant Client
  participant API
  participant Log
  Client->>API: Fetch status
  opt Tracing enabled
    API->>Log: Record request
  end
  API-->>Client: Current status

Use opt for an optional section without a competing branch.
Use alt / else when the outcome has mutually exclusive alternatives.

Open example in editor

Syntax quick reference

Mermaid syntax and its meaning
Syntax	Meaning
`participant API as Web API`	Declare a participant and an optional display name.
`A->>B: Request`	Draw a solid message with an arrowhead.
`B-->>A: Response`	Draw a dashed message, often used for a reply.
`A-)B: Event`	Draw an open arrowhead, conventionally used for asynchronous messages.
`alt / else / end`	Show alternative paths.
`activate / deactivate`	Mark a participant’s active interval.

Before you share the diagram

Choose participants by responsibility, then keep their order consistent across related diagrams.
Show failure outcomes near the request they belong to, using alt / else for exclusive paths.
For asynchronous work, separate acceptance, background processing, and how the client learns the result.
Declaration order sets the horizontal participant order; messages proceed from top to bottom.
Arrows describe interactions; Mermaid does not execute requests or enforce your system’s timing.
The editor’s layout presets control flowchart spacing. For sequence-specific settings, use a frontmatter config.sequence block.

Flowchart examples for processes and decisions

For more syntax, see the official Mermaid reference.

Preview, style, and export in one place

Mermaid Viewer keeps the workflow focused: paste Mermaid code, preview the rendered diagram, choose a theme or layout preset, then export PNG/SVG when the result is ready for documentation or slides.

Related Mermaid tools

Mermaid Viewer Mermaid Flowchart Viewer Mermaid Sequence Diagram Examples Mermaid Themes

Frequently Asked Questions

What is a Mermaid sequence diagram?

A Mermaid sequence diagram shows interactions between participants over time using text-based Mermaid syntax.

Can I export sequence diagram examples?

Yes. Preview the example in Mermaid Viewer and export it as SVG or PNG.