What the C4 model is
The C4 model (created by Simon Brown) is a hierarchical notation for software architecture diagrams. It solves the main problem with ad-hoc architecture diagrams: everyone draws them at a different level of abstraction, making them impossible to compare or navigate.
C4 defines four levels of zoom. Each is a separate diagram. You pick the zoom level relevant to your audience.
The four C4 levels
| Level | Name | Audience | What it shows |
|---|---|---|---|
| L1 | Context | Non-technical stakeholders | Your system as one box, its users, and external dependencies |
| L2 | Container | Developers and architects | Deployable units inside your system (apps, APIs, databases, queues) |
| L3 | Component | Developers on a specific container | Major structural components inside one container |
| L4 | Code | Developers implementing a component | Classes, interfaces, and relationships (UML class diagram) |
C4 conventions enforced by flow-chart.io
- One zoom level per diagram — never mix Context and Container elements in the same diagram.
- Every relationship has a label describing what it does ("Reads customer data from", not just an arrow).
- Container nodes include a [Technology] annotation in square brackets.
- Person nodes are used for human users, not System nodes.
- Trust boundaries (dashed containers) group internal components visually.
- External systems are shaded differently from your own system's components.
How to generate a C4 diagram with flow-chart.io
- Create a free account — no credit card required.
- Select the C4 / IT & Systems Architecture domain from the domain picker.
- Describe your system and zoom level — "C4 Container diagram for the payment service — React SPA, Node API, Postgres database, and Redis cache. The SPA calls the API over HTTPS, the API reads/writes Postgres and caches in Redis."
- Edit and export — click any element to rename, reposition, or restyle it. Export as SVG for ADRs, PNG for presentations, or JSON for version control.
Frequently asked questions
- What is the C4 model for software architecture?
- The C4 model (created by Simon Brown) is a hierarchical approach to software architecture diagrams. It defines four levels of zoom: Context (the system and its users), Container (the deployable units inside the system), Component (the major structural components inside a container), and Code (the implementation detail). Each level is a separate diagram — you pick the zoom level relevant to your audience.
- Can AI generate C4 model diagrams?
- Yes. flow-chart.io generates C4 diagrams as typed scene graph objects — Person nodes, System nodes, Container nodes, and Component nodes — following C4 conventions for shape, labeling, and relationship direction. The AI applies the correct zoom-level abstraction based on your prompt.
- What is the difference between C4 Context and Container diagrams?
- A Context diagram shows your system as a single box, the users who interact with it (Person nodes), and the external systems it depends on (System nodes). A Container diagram zooms into your system and shows the deployable units: web apps, APIs, databases, message queues. Context is for non-technical stakeholders; Container is for developers and architects.
- Does flow-chart.io follow Simon Brown's C4 conventions?
- Yes. The IT & systems architecture domain in flow-chart.io is trained on C4 conventions: Person nodes for users, System nodes with technology labels, Container nodes with [Technology] annotations, named relationships with direction, and trust boundaries as dashed containers. The generation pipeline enforces one zoom level per diagram.
- How do I generate a C4 Container diagram from a C4 Context diagram?
- Describe the zoom level you want in your prompt: 'C4 Container diagram for the payment service — show the React frontend, Express API, Postgres database, and Redis cache.' The AI generates the appropriate Container-level nodes without including Person or external System nodes from the Context level.
- What C4 standards does flow-chart.io audit against?
- The standards audit checks for C4 conventions: each relationship has a label describing what it does ('Reads from', 'Sends events to'), Container nodes include technology annotations, trust boundaries are drawn around internal components, and the correct zoom level is used consistently within a single diagram.
- Can I use C4 diagrams for architecture decision records?
- Yes. Export C4 diagrams as SVG (for vector embedding in documents) or PNG 2×/4× (for presentations). The JSON export captures the full typed structure for re-import and versioning. C4 Context and Container diagrams are the standard visual component of architecture decision records.