Templates / sequenceDiagram

OAuth2 authorization code flow

The full authorization code exchange between user, client app, authorization server, and resource API.

Open in studio

Preview

Mermaid 11 renderer

Rendering preview...

Mermaid source

sequenceDiagram

sequenceDiagram
    autonumber
    actor User
    participant App as Client app
    participant Auth as Authorization server
    participant API as Resource API

    User->>App: Click "Sign in"
    App->>Auth: Redirect with client_id + scope
    Auth->>User: Login and consent screen
    User->>Auth: Approve
    Auth-->>App: Redirect with authorization code
    App->>Auth: Exchange code + client secret
    Auth-->>App: Access token + refresh token
    App->>API: GET /me with Bearer token
    API-->>App: 200 profile JSON

More templates

flowchartArchitecture

Microservices architecture

A service map with an API gateway, core services, and shared infrastructure. A solid starting point for README architecture sections.

sequenceDiagramProcess

User login sequence

A login flow with token issuance and a failure branch. Useful for documenting auth endpoints and session behavior.

stateDiagram-v2Process

Order state machine

Lifecycle states for an e-commerce order, from creation to fulfillment, with cancellation and refund paths.