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.
The interactive gallery above is your primary reference. Hover over any icon to see its name, description, and where it appears in the course. This lesson provides additional context on how to read our diagrams.
Network Entities
These represent the key components in any CDN architecture. See them in action in the gallery above.
| Name | Description |
|---|---|
| End User | The browser or client making HTTP requests, located anywhere in the world |
| Edge Server | CDN node closest to the user (Point of Presence), providing the fastest response times |
| Origin Shield | Protective cache layer in front of origin, aggregating requests from all edge servers |
| Mid-Tier Cache | Intermediate cache layer between edge and shield, providing regional caching |
| Origin Server | Your actual web server or cloud storage where content originates |
| DNS Server | Resolves domain names to CDN edge IP addresses via anycast routing |
Cache States
When visualizing cache behavior, these states indicate content freshness:
| State | Meaning |
|---|---|
| HIT | Content served directly from cache - the fastest path, no origin contact needed |
| MISS | Content not in cache, must be fetched from origin - slower path |
| STALE | Cached content has expired but may still be served while revalidating |
| REVALIDATE | Checking with origin if cached content is still valid (conditional request) |
| BYPASS | Cache intentionally skipped (e.g., for authenticated requests or cookies) |
Color Semantics
Colors convey status information at a glance throughout all course diagrams and animations:
| Color | Meaning | Example Usage |
|---|---|---|
| Green | Success / Cache HIT | Content served from edge cache |
| Red | Miss / Error | Cache MISS, request goes to origin |
| Yellow / Amber | Warning / Stale | Stale content, revalidation needed |
| Blue | Neutral / In Progress | Active request, DNS lookup |
| Gray | Inactive / Disabled | Bypassed cache, disabled feature |
Data Flow Notation
Arrows and lines show how requests travel through the CDN infrastructure:
- Solid arrow (right) - Request flowing from client toward origin
- Solid arrow (left) - Response flowing back to client
- Dashed arrow - Conditional or optional request path
- Curved arrow - Redirect to different URL
- X mark - Blocked request (security, geoblocking, rate limiting)
Diagram Types
The course uses several diagram patterns:
- Request Flow Diagrams - Path of a single request from user to content. Read left-to-right.
- Cache Hierarchy Diagrams - Layers of caching (edge, shield, origin). Read top-to-bottom.
- Geographic Maps - Global distribution of PoPs and user routing. Color intensity indicates traffic volume.
- Sequence Diagrams - Order of operations over time. Read top-to-bottom.
- Header Tables - 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.5x) or speed up (1.5x, 2x) 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