Nobody starts a diagram from scratch if they can help it. These are real flows (logins, payments, an order pipeline) written in plain text. Open one, rename the boxes to match your stack, and you're done before standup ends.
Email and password in, JWT out. The login everybody builds.
title User Login Flow type actor Customer type database "User DB" Customer -> Web App: enter email & password Web App -> Auth Service: POST /login Auth Service -> "User DB": verify credentials "User DB" -> Auth Service: user record Auth Service -> Web App: JWT + refresh token Web App -> Customer: redirect to dashboard
Gateway, token check, cache, backend. One request's whole journey.
title REST API Request Flow type database Cache Client -> API Gateway: GET /users/123 API Gateway -> API Gateway: validate JWT token API Gateway -> Cache: check cache key Cache -> API Gateway: cache miss API Gateway -> User Service: GET /users/123 User Service -> API Gateway: user data API Gateway -> Cache: store response (TTL 60s) API Gateway -> Client: 200 OK + user data
Pay button to order-marked-paid, with Stripe in the middle.
title Payment Processing Flow type actor Customer type database "Orders DB" Customer -> Web App: click "Pay now" Web App -> Payment Service: charge card Payment Service -> Stripe: create payment intent Stripe -> Payment Service: payment confirmed Payment Service -> "Orders DB": mark order as paid Payment Service -> Web App: payment ok Web App -> Customer: show confirmation
An order fanning out through services, with a queue doing the async work.
title Microservices Order Flow type database "Orders DB" API Gateway -> Order Service: POST /orders Order Service -> Inventory Service: check stock Inventory Service -> Order Service: stock available Order Service -> "Orders DB": save order Order Service -> Message Queue: publish order.created Message Queue -> Inventory Service: reserve inventory Message Queue -> Notification Service: send confirmation email Order Service -> API Gateway: 201 Created
The full OAuth dance: redirect, consent, code, token.
title OAuth 2.0 Authorization Flow type actor User User -> Your App: click "Login with Google" Your App -> OAuth Provider: redirect to authorize User -> OAuth Provider: enter credentials & consent OAuth Provider -> Your App: auth code Your App -> OAuth Provider: exchange code for token OAuth Provider -> Your App: access token Your App -> Resource Server: request user profile Resource Server -> Your App: user profile data Your App -> User: session created
Form to verification email, duplicate check included.
title User Registration Flow type actor User type database "Users DB" User -> Web App: fill signup form Web App -> Auth Service: POST /register Auth Service -> "Users DB": check email exists "Users DB" -> Auth Service: email available Auth Service -> "Users DB": insert new user Auth Service -> Email Service: send verification email Email Service -> User: verification link Auth Service -> Web App: 201 Created Web App -> User: check your email
A backend event becoming a live update in an open browser tab.
title Real-time Notification Flow type actor User User -> Web App: connect via WebSocket Web App -> Notification Server: subscribe to channel Backend Service -> Message Queue: publish event Message Queue -> Notification Server: event received Notification Server -> Web App: push notification Web App -> User: show live update
Files go straight to storage. Your API just signs the permission slip.
title File Upload Flow type actor User type database "Files DB" User -> Browser: select file Browser -> Upload API: request upload URL Upload API -> Browser: pre-signed URL Browser -> Storage Service: upload file directly Storage Service -> Browser: upload complete Browser -> Upload API: confirm upload Upload API -> Storage Service: verify file exists Upload API -> "Files DB": save file record Upload API -> Browser: 200 OK + file URL Browser -> User: show uploaded file
All examples above use this simple plain-text syntax. Here are the key elements:
A -> B: labelSingle stepA -> B -> C: labelMulti-hop chain, one linetype actor NameStick-figure nodetype database "Name"Cylinder / storage nodetitle My FlowDiagram title"Multi Word Name"Quote names with spaces# commentComments (also //)Need more detail? The flow diagram syntax guide covers everything, or just open the editor and click Help.
Any time you need to show how something moves from step A to step B, a flow diagram is the honest answer. Where people actually use this:
Yes. Click "Open in Editor" on any of them and it loads straight in, source and all. Change what you like, then export a PNG or SVG.
Plain text. Steps chain with arrows, like A -> B -> C: label, and type actor or type database changes a box's shape. The diagram redraws while you type.
Yes. Use them, change them, export them. There's no account and no catch.
Go to Sketmi.com and type. That's genuinely the whole workflow. Start from one of these examples if a blank page feels like work. Free, no sign up.
Plenty, but most of them want an account before you've drawn a single box. Sketmi runs in the browser with no login: write text, get a hand-drawn diagram, share it with a link or copy the image.