1. What is the C4 Model?

The C4 model is a structured approach to documenting software systems, providing four different levels of structural diagrams, ranging from a high-level overview to a detailed view:

+ Context Diagram : Provides a high-level view of the system, including external elements and how they interact with the system. This diagram helps stakeholders understand the system in a broader context.

+ Container Diagram : Describes the major components in the system and how they interact with each other. This diagram helps break down the system into containers (such as applications, services, databases) and shows the relationships between them.

+ Component Diagram : Provides a detailed view of the internal structure of each container. It describes the major components of a container and how they interact with each other.

+ Code Diagram : Provides a detailed view of the source code structure of components, often used to describe classes, methods, and other source code elements.

2. Why is the C4 Model important?

Provides a holistic view : The C4 model helps stakeholders, from developers to management, gain a clear understanding of the system from a high-level overview to granular details.

Creates easy-to-understand documentation : C4 diagrams help reduce the complexity of technical documentation and make it more accessible to non-technical audiences.

Supports design and development : The diagrams help development and design teams better understand the system's structure and work more efficiently.

3. How to Apply the C4 Model

To apply the C4 model to your project, start by:

+ Identifying external elements and their relationships to the system (Context Diagram).

+ Describing the main containers in the system and their relationships (Container Diagram).

+ Detailing the internal structure of each container and its important components (Component Diagram).

+ Describing the source code structure if necessary (Code Diagram).

4. Practical

4.1 Context

      Design a blog system, tuanh.net, to manage technical articles and support reading these articles. 

4.2 Context Diagram

A Context Diagram provides a high-level overview of the system and the external entities that interact with the system.

Users : Readers who are engaged in reading technical articles.

Server : A system that processes user requests and returns the required information.

4.3 Container Diagram

A Container diagram visualizes the core components of a containerized application and their communication pathways.

Frontend : The frontend is responsible for receiving requests from the user and then forwarding those requests to the Gateway.

API Gateway :: The Gateway handles the authorization process for each request and then routes it to the appropriate processing component.

Lambda function :: The Lambda function contains the business logic and processes the requests.

4.4 Component Diagram

A Component Diagram illustrating the internal structure of each container, including its main components and their relationships.

While there are numerous processes running, let's focus on a simple workflow within our Lambda function, triggered by the creation of a new post.

Initially, upon successful completion of the 'Create Post' function, an admin will scrutinize the post for any syntactic errors.

Subsequently, the admin will publish the post.

Once the 'Public Post' function is executed, it will initiate a process to send emails to all subscribed users via AWS SQS.

4.5 Code Diagram

A source code structure diagram that provides a granular view of components. This can include the class model, classes, and methods used in the application.

Above are some methods that are in each class of each function.

5. Conclusion

The C4 model is a great way to design and document your software. It gives you a clear picture of your system from different angles, making it easier for everyone to understand. If you haven't used C4 before, give it a try!

We hope this article has helped. If you have any questions, feel free to reach out.