Examples

Real-world sequence diagrams you can adapt.

OAuth 2.0 Authorization Code Flow

@seq
[participants]
  user:User|actor
  app:Client App|client
  auth:Auth Server|service
  api:Resource API|service

[messages]
  user->app:Click "Login with Provider"
  app->auth:Redirect to /authorize
  auth-->user:Show login page
  user->auth:Enter credentials
  auth->auth:Validate credentials
  auth-->app:Redirect with auth code
  app->auth:POST /token (code + secret)
  auth-->app:Access token + Refresh token
  app->api:GET /resource (Bearer token)
  api->api:Validate token
  api-->app:Protected resource
  app-->user:Show data

Rendered diagram

E-Commerce Checkout

@seq
[participants]
  user:Customer|actor
  web:Web App|client
  cart:Cart Service|service
  inv:Inventory|service
  pay:Payment|service
  order:Order Service|service
  notify:Notifications|service

[messages]
  user->web:Click Checkout
  web->cart:Get cart items
  cart-->web:items

  [loop: for each item]
    web->inv:Check availability
    inv-->web:in stock
  [end]

  web-->user:Show checkout form
  user->web:Enter payment info
  web->pay:Process payment

  [alt: payment success]
    pay-->web:Payment confirmed
    web->order:Create order
    order->inv:Reserve items
    inv-->order:Reserved
    order-->web:Order created

    [par]
      web->notify:Send confirmation email
    [and]
      web->notify:Send SMS
    [end]

    web-->user:Order confirmed!

  [else: payment failed]
    pay-->web:Payment declined
    web-->user:Please try again
  [end]

Rendered diagram

Microservices Request Flow

@seq
[participants]
  client:Mobile App|client
  gw:API Gateway|service
  auth:Auth|service
  users:Users|service
  orders:Orders|service
  cache:Redis|database
  db:PostgreSQL|database

[messages]
  client->gw:GET /dashboard (JWT)
  gw->auth:Validate JWT
  auth->cache:Check token blacklist
  cache-->auth:Not blacklisted
  auth-->gw:Token valid, user_id=123

  [par]
    gw->users:GET /users/123
    users->db:SELECT user
    db-->users:user
    users-->gw:user profile
  [and]
    gw->orders:GET /users/123/orders
    orders->db:SELECT orders
    db-->orders:orders
    orders-->gw:recent orders
  [end]

  gw->gw:Aggregate responses
  gw-->client:Dashboard data

Rendered diagram

WebSocket Real-time Updates

@seq
[participants]
  user:User|actor
  browser:Browser|client
  ws:WebSocket Server|service
  redis:Redis PubSub|database
  api:API|service

[messages]
  user->browser:Open app
  browser->ws:Connect WebSocket
  ws->redis:SUBSCRIBE user:123
  ws-->browser:Connected

  [loop: real-time updates]
    [note: over api]
      Another service publishes an event
    [end]

    api->redis:PUBLISH user:123 "new message"
    redis-->ws:Message received
    ws-->browser:Push notification
    browser-->user:Show notification
  [end]

  user->browser:Close app
  browser->ws:Disconnect
  ws->redis:UNSUBSCRIBE user:123

Rendered diagram

Database Transaction

@seq
[participants]
  api:API|service
  db:Database|database

[messages]
  api->db:BEGIN TRANSACTION

  api->db:INSERT INTO orders
  db-->api:order_id = 456

  api->db:UPDATE inventory SET qty = qty - 1
  db-->api:1 row affected

  api->db:INSERT INTO order_items
  db-->api:item_id = 789

  [alt: all succeeded]
    api->db:COMMIT
    db-->api:Transaction committed
  [else: any failed]
    api->db:ROLLBACK
    db-->api:Transaction rolled back
  [end]

Rendered diagram

More Examples

See the Cookbook for additional sequence diagrams in context.