Symbol Guide & Visual Language
Why Visual Language Matters
Throughout this course, you'll encounter diagrams, animations, and flowcharts that illustrate how CDNs work. To make these visuals immediately understandable, we use a consistent set of symbols and colors across all lessons.
This lesson is your reference guide. Bookmark it and return whenever you need to decode a diagram.
Core Infrastructure Symbols
These icons represent the key components in any CDN architecture:
| Symbol | Name | Description |
|---|---|---|
| 👤 | User / Client | End users requesting content via their browser or app |
| 🌐 | Browser | The user's web browser making HTTP requests |
| 🖥️ | Origin Server | Your actual web server where content originates |
| ⚡ | Edge Server / PoP | CDN edge location (Point of Presence) serving cached content |
| 🗄️ | Cache Storage | Where cached content is stored at the edge |
| 🌍 | DNS Server | Resolves domain names to CDN edge IP addresses |
| 🛡️ | Shield / Mid-Tier | Intermediate cache layer protecting the origin |
Request & Response Flow
Arrows and lines show how requests travel through the CDN infrastructure:
| Symbol | Meaning |
|---|---|
| → (solid arrow) | Request flowing from client toward origin |
| ← (solid arrow) | Response flowing back to client |
| ⇢ (dashed arrow) | Conditional or optional request path |
| ✓ (checkmark) | Successful operation or cache hit |
| ✗ (cross) | Failed operation or cache miss |
Color Coding
Colors convey important status information at a glance:
| Color | Meaning | Example Usage |
|---|---|---|
| 🟢 Green | Success / Cache HIT | Content served from edge cache |
| 🔴 Red | Miss / Error | Cache MISS, request goes to origin |
| 🟡 Yellow/Orange | Warning / Stale | Stale content, revalidation needed |
| 🔵 Blue | Neutral / In Progress | Active request, DNS lookup |
| ⚫ Gray | Inactive / Disabled | Bypassed cache, disabled feature |
Cache Status Indicators
When visualizing cache behavior, these indicators show content freshness:
| Status | Visual | Meaning |
|---|---|---|
| HIT | 🟢 Green glow | Content served directly from cache - fastest response |
| MISS | 🔴 Red path to origin | Content not in cache, fetched from origin |
| STALE | 🟡 Yellow/faded | Cached content has expired but may still be usable |
| REVALIDATE | 🔵 Blue refresh icon | Checking with origin if cached content is still valid |
| BYPASS | ⚫ Gray, dotted line | Cache intentionally skipped (e.g., for cookies) |
Diagram Types You'll Encounter
The course uses several diagram patterns to explain different concepts:
- Request Flow Diagrams — Show the path of a single request from user to content. Read left-to-right.
- Cache Hierarchy Diagrams — Show the layers of caching (edge → shield → origin). Read top-to-bottom.
- Geographic Maps — Show global distribution of PoPs and user routing. Color intensity indicates traffic volume.
- Sequence Diagrams — Show the order of operations over time. Read top-to-bottom, with time flowing downward.
- Header Tables — Show HTTP headers with syntax highlighting for directives and values.
Animation Controls
Interactive animations throughout the course include playback controls:
- Play/Pause — Start or stop the animation
- Restart — Return to the beginning
- Speed control — Slow down (0.5×) or speed up (1.5×, 2×) playback
- Loop toggle — Repeat animation continuously
Use slower speeds when learning new concepts, and faster speeds for review.
In course diagrams, what does a green color typically indicate?
Green indicates success throughout the course visuals. In CDN context, this typically means a cache HIT—the fastest possible response where content is served directly from the edge cache without contacting the origin server.
Enjoying this preview?
Unlock all lessons, hands-on exercises, and earn your CDN certification.
Ready to Master CDN?
You've just scratched the surface. Create a free account to access the full course, hands-on exercises, and earn your CDN Certified credential.
No credit card required · Free forever tier available