Architecture Diagramming Lab (Interactive)
Swap mystery boxes for named technology, label arrows, and get scored on board clarity and anti-patterns. Replace generic Database/Cache/Queue boxes with concrete stores and stated rationale, tune arrow labeling, layout direction, dashed async paths, and pagination contracts, and the audit flags the five fatal diagram anti-patterns.
Whiteboard Diagram Audit
Replace mystery boxes with named technology, label every arrow, and the board scores your visual communication like an interviewer does.
Center blob / ingress box
"Database" box
"Cache" box
"Queue" box
"Storage" box
engine scans+discards 10,000 index rows ~= 500 ms
Named boxes 0/5 · arrow labeling 10/20 · 6 anti-patterns detected
- Mystery Boxes: 5 generic boxes invite the "why this store?" objection you cannot answer.
- Unlabeled Arrows: 4 connections missing protocol + payload (HTTPS, gRPC getUserProfile, Kafka produce).
- Spiderweb Anti-Pattern: arrows crisscross in all directions - redraw Clients -> Edge -> App -> Cache -> DB -> Workers left-to-right.
- Sync/Async Ambiguity: Kafka fan-out workers drawn with the same solid line as request-response calls hides the latency boundary.
- No Data Model: no PKs, partition keys, or indexes written next to the DB box.
- Deep OFFSET scan: OFFSET pagination is O(N) per page - switch to cursor/keyset.
How It Works Under the Hood
Your diagram is the communication interface the interviewer probes all session. Messy crisscrossing arrows signal cognitive disorder; a box labeled simply "Database" invites a "why this engine?" objection you cannot answer. Production-grade boards flow left-to-right through named tiers, label every arrow with protocol and payload, distinguish Kafka fan-out with dashed async lines, and write primary keys, indexes, and cursor pagination beside the boxes. This lab computes a clarity score from those exact mechanics and quantifies the O(N) row-scan cost of OFFSET pagination so the visual discipline becomes measurable.
Core Architectural Principles
- Generic mystery boxes versus specified stores (PostgreSQL primary/replicas, Redis ZSET, Kafka, S3+CloudFront) change the score directly.
- Arrow labeling ratio, layout directionality, and dashed async separation each contribute weighted clarity points.
- OFFSET versus cursor pagination computes real index rows scanned at deep page numbers versus a constant-time keyset seek.
Narrate while drawing - never five silent minutes - and label arrows with protocol plus method before the interviewer asks. Write the API contract and schema beside their boxes, use dashed lines for the event pipeline, and justify each store by its access pattern: SQL for ACID orders, LSM for write-heavy telemetry, ZSET for timestamp-ordered timelines.
A precise, labeled blueprint creates shared grounding for deep dives, but polishing alignment instead of content burns Step 3 minutes.