Multi-Zoom Architecture

Comprehensive diagrams operate at multiple zoom levels simultaneously — like a map showing both country borders and street names.

Multi-Zoom Architecture

Comprehensive diagrams operate at multiple zoom levels simultaneously. Think of it like a map that shows both the country borders AND the street names.

This creates diagrams that work for both:

• Quick scanning — “What’s the overall flow?”
• Deep learning — “What does this specific piece actually look like?”

The Three Levels

Every comprehensive diagram should include all three levels:

Level 1: Summary Flow

A simplified overview showing the full pipeline or process at a glance. Often placed at the top or bottom of the diagram.

Purpose: Give viewers the big picture in 5 seconds

Example patterns:

• Input → Processing → Output
• Client → Server → Database
• Trigger → Decision → Action → Result

Placement: Top of diagram (shows what’s coming) or bottom (summarizes what was shown)

Level 2: Section Boundaries

Labeled regions that group related components. These create visual “rooms” that help viewers understand what belongs together.

Purpose: Organize the diagram into logical chunks

Example groupings:

• By responsibility: Backend / Frontend / Database
• By phase: Setup / Execution / Cleanup
• By owner: User Actions / System Processing / External Services
• By layer: Presentation / Business Logic / Data Access

Visual treatment:

• Large free-floating text labels (24-28px)
• Optional: Light background rectangles to define regions
• Optional: Dashed divider lines between sections

Level 3: Detail Inside Sections

Evidence artifacts, code snippets, and concrete examples within each section. This is where the educational value lives.

Purpose: Teach the specifics, show what things actually look like

What to include:

• Real event names, method names, API endpoints
• Code snippets showing actual implementation
• JSON/data format examples
• UI mockups of actual output
• Timelines with real step names

See: Evidence Artifacts for detailed guidance

For comprehensive diagrams, aim to include all three levels. The summary gives context, the sections organize, and the details teach.

Example: Data Pipeline Diagram

Let’s see how this works in practice:

Level 1: Summary Flow (Top of Diagram)

Raw Events → Enrichment → Validated Data → Storage

Viewers immediately understand the four-stage pipeline.

Level 2: Section Boundaries

The diagram is divided into four labeled sections:

• Ingestion (left)
• Enrichment (center-left)
• Validation (center-right)
• Storage (right)

Each section groups related components together.

Level 3: Detail Inside Sections

Within each section, show specifics:

Ingestion section:

{
  "event": "user.click",
  "timestamp": "2026-03-04T10:30:00Z"
}

Enrichment section:

def enrich(event):
    event['user_id'] = lookup_user(event['session'])
    event['geo'] = lookup_geo(event['ip'])
    return event

Validation section:

Checks:
✓ Schema valid
✓ Required fields present
✓ Timestamp in range

Storage section:

POST /api/events
→ PostgreSQL events table

Now viewers can:

• Scan the top summary to understand the flow
• Navigate by section to find what they care about
• Learn the actual formats and implementation details

Why All Three Levels?

Each level serves a different audience need:

Level	Question It Answers	Time Investment
Level 1: Summary	”What’s the overall flow?“	5 seconds
Level 2: Sections	”Where does X happen?“	30 seconds
Level 3: Details	”How does this actually work?“	2-3 minutes

Without Level 1, the diagram feels overwhelming.
Without Level 2, it’s hard to navigate.
Without Level 3, it’s not educational.

Layout Strategies

Top Summary + Sectioned Detail

┌─────────────────────────────────┐
│  A → B → C → D  (Summary)       │
└─────────────────────────────────┘

┌──────────┐ ┌──────────┐ ┌──────────┐
│ Section  │ │ Section  │ │ Section  │
│    A     │ │    B     │ │    C     │
│          │ │          │ │          │
│ [detail] │ │ [detail] │ │ [detail] │
└──────────┘ └──────────┘ └──────────┘

Bottom Summary + Sectioned Detail

┌──────────┐ ┌──────────┐ ┌──────────┐
│ Section  │ │ Section  │ │ Section  │
│    A     │ │    B     │ │    C     │
│          │ │          │ │          │
│ [detail] │ │ [detail] │ │ [detail] │
└──────────┘ └──────────┘ └──────────┘

┌─────────────────────────────────┐
│  A → B → C → D  (Summary)       │
└─────────────────────────────────┘

Vertical Flow with Sections

       [Summary: Top to Bottom]
                │
        ┌───────┴───────┐
        │   Section A   │
        │   [details]   │
        └───────┬───────┘
                │
        ┌───────┴───────┐
        │   Section B   │
        │   [details]   │
        └───────┬───────┘
                │
        ┌───────┴───────┐
        │   Section C   │
        │   [details]   │
        └───────────────┘

Visual Hierarchy Between Levels

Use size and weight to distinguish levels:

Level	Font Size	Stroke Width	Typical Elements
Level 1	20-24px	2-3px	Bold arrows, simple shapes, concise labels
Level 2	24-28px	1px	Large text labels, light containers, dividers
Level 3	14-18px	1-2px	Code snippets, detailed labels, small shapes

Level 2 section titles should be the largest text in the diagram — they’re the navigational anchors.

Common Mistakes

Mistake 1: Only Level 3 (No Summary)

The diagram jumps straight into detailed code snippets and data formats without showing the big picture.

Problem: Viewers feel lost — “What am I looking at?”

Fix: Add a summary flow at the top or bottom.

Mistake 2: Only Level 1 (No Detail)

The diagram shows a simple flow but no concrete examples.

Problem: Not educational — viewers learn the structure but not the specifics.

Fix: Add evidence artifacts. Show what things actually look like.

Mistake 3: Missing Level 2 (No Organization)

All details are shown but without clear grouping or sections.

Problem: Hard to navigate, feels chaotic.

Fix: Add section labels and boundaries. Group related elements visually.

Building Multi-Zoom Diagrams

When creating a comprehensive diagram:

1. Start with Level 1 — Plan the summary flow first
2. Define Level 2 — Decide how to section the diagram (by phase, layer, responsibility, etc.)
3. Fill in Level 3 — Add evidence artifacts and details within each section
4. Check balance — Ensure all three levels are present and clear

Don’t design Level 3 first and then try to retrofit Levels 1 and 2. Start with the big picture and zoom in.

Quality Check

A well-designed multi-zoom diagram passes these tests:

• ✅ Can someone understand the overall flow in 5 seconds? (Level 1)
• ✅ Can someone navigate to a specific part in 30 seconds? (Level 2)
• ✅ Can someone learn concrete details by studying it for 2-3 minutes? (Level 3)
• ✅ Do the three levels work together without feeling redundant?

Next Steps

Now that you understand multi-zoom architecture:

• Review the Core Philosophy to ensure your visual structure matches your conceptual structure
• Read about Evidence Artifacts to learn what details to include at Level 3
• Start designing with all three levels in mind from the beginning