DEV Community

Cover image for C4 Model real world example with Google Maps
Anwar
Anwar

Posted on

C4 Model real world example with Google Maps

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.

C4 Context Diagram

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.

C4 Container Diagram

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.

C4 Component Diagram

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.

Reference

Top comments (0)