A whiteboard shape vocabulary

Draw the blue additions in order. Name every object. The shapes are local shorthand; a label and a stated arrow meaning make the picture useful. Print with your browser’s Print command or the button below.

User: 1 · head, 2 · trunk + arms, 3 · legs

Team: 1 · two heads, 2 · shoulders, 3 · shared line

Browser / site: 1 · frame, 2 · top bar, 3 · dots

Mobile app: 1 · tall frame, 2 · top bar, 3 · home line

Service: 1 · box, 2 · corner mark, 3 · small tick

Database: 1 · oval, 2 · sides + base, 3 · seam

File: 1 · silhouette, 2 · fold, 3 · text marks

Queue: 1 · rails, 2 · messages, 3 · direction

Pub/sub topic: 1 · hub, 2 · branches, 3 · endpoints

Worker: 1 · box, 2 · prompt mark, 3 · small tick

External system: 1 · box, 2 · outward cue, 3 · outside edge

Group boundary: 1 · enclosure, 2 · scope name, 3 · members

Keep one personality across the board

Spare omits detail. Soft rounds corners and adds a pale wash. Expressive keeps clear contours with a few small flourishes. The customer, site, API and database have the same meaning in all three.

Spare user, browser, service and database symbols — Spare

Soft user, browser, service and database symbols — Soft

Expressive user, browser, service and database symbols — Expressive

Five minutes of practice

For this exercise, add a separate email queue. A customer uses a booking site. The site submits a repair to the Repair API. The API stores the request in Repair DB and enqueues a confirmation in Email jobs. An Email worker takes jobs and asks an external Mail provider to send them. Enclose the API, database, queue and worker in “Repair team”.

Spend one minute on names and space, two on shapes and relationships, one reading every arrow aloud, and one removing distracting detail. Use graphite for structure. Add blue only to the relationship being discussed.

Discussed solution

Customer → Booking site: uses. Booking site → Repair API: submits repair. Repair API → Repair DB: stores request. Repair API → Email jobs: enqueues confirmation. Email worker → Email jobs: takes job. Email worker → Mail provider: requests email delivery. The arrow from worker to queue means “uses”, not the direction in which a job travels. A data-flow view would draw Email jobs → Email worker and label it “confirmation job”.

The Repair team boundary contains four named elements. Mail provider is outside it. This sketch does not say that storing the request and enqueuing the job succeed atomically, nor that an email is delivered once. Put those questions beside the picture if they matter.

Keep: names, endpoints, arrowheads, relationship verbs, scope label. Optional: browser dots, file text lines, database seam, character hair, colour and tiny hatching. A named rectangle is always a useful fallback.