C4 Diagram

C4 diagrams provide a way to visualize software architecture at different levels of abstraction. The C4 model consists of Context, Container, Component, and Code diagrams.

Syntax

Basic Elements

• Person: Person(alias, label)
• System: System(alias, label)
• Container: Container(alias, label, technology)
• Component: Component(alias, label, technology)
• Relationship: Rel(from, to, label)

Basic Example

Code:

C4Context
    title System Context diagram for Internet Banking System
    
    Person(customer, "Banking Customer", "A customer of the bank")
    System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts")
    
    Rel(customer, banking_system, "Uses")

Ctrl + Enter|

Advanced Example

Here's a more detailed container diagram for a web application:

Code:

C4Container
    title Container diagram for Internet Banking System

    Person(customer, "Banking Customer", "A customer of the bank")
    
    System_Boundary(banking_system, "Internet Banking System") {
        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers")
        Container(mobile_app, "Mobile App", "Kotlin, Android", "Provides a limited subset of the Internet banking functionality to customers")
        Container(api, "API Application", "Java, Spring Boot", "Provides Internet banking functionality via API")
        ContainerDb(database, "Database", "Oracle Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
    }

    Rel(customer, web_app, "Uses", "HTTPS")
    Rel(customer, spa, "Uses", "HTTPS")
    Rel(customer, mobile_app, "Uses")
    Rel(web_app, spa, "Delivers")
    Rel(spa, api, "Uses", "JSON/HTTPS")
    Rel(mobile_app, api, "Uses", "JSON/HTTPS")
    Rel(api, database, "Reads from and writes to", "JDBC")

Ctrl + Enter|

Component Level

Code:

C4Component
    title Component diagram for Internet Banking System - API Application

    Container_Boundary(api, "API Application") {
        Component(sign_in_controller, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System")
        Component(security_component, "Security Component", "Spring Security", "Provides functionality related to signing in, changing passwords, etc.")
        Component(user_repository, "User Repository", "Spring Data", "Provides access to user information")
    }

    Rel(sign_in_controller, security_component, "Uses")
    Rel(security_component, user_repository, "Uses")

Ctrl + Enter|

Deployment Diagram

Code:

C4Deployment
    title Deployment diagram for Internet Banking System

    Deployment_Node(customer_computer, "Customer's Computer", "Microsoft Windows or Apple macOS") {
        Deployment_Node(web_browser, "Web Browser", "Chrome, Firefox, Safari, or Edge") {
            Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers")
        }
    }

    Deployment_Node(data_center, "Data Center") {
        Deployment_Node(server, "Application Server", "Ubuntu 20.04 LTS") {
            Container(api, "API Application", "Java, Spring Boot")
        }
        Deployment_Node(database_server, "Database Server", "Oracle") {
            ContainerDb(database, "Database", "Oracle 19c")
        }
    }

    Rel(spa, api, "Makes API calls to", "JSON/HTTPS")
    Rel(api, database, "Reads from and writes to", "JDBC")

Ctrl + Enter|

Additional Features

Boundaries and Enterprise

Code:

C4Context
    Enterprise_Boundary(enterprise, "Bank") {
        System(banking_system, "Internet Banking System")
        System(atm_system, "ATM System")
    }
    
    Person(customer, "Customer")
    System_Ext(mail_system, "E-mail System")
    
    Rel(customer, banking_system, "Uses")
    Rel(customer, atm_system, "Withdraws money using")
    Rel(banking_system, mail_system, "Sends e-mails using")

Ctrl + Enter|

Styling

The C4 diagrams automatically:

• Format different types of elements
• Show relationships and dependencies
• Display technology stacks
• Organize hierarchical structures
• Use consistent visual language

Tips

• Start with Context diagrams
• Add detail gradually through Container and Component views
• Keep diagrams focused and clear
• Include relevant technical details
• Show key relationships
• Use meaningful descriptions
• Include technology choices where relevant
• Consider the audience's technical level