Purpose
C4 draws architecture at zoom levels, like a map, from general to specific. It solves "monster" diagrams where everything is on one sheet. Four levels give each viewer the right detail: stakeholders get Context, engineers get Container/Component.
Four levels
# 1. Context — the whole system as one box + actors + external systems.
# 2. Container — apps/services/DBs inside and how they talk (a container = a separately deployable thing).
# 3. Component — big parts inside one container.
# 4. Code — classes/modules (rarely drawn).
Example 1 — Context (AI-Arsenal)
# Context: AI-Arsenal
Actor: User (creator/dev). System: [AI-Arsenal] knowledge base with a personal core.
External: [Laskoff Cloud] ← core sync (HTTPS); [External resources] ← "Open" buttons.
Example 2 — Container
# Container: AI-Arsenal
[Web App (React/TS SPA)] → [IndexedDB] (local core); → [Sync API (Fastify)] (HTTPS REST + WS);
[Sync API] → [PostgreSQL] (SQL), → [Redis] (cache/pubsub).
When to use
Explaining architecture to a newcomer/stakeholder, in an ADR/System Design Doc. Context + Container usually suffice (90% of value). Component for a complex service; Code almost never.
Quality checklist
- One level = one scale.
- Relations labeled: who → whom, by which protocol.
- A container is separately deployable, not a code folder.
- Technologies noted in parentheses.
- Readable without the author.
Common mistakes
Everything on one level; unlabeled relations; container = code module; always drawing Code level; a diagram only for yourself.