OAuth Login Flow Mermaid Template

Sequence diagram for OAuth 2.0 login, token exchange, user upsert, and authenticated API access. Edit the code below, choose a publish preset, then export without signup, watermark, or cloud upload.

OAuthJWTauthsecurity

Why this beats a static template

• Export PNG, SVG, JPG, WebP, or PDF immediately.
• Use README, slide, blog, and dark-doc presets.
• Keep source code in the browser while exporting.

Paste or edit Mermaid code

Replace the sample below, or load another example.

Load example

Preparing the local renderer without uploading your diagram.Preparing editor…

sequenceDiagram
  participant User
  participant Browser
  participant AuthServer as Auth Server
  participant API
  participant DB

  User->>Browser: Click Sign in with Google
  Browser->>AuthServer: GET /authorize?provider=google
  AuthServer-->>Browser: Redirect to Google OAuth
  Browser->>AuthServer: Authorization code callback
  AuthServer->>AuthServer: Exchange code for tokens
  AuthServer->>DB: Upsert user record
  DB-->>AuthServer: User profile
  AuthServer-->>Browser: Set HTTP-only session cookie
  Browser->>API: GET /api/me
  API-->>Browser: User profile JSON

Live previewSample preview · GitHub README

Preparing local editor…

Render & export

Export controls activate after your diagram renders locally.

Sequence

Mode

Default renderNative MermaidOptimized exportStyled download

Export style

Clean DocsGitHub READMENotion DocWhiteboard SketchTransparent DocsGitHub DarkLinear DarkTokyo NightSlide TransparentSlide DarkExecutive DeckEditorial Card

Scale

1x2x4x

Output: White · comfortable padding

Size: calculated after render

Filename: mermaid-sequence-white-2x.png