Editable Sequence diagram example

OAuth flow Mermaid diagram example

Updated 12 September 2026 · Renders with Mermaid 11.17.2

Edit this OAuth sign-in sequence in Mermaid, inspect the rendered result, and adapt the working source for your own documentation.

About this example

This OAuth sign-in sequence example is designed as an editable starting point rather than a finished specification. In the rendered diagram, a user, application, and provider exchange authorization and token messages. Read the structure once before changing the source so identifiers, labels, and connections stay aligned. The example is intentionally small enough to test after every edit, but it includes the syntax needed to communicate the central relationship. Open it in mermaid.tools, make one change at a time, and keep the Mermaid source alongside exported images so the diagram remains maintainable.

Mermaid source

sequenceDiagram
  participant U as User
  participant A as App
  participant P as Provider
  U->>A: Click "Sign in"
  A->>P: Redirect to /authorize
  P-->>U: Login prompt
  U->>P: Credentials
  P-->>A: Code
  A->>P: Exchange for token
  P-->>A: access_token
  A-->>U: Signed in

Adapt it

• Replace generic endpoints and actors while keeping browser redirects distinct from back-channel calls.
• Keep identifiers short and stable while changing the visible labels for your audience.
• Preview after each structural edit, then remove sample nodes that do not represent real information.
• Export SVG for scalable documentation or PNG when the destination expects a fixed image.

• flow
• oauth
• sequence
• sequence-diagram

This example source is dedicated to the public domain under CC0 1.0. Review generated diagrams before relying on them in documentation.

Learn more in the related guide.

Related examples