FlowDiagram
24 templates

UML: sequence, class & state templates

UML sequence diagrams for APIs and protocols, class diagrams for domain models, and state machines for orders, tickets and devices. Every one opens as a real, editable diagram — restyle it, extend it and export it as your own.

All 24 uml: sequence, class & state templates

Browser a…Resource…Auth serv…Token sto…

JWT refresh token sequence diagram

Shows a single-page app calling an API with an expired access token, refreshing it with a rotating refresh token, and retrying the request; used by backend and auth engineers.

Mermaid
ClientAPI gatew…Auth serv…Orders se…

API gateway request sequence diagram

Traces one REST call from a client through an API gateway, auth service, backend service, cache and database, including the cache-miss path; useful for API design reviews.

Mermaid
ShopperMerchant…Payment p…Issuer 3D…

Card payment with 3-D Secure sequence diagram

Shows an online card payment through a Stripe-style payment processor with a 3-D Secure challenge from the issuing bank; used by checkout and payments developers.

Mermaid
PlatformEvent que…Webhook w…Receiver…

Webhook delivery with retries sequence diagram

Shows a platform signing and delivering a webhook event, retrying with exponential backoff on failure and parking it in a dead-letter queue; used by integration engineers.

Mermaid
AliceChat serv…Pub/sub b…Message s…

WebSocket chat message sequence diagram

Shows a chat message travelling from sender to recipients over WebSockets, via a chat server, pub/sub broker and message store, with offline push; used by real-time app developers.

Mermaid
EmployeeSaaS app…Identity…Directory…

SAML SSO login sequence diagram

Shows SP-initiated single sign-on with SAML 2.0, from redirect to the identity provider through assertion validation and session creation; used by IT and identity teams.

Mermaid
UserAssistant…Vector st…LLM API

LLM tool call with RAG sequence diagram

Shows an AI assistant request where the model retrieves documents from a vector store and calls an external tool before answering; used by teams building LLM applications.

Mermaid
BrowserBackend A…S3 bucketLambda pr…

S3 presigned URL upload sequence diagram

Shows a browser uploading a file straight to S3 using a presigned URL from the backend, then post-upload processing via an event; used by web and cloud developers.

Mermaid
Coordinat…Orders DBInventory…Payments…

Two-phase commit sequence diagram

Shows a transaction coordinator running the prepare and commit phases of two-phase commit across three resource managers, including the abort path; used for distributed systems teaching.

Mermaid
UserWeb appAuth serv…User DB

MFA login with TOTP sequence diagram

Shows a password login followed by a time-based one-time password check, lockout after repeated failures, and session issue; used by product security and backend teams.

Mermaid
Customer Cart Order LineItem

E-commerce domain model class diagram

Models customers, carts, orders, line items, products, payments and shipments for an online store, with multiplicities; used by developers designing a shop backend.

Mermaid
Customer Account SavingsAccou… CheckingAcco…

Banking accounts and transactions class diagram

Models bank customers, account types, transactions and cards with inheritance for savings and checking accounts; used in fintech design and object-oriented modelling courses.

Mermaid
Library Book BookCopy Member

Library management class diagram

Models a library with books, physical copies, members, loans, reservations and fines, showing how borrowing works; a classic object-oriented design exercise for students.

Mermaid
Person Patient Doctor Appointment

Hospital patient domain class diagram

Models patients, doctors, appointments, admissions, wards, prescriptions and medical records for a hospital information system; used by health-tech developers and analysts.

Mermaid
User Instructor Student Course

Learning management system class diagram

Models courses, modules, lessons, quizzes and enrolments in an online learning platform, with instructor and student roles; used by edtech product and engineering teams.

Mermaid
Subject Observer PriceTicker ChartView

Observer and strategy design patterns class diagram

Shows the Gang of Four observer and strategy patterns together: a subject notifying observers and a context delegating to interchangeable strategies; used to teach design patterns.

Mermaid
Employee SalariedEmpl… HourlyEmploy… Timesheet

Payroll system class diagram

Models employees, salaried and hourly pay types, timesheets, payslips, deductions and pay runs for a payroll system; used by HR-tech developers and in OO design courses.

Mermaid
StartLabel CreatedPicked UpCancelledAt Origin HubLinehaul

Parcel shipment tracking state machine

Shows the states of a parcel from label creation through transit, out for delivery, failed attempts, delivery or return to sender; used by logistics and e-commerce developers.

Mermaid
StartRequires Pay…Requires Con…Requires Act…ProcessingAuthorized

Payment intent state machine

Shows the lifecycle of an online payment from creation through authentication, authorisation, capture, refunds and failure; used by developers integrating card payment APIs.

Mermaid
StartRedRed AmberGreenAmberPedestrian W…

Traffic light controller state machine

Shows a road junction traffic light controller cycling through red, green and amber, with a pedestrian request and a flashing fault mode; a classic embedded systems example.

Mermaid
StartDraftIn ReviewPeer ReviewManager Appr…Review

Document approval state machine

Shows a document moving from draft through peer review, manager approval and publishing, with rejection, rework and archiving; used for policy, contract and content workflows.

Mermaid
StartIdleCollecting M…Card Authori…Product Sele…Refunding

Vending machine state machine

Shows a snack vending machine accepting coins or card, selecting a product, dispensing, giving change and handling sold-out and refunds; a common state machine teaching example.

Mermaid
StartPendingScheduledUnschedulableContainer Cr…Running

Kubernetes pod lifecycle state machine

Shows a Kubernetes pod moving through Pending, ContainerCreating, Running, CrashLoopBackOff, Succeeded, Failed and Terminating; used by DevOps and platform engineers debugging workloads.

Mermaid
StartIdleMoving UpMoving DownDoors OpeningStopping

Elevator controller state machine

Shows an elevator car controller handling idle, moving up or down, door opening and closing, obstruction detection and emergency stop; used in embedded and systems design courses.

Mermaid

Other template categories