> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/coleam00/excalidraw-diagram-skill/llms.txt
> Use this file to discover all available pages before exploring further.
# 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](/concepts/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)
```text theme={null}
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**:
```text theme={null}
{
"event": "user.click",
"timestamp": "2026-03-04T10:30:00Z"
}
```
**Enrichment section**:
```text theme={null}
def enrich(event):
event['user_id'] = lookup_user(event['session'])
event['geo'] = lookup_geo(event['ip'])
return event
```
**Validation section**:
```text theme={null}
Checks:
✓ Schema valid
✓ Required fields present
✓ Timestamp in range
```
**Storage section**:
```text theme={null}
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
```text theme={null}
┌─────────────────────────────────┐
│ A → B → C → D (Summary) │
└─────────────────────────────────┘
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Section │ │ Section │ │ Section │
│ A │ │ B │ │ C │
│ │ │ │ │ │
│ [detail] │ │ [detail] │ │ [detail] │
└──────────┘ └──────────┘ └──────────┘
```
### Bottom Summary + Sectioned Detail
```text theme={null}
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Section │ │ Section │ │ Section │
│ A │ │ B │ │ C │
│ │ │ │ │ │
│ [detail] │ │ [detail] │ │ [detail] │
└──────────┘ └──────────┘ └──────────┘
┌─────────────────────────────────┐
│ A → B → C → D (Summary) │
└─────────────────────────────────┘
```
### Vertical Flow with Sections
```text theme={null}
[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](/concepts/philosophy) to ensure your visual structure matches your conceptual structure
* Read about [Evidence Artifacts](/concepts/evidence-artifacts) to learn what details to include at Level 3
* Start designing with all three levels in mind from the beginning