Deep Thought

C4 Diagram

4 min read

C4 Diagram

Detailed Information: c4model.com

System context diagram

A System Context diagram is a good starting point for diagramming and documenting a software system, allowing you to step back and see the big picture. Draw a diagram showing your system as a box in the centre, surrounded by its users and the other systems that it interacts with.

Detail isn’t important here as this is your zoomed out view showing a big picture of the system landscape. The focus should be on people (actors, roles, personas, etc) and software systems rather than technologies, protocols and other low-level details. It’s the sort of diagram that you could show to non-technical people.

System context diagram (2)

  • Scope
    • A single software system
  • Primary elements
    • The software system in scope.
  • Supporting elements
    • People (e.g. users, actors, roles, or personas) and software systems (external dependencies) that are directly connected to the software system in scope. Typically these other software systems sit outside the scope or boundary of your own software system, and you don’t have responsibility or ownership of them.
  • Intended audience
    • Everybody, both technical and non-technical people, inside and outside of the software development team.
  • Recommended for most teams
    • Yes

Container diagram

Once you understand how your system fits in to the overall IT environment, a really useful next step is to zoom-in to the system boundary with a Container diagram. A “container” is something like a server-side web application, single-page application, desktop application, mobile app, database schema, file system, etc. Essentially, a container is a separately runnable/deployable unit (e.g. a separate process space) that executes code or stores data.

The Container diagram shows the high-level shape of the software architecture and how responsibilities are distributed across it. It also shows the major technology choices and how the containers communicate with one another. It’s a simple, high-level technology focussed diagram that is useful for software developers and support/operations staff alike.

Container diagram (2)

  • Scope
    • A single software system
  • Primary elements
    • Containers within the software system in scope.
  • Supporting elements
    • People and software systems directly connected to the containers.
  • Intended audience
    • Technical people inside and outside of the software development team; including software architects, developers and operations/support staff.
  • Recommended for most teams
    • Yes
  • Notes
    • This diagram says nothing about clustering, load balancers, replication, failover, etc because it will likely vary across different environments (e.g. production, staging, development, etc). This information is better captured via one or more deployment diagrams.

System context diagram - Notation

Person

    C4Context

        Person(customerA, "User", "A User with an account to have access to the system.")

System

C4Context
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

External System

C4Context
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")

System DB

C4Context
SystemDb(SystemD, "Banking System Database", "A system of the bank, with personal bank accounts.")

External System DB

C4Context
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

Relations (Unidirectional)

C4Context
System(SystemA, "System A")
System(SystemB, "System B")
Rel(SystemA, SystemB, "Sends e-mails", "SMTP")

Relations (Bidirectional)

C4Context
System(SystemA, "System A")
System(SystemB, "System B")
BiRel(SystemA, SystemB, "Uses")

Context Diagram - Notation

Person

    C4Container

        Person(customerA, "User", "A User with an account to have access to the system.")

Container Boundary

    C4Container

        Container_Boundary(b1, "BankingSystem") {
        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
        }

Container

    C4Container


        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")

External Container

C4Container
Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")

Container DB

C4Container
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")

External Container DB

C4Container
ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")

Relations (Unidirectional)

C4Container
Container(SystemA, "Container A")
Container(SystemB, "Container B")
Rel(SystemA, SystemB, "Sends e-mails", "SMTP")

Relations (Bidirectional)

C4Container
System(SystemA, "Container A")
System(SystemB, "Container B")
BiRel(SystemA, SystemB, "Uses")

Graph View

Backlinks