Back to roadmap
Module 1 · Foundations & MethodDay 00825 min

Communicating Designs Visually

Boxes and arrows are not decoration — they are the load-bearing language.

Day 008

Communicating Designs Visually

Architecture
note
Sequence
note
Data flow
note
Deployment
note
State
note
Memory hook

Communicating Designs Visually: boxes and arrows are not decoration

Mental model

frame the problem before drawing the system

Design lens

More annotations slow drawing but accelerate Q&A.

Recall anchors
ConventionsAnnotationsDiagram types

Why it matters

A whiteboard sketch is the most efficient compression of a design. The trick is to use shapes and arrows consistently — clients on one side, datastores on the other, async vs sync arrows distinct, layering top-to-bottom — so the picture itself answers most follow-up questions.

Deep dive

There are five common diagrams: high-level architecture, sequence, data flow, deployment, and state. Each is best for one kind of question. Learn to pick.

Conventions matter more than aesthetics. Always layer: client at top/left, edge below, app, then data, then external. Solid arrows for sync calls, dashed for async/eventual. Label arrows with the operation, not just 'GET'.

Annotate hot facts: replication factor, p95 latency, peak QPS, TTL. Three numbers in the right place tell more than three paragraphs.

Demo / scenario

Drawing an upload pipeline on a whiteboard.

  1. Top: client.
  2. Edge: signed URL service.
  3. Data: object store (S3) — annotate '11 9s durability'.
  4. Async branch: queue → transcoder workers → CDN.
  5. Use dashed line for async work; solid for sync.

Tradeoffs

  • More annotations slow drawing but accelerate Q&A.
  • Sequence diagrams beat architecture diagrams for race conditions.
  • State diagrams are essential when correctness depends on transitions.

Diagram

Architecture
Shape
Sequence
Timing
Data flow
Pipeline
Deployment
Where
State
Lifecycle
Five diagram types and what they're for.

Mind map

Check yourself

Loading quiz…

Sources & further reading