C4 model — a better way to visualise software architecture
Recently I got an opportunity to work with C4 model to create architecture diagrams at work. I have put together my thoughts on this approach.
🤔 What are the 4C’s?
- Context
- Container
- Component
- Code
Fictional use case
⚡ EG is an energy provider who allows their customers to access the service using web browsers and also from mobile devices. The online service will allow users to login to the system and submit the electricity and gas meter readings. EG will notify users on successful submission of meter readings also sends the bill amount based on the calculation.
We will apply the C4 model to EG system and sketch different architecture diagrams to get better idea.
1. Context diagram
As the name suggests it provides the overall system context. It represents the system as a box surrounded by the user/actor and other systems that interact with it. It helps to take a step back to see the context.
Intended audience: Tech and non-tech people inside and outside of the team.
This is an example System Context diagram for EG application. It clearly explains the relationship between the customer and the EG application. Customers can use the system to access their account and submit the meter readings. EG application uses its internal services like EG backend, Payment system and Notifications system to help their customers.
2. Container diagram
Container diagram represents the individual service or application. The application should be separately runnable or deployable unit. It provides high-level technology focussed diagrams.
Intended audience: Developers, software-architects inside and outside of the team.
This is an example Container diagram. It shows the EG user account management (the dashed box) is made up of five containers: Backend API, a single page app, a web app, mobile app and a database. The web app is built using Node.js that serves HTML pages along with a single page app. The React.js based single page app that renders in the customer's browser, provides all necessary features. Customers can also access the service from the Android mobile app.
The mobile app and single page app uses JSON/HTTPS API, which is powered by a Backend API app using Node.js. The Backend API reads from and writes the information to a Database. The Backend API also uses JSON/HTTPS format to communicate with other components like Payments and Notifications
3. Component diagram
Component diagram shows how a container is made up of a number of components. Provides more details about the responsibilities and the technology/implementation details of components.
👥 Intended audience: Developers and software architects.
This is an example Component diagram.It provides in-depth details about Backend API app container. It uses Login, Reset password and Auth controllers to manage user login workflow. It also explains the data flow, format (JSON/HTTPS) and its interaction with other components.
4. Code
Provides detailed information about how each component is implemented. We can use UML, Entity relationship diagrams to represent the state of the code.
In my opinion, maintaining the UML diagrams will be challenging for code base that evolves or changes frequently in bigger teams.
References:
- C4 model official website — https://c4model.com/
- Visualising software architecture by Simon Brown, Agile on the Beach 2019 — https://www.youtube.com/watch?v=x2-rSnhpw0g
Visit Mohan’s website for more blogs.
