Home Examples
Free Templates

Sequence Diagram Examples & Templates

Ready-to-use UML sequence diagram examples for common software flows. Click any example to open it in the free online editor — no sign-up required.

Open Editor Free Browse Examples
AuthJWT

User Login / Authentication Flow

How a user logs in with email and password. Covers credential validation, password hashing, and JWT token issuance — the most common auth flow for web apps.

title User Login Flow

actor User
participant Browser
participant "Auth Server" as Auth
participant Database

User->Browser: Enter credentials
Browser->Auth: POST /api/login
Auth->Database: SELECT * FROM users
Database-->Auth: User record
Auth->Auth: Verify password hash
Auth-->Browser: JWT token + refresh token
Browser-->User: Redirect to dashboard
APIRESTCache

REST API Request / Response

A complete REST API call through an API Gateway with JWT validation, cache checking, and backend service routing. Ideal for documenting API architecture.

title REST API Request/Response

participant "Mobile App" as App
participant "API Gateway" as GW
participant "User Service" as US
participant Cache

App->GW: GET /users/123
GW->GW: Validate JWT token
GW->Cache: Check cache key
Cache-->GW: Cache miss
GW->US: GET /users/123
US-->GW: {id:123, name:"Alice"}
GW->Cache: SET cache (TTL 60s)
GW-->App: 200 OK + user data
PaymentStripeWebhook

Payment Processing Flow

End-to-end payment flow using Stripe: from the customer clicking pay, through payment intent creation, card entry, webhook confirmation, and order status update.

title Payment Processing Flow

actor Customer
participant "Web App" as App
participant "Payment API" as Pay
participant "Stripe" as Stripe
participant Database

Customer->App: Click "Pay now"
App->Pay: POST /charge
Pay->Stripe: Create payment intent
Stripe-->Pay: Payment intent ID
Pay-->App: Redirect to Stripe
App-->Customer: Show payment form
Customer->Stripe: Enter card details
Stripe->Pay: Webhook: payment.succeeded
Pay->Database: UPDATE order status = paid
Pay-->App: 200 OK
App-->Customer: Show confirmation
MicroservicesQueueEvents

Microservices Order Flow

How an order flows through microservices: API Gateway routes to Order Service, which checks inventory, then publishes events to a message queue consumed by Inventory and Notification services.

title Microservices Order Flow

participant "API Gateway" as GW
participant "Order Service" as Orders
participant "Inventory Service" as Inv
participant "Notification Service" as Notify
participant "Message Queue" as MQ

GW->Orders: POST /orders
Orders->Inv: Check stock
Inv-->Orders: Stock available
Orders->Orders: Create order
Orders->MQ: Publish order.created
MQ->Inv: Reserve inventory
MQ->Notify: Send confirmation email
Inv-->MQ: Inventory reserved
Orders-->GW: 201 Created + order ID
OAuth 2.0SSOAuth

OAuth 2.0 Authorization Flow

The standard OAuth 2.0 authorization code flow: redirect to provider, user consent, auth code exchange for tokens, and resource access. Works for Google, GitHub, and any OAuth provider.

title OAuth 2.0 Authorization Flow

actor User
participant Browser
participant "Your App" as App
participant "OAuth Provider" as OAuth
participant "Resource Server" as RS

User->App: Click "Login with Google"
App-->Browser: Redirect to Google
Browser->OAuth: GET /authorize?client_id=...
OAuth-->Browser: Show login form
User->OAuth: Enter credentials
OAuth-->Browser: Redirect with auth code
Browser->App: GET /callback?code=xyz
App->OAuth: POST /token (code=xyz)
OAuth-->App: Access token + refresh token
App->RS: GET /userinfo (Bearer token)
RS-->App: User profile data
App-->Browser: Session created
RegistrationEmailAuth

User Registration / Sign-up Flow

New user registration: form validation, duplicate email check, user creation in the database, and email verification link. The standard sign-up flow for any web application.

title User Registration Flow

actor User
participant "Web App" as App
participant "Auth Service" as Auth
participant Database
participant "Email Service" as Email

User->App: Fill signup form
App->App: Validate inputs
App->Auth: POST /register
Auth->Database: Check email exists
Database-->Auth: Email not found
Auth->Database: INSERT new user
Auth->Email: Send verification email
Email-->User: Verification link
Auth-->App: 201 Created
App-->User: Check your email
WebSocketReal-timeChat

WebSocket Real-time Chat

Real-time bidirectional communication using WebSockets: connection setup, room joining, message exchange between multiple clients through a chat server.

title WebSocket Chat Flow

actor Alice
actor Bob
participant "Chat Server" as Server

Alice->Server: WS connect
Server-->Alice: Connected
Bob->Server: WS connect
Server-->Bob: Connected
Alice->Server: join room:general
Server->Bob: user:alice joined
Bob->Server: message: Hello Alice!
Server->Alice: message from Bob: Hello Alice!
Alice->Server: message: Hey Bob!
Server->Bob: message from Alice: Hey Bob!
Alice->Server: WS disconnect
Server->Bob: user:alice left
UploadS3API

File Upload Flow (Presigned URL)

Secure file upload using presigned URLs: the client requests an upload URL from the API, uploads directly to S3/storage, then confirms with the backend to save file metadata.

title File Upload Flow

actor User
participant Browser
participant "Upload API" as API
participant "Storage Service" as S3
participant Database

User->Browser: Select file
Browser->API: POST /upload/init
API-->Browser: Pre-signed upload URL
Browser->S3: PUT file (direct upload)
S3-->Browser: Upload complete
Browser->API: POST /upload/confirm
API->S3: Verify file exists
S3-->API: File metadata
API->Database: Save file record
API-->Browser: 200 OK + file URL
Browser-->User: Show uploaded file

Ready to create your own diagram?

Type plain text, get a live diagram. Export PNG or SVG in one click. No account needed.

Start for Free →

Quick Syntax Reference

All examples above use this simple plain-text syntax. Here are the key elements:

A->B: MessageSynchronous call
A-->B: ReplyReturn / async message
A->>B: AsyncAsync fire-and-forget
actor UserStick figure participant
participant "Name" as XAlias a participant
note over A,B: textAdd a note
loop Every 30sLoop fragment
alt SuccessAlt/else fragment
opt OptionalOptional fragment

Need more detail? Open the editor and click the Help button for the full syntax reference with live examples.

When to use a sequence diagram

Sequence diagrams are the go-to tool whenever you need to show how systems or people interact over time. Common use cases:

Frequently asked questions

Can I edit these sequence diagram examples?

Yes. Click the "Open in Editor" button on any example to load it directly into the free online sequence diagram editor. You can then modify the diagram, add participants, change messages, and export your result as PNG or SVG.

What format are these sequence diagrams written in?

All examples use a plain-text syntax where you declare participants and write messages using arrow notation (-> for synchronous, --> for return messages). The format is human-readable and works directly with SequenceDiagramOnline.com.

Can I use these diagrams for free?

Yes. All examples are completely free to use, modify, and export. No account or sign-up is required.

How do I create my own sequence diagram?

Go to SequenceDiagramOnline.com, type your diagram source using the plain-text syntax in the editor panel, and see the diagram render in real time. You can start from any of these examples or from scratch.

What sequence diagram tools are available online?

SequenceDiagramOnline.com is a free, browser-based sequence diagram editor that requires no installation or account. You write plain text and see your diagram instantly. It supports PNG and SVG export, shareable links, and all standard UML sequence diagram elements.