Skip to main content

​
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:
LevelQuestion It AnswersTime 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:
LevelFont SizeStroke WidthTypical Elements
Level 120-24px2-3pxBold arrows, simple shapes, concise labels
Level 224-28px1pxLarge text labels, light containers, dividers
Level 314-18px1-2pxCode 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

Build docs developers (and LLMs) love

Get started for freeTalk to us