To illustrate C4 with a real world example, let's break down Google Maps as a case study and show how the same principles can apply to other applications.
Bonus
Mermaid Live (not sponsored 😊) is a powerful tool that enables developers and architects to create C4 model diagrams in a simple, text-based format and can automatically generate Context, Container, Component, and Code-level diagrams without needing complex drawing tools. I love Mermaid and have used it extensively to generate below images.
and for an interesting overview, to understand fundamentals and beyond please visit C4 Model
1. Context Diagram (C1):
Purpose : Who uses the system and why?
At the highest level, Google Maps interacts with its users and external systems like location services and traffic data providers.
Explanation:
- Users interact with Google Maps via a web app or mobile app.
- Google Maps integrates with external systems to provide location, traffic, and weather data.
2. Container Diagram (C2):
Purpose: Details the major pieces of the system: "What are the main applications or services?"
This level breaks Google Maps into its main containers, such as frontend, backend services, and databases.
Explanation:
- Frontend: The interface where users interact.
- API Gateway: Processes requests and routes them to the appropriate services.
- Map Rendering Service: Retrieves and serves map tiles.
- Routing Service: Calculates the best routes.
- Traffic Service: Analyzes real-time traffic data.
3. Component Diagram (C3):
Purpose: Focuses on the internals of a container: "What modules exist in this service?"
At this level, we zoom into the Routing Service to see how it handles route calculations.
Explanation:
- Route Planner: Orchestrates the selected and dynamic route calculations.
- Traffic Adjuster: Modifies routes based on real-time traffic.
- Distance Calculator: Computes distances between locations
4. Code Diagram (C4):
Purpose: At the code level, we describe the logic of a single component, such as the Distance Calculator. It can be a squence, workflow or any standard UML diagram.
Explanation:
- calculate: Public method to calculate distances.
- haversineFormula: Private method for geographical distance calculation.
- adjustForTerrain: Adjusts distance based on terrain type.
Conclusion
The C4 model is more than just a set of diagrams; it's a framework for understanding and communicating complex software architectures. Its role in software development cannot be overstated.
C4 is ideal for bridging communication between technical and non-technical teams, providing clarity on both the big picture and the nitty-gritty. It's widely used for system documentation, architecture design, and onboarding teams.
Top comments (0)