Lucent Owl logo Lucent Owl

C4 Model Diagrams

Last updated:

2 related guides
c4 diagrams architecture-diagrams documentation system-design modeling

The C4 Abstractions

Structure

System, container, component, and code, each nested in the one above.

The C4 Abstractions Each level is made of the one below it: a system holds containers, a container holds components, a component holds code. 1 · CONTEXT people, systems 2 · CONTAINER apps, data stores 3 · COMPONENT parts inside one 4 · CODE classes, tables Customer [Person] browses and buys Online Store [Software system] delivers value to users Payment Gateway [External system] someone else’s system ONLINE STORE — SYSTEM BOUNDARY Web App [Container: React SPA] runs in the browser Orders API [Container: ASP.NET Core] order logic over HTTP Orders Database [Container: PostgreSQL] orders and line items ORDERS API — CONTAINER BOUNDARY Order Validator [Component] checks stock and price Payment Client [Component] calls the gateway Order Repository [Component] reads and writes orders ORDER VALIDATOR — COMPONENT OrderValidator [Class] IStockService [Interface] PriceRule [Class] system in focus internal element external system scope boundary

System Context for Online Store

C4 · Context

The Online Store, its users, and the systems it depends on.

System Context for Online Store What the Online Store is for, who uses it, and which outside systems it depends on, with no technology detail. Customer [Person] buys from the store Support agent [Person] handles order queries Online Store [Software system] sells goods online Payment Gateway [External system] cards and refunds Email system [External system] transactional email Shipping Provider [External system] labels and tracking Browses, places orders [HTTPS] Answers tickets [HTTPS] Takes payment [REST/HTTPS] Sends receipts [SMTP] Books delivery [REST/HTTPS] system in focus person external system every line is one-way and labeled

Container Diagram for Online Store

C4 · Container

The applications and data stores inside the Online Store.

Container Diagram for Online Store The separately running applications and data stores inside the Online Store, the technology of each, and where the network calls are. ONLINE STORE — SOFTWARE SYSTEM Customer [Person] browses and buys Support agent [Person] handles queries Web App [Container: React SPA] customer storefront Admin Portal [Container: Blazor] internal back office Orders API [Container: ASP.NET Core] places and reads orders Orders Database [Container: PostgreSQL] orders and line items Message Queue [Container: RabbitMQ] order events Payment Gateway [External system] cards and refunds Email system [External system] transactional mail Browses, orders [HTTPS] Manages orders [HTTPS] Calls API [JSON/HTTPS] Calls API [JSON/HTTPS] Reads and writes [SQL/TCP] Publishes events [AMQP] Takes payment [REST/HTTPS] Queues email [SMTP] container data store external system person system boundary lines are one-way and labeled

Component Diagram for the Orders API

C4 · Component

The parts inside the Orders API container.

Component Diagram for the Orders API The parts inside one container, what each is responsible for, and which of them reach outside the container. ORDERS API — CONTAINER BOUNDARY Web App [Container: React SPA] customer storefront Admin Portal [Container: Blazor] internal back office Orders Controller [Component: controller] maps HTTP to use cases Order Validator [Component] checks stock and price Payment Client [Component: HttpClient] wraps the gateway API Order Repository [Component: EF Core] reads and writes orders Payment Gateway [External system] cards and refunds Orders Database [Container: PostgreSQL] orders and line items Places orders [JSON/HTTPS] Manages orders [JSON/HTTPS] Validates order Charges the card Loads and saves Takes payment [REST/HTTPS] Reads and writes [SQL/TCP] component or container data store external system container boundary

Dynamic Diagram for Checkout

C4 · Dynamic

One checkout flow, numbered across the containers.

Dynamic Diagram for Checkout One flow across the same containers as the static diagram, with the interactions numbered in the order they happen. Customer [Person] browses and buys Web App [Container: React SPA] customer storefront Orders API [Container: ASP.NET Core] places and reads orders Payment Gateway [External system] cards and refunds Orders Database [Container: PostgreSQL] orders and line items Message Queue [Container: RabbitMQ] order events 1 · Checks out 2 · POST /orders [JSON/HTTPS] 3 · Authorizes [REST/HTTPS] 4 · Saves the order [SQL/TCP] 5 · Publishes OrderPlaced [AMQP] 6 · Returns order id person container data store external system numbers give the order of the interactions

Deployment Diagram for Online Store

C4 · Deployment

Where each container runs, from cloud region down to process.

Deployment Diagram for Online Store Where each container actually runs, with deployment nodes nested from cloud region down to the process that hosts a container. Customer’s device [Deployment node: browser] AWS us-east-1 [Deployment node: cloud region] ECS cluster [Deployment node: Fargate, 3 tasks] Amazon RDS [Deployment node: Multi-AZ] Amazon MQ [Deployment node] Web App [Container: React SPA] served from a CDN Orders API [Container: ASP.NET Core] places and reads orders Notification Worker [Container: .NET worker] sends receipts Orders Database [Container: PostgreSQL 16] orders and line items Message Queue [Container: RabbitMQ] order events Calls the API [JSON/HTTPS] Reads and writes [SQL/TCP] Consumes [AMQP] deployment node container data store nodes nest: a region holds a cluster holds a task

System Landscape

C4 · Context

Many systems across one organisation, none zoomed into.

System Landscape Many systems and the people who use them across one organisation, placed side by side with no system singled out for a zoom. Customer [Person] browses and buys Support agent [Person] handles tickets Warehouse staff [Person] picks and packs Finance analyst [Person] closes the books Online Store [Software system] orders and checkout Support Desk [Software system] tickets and chat Warehouse Mgmt [Software system] stock and picking Finance Ledger [Software system] invoices and GL Data Warehouse [Software system] reporting and BI Buys Answers Picks stock Reconciles Sends orders Sends tickets Sends movements Sends postings person covered elsewhere other system a landscape places many systems and never zooms into one

C4 Notation Rules

Rules

A well-formed element and relationship, beside an unlabelled one.

C4 Notation Rules What a correctly formed C4 element and relationship carry, and why an unlabelled bidirectional line tells a reader nothing. EVERY ELEMENT Orders API [Container: ASP.NET Core] Places and retrieves orders the name of the element its type, plus technology for containers and components one line on what it does EVERY RELATIONSHIP Orders API [Container] Orders Database [Container] Reads from and writes to [SQL/TCP] one direction, a verb phrase, and the protocol NOT THIS Orders API Orders Database Uses a line with no direction and no verb says nothing Every diagram also carries a title naming its type and scope, and a key explaining its shapes, colours, and line styles.

Found this useful? Share it:

Share on LinkedIn