Mermaid sequence diagram tutorial: client, API, database

Show who talks to whom

A sequence diagram explains messages between participants in chronological order. It is useful for API calls, authentication flows, and service interactions. This example follows one request from a client to an API and a database, then returns the result.

Understand participants and messages

sequenceDiagram selects the diagram type. A declaration such as participant C as Client separates the short identifier from its display name. Messages run from top to bottom. C->>A: GET /orders sends a solid-arrow message; A-->>C: 200 OK uses a dotted response arrow.

Declare participants explicitly to control their order. Use message labels to explain the action or payload, rather than repeating the participant names.

Add an alternate path

Wrap conditional messages in alt, else, and end. For example, an API can return orders when authentication succeeds, or return an unauthorized response otherwise. Add one branch at a time and check the preview after each edit.

alt Authorized
  A-->>C: 200 OK
else Unauthorized
  A-->>C: 401 Unauthorized
end

Share the result

Use Copy Markdown from the Edit menu to paste a fenced Mermaid block into documentation that supports Mermaid. Use SVG for a scalable illustration, or PNG for a document or slide that accepts images. A share link contains the diagram itself; anyone with that link can read it.