System context, container & component views

Free C4 Diagram Maker

A C4 diagram is a software architecture diagram that shows a system at up to four zoom levels, system context, containers, components, and code, using the C4 model by Simon Brown. Describe your system once in Structurizr DSL below and get the first three levels, then export Mermaid C4, Structurizr DSL, SVG, or PNG.

No login and no AI. Diagrams are drawn in your browser and saved only on this device.

Architecture model

One model, every level. The preview updates as you type and autosaves on this device.

Example models

1,427/20,000 characters

Syntax cheat sheet

A subset of the Structurizr DSL, so the exported workspace opens in Structurizr too. Values are in order: name, description, technology (containers and components only), tags.

user = person "Name" "Description"
A person: a user, role or persona. Add "External" as a third value to mark someone outside your organization.
app = softwareSystem "Name" "Description" "External"
A software system. Tag systems you do not build "External" so they render grey.
app = softwareSystem "Name" {
  web = container "Name" "Description" "Technology"
}
Containers go inside a system block: apps, APIs, databases, queues. Tag a data store "Database" or a broker "Queue" for the matching shape.
api = container "API" "..." "Node.js" {
  auth = component "Auth" "..." "NextAuth"
}
Components go inside a container block: controllers, services, modules.
user -> web "Uses" "HTTPS"
A relationship with a description and an optional technology. Relationships between nested elements also appear, lifted, on higher-level views.
// comment
Lines starting with // or # are ignored. A full Structurizr workspace { model { ... } views { ... } } block also works; views are regenerated.

Preview

Loading the diagram renderer...

  • Person
  • Your system
  • Container
  • Component
  • External
  • Dashed box: boundary of the element you zoomed into

Drawn with Mermaid C4 (MIT license) in strict security mode; Mermaid's automatic C4 layout is basic, so paste the DSL into Structurizr for hand-tuned layouts. Share links keep the model after the #, which is never sent to our server.

What belongs at each C4 level

Based on the C4 model. Most teams only need levels 1 and 2; add level 3 for the containers that are hard to understand.

  • Level 1

    System Context

    Your system as one box, the people who use it, and the external systems it depends on. No technology choices yet.

    Audience: Everyone, including non-technical people

  • Level 2

    Container

    The apps, APIs, databases, and queues inside your system, the technology of each, and how they talk to each other.

    Audience: Developers, architects, operations

  • Level 3

    Component

    The main building blocks inside one container, such as controllers, services, and repositories, and their responsibilities.

    Audience: Developers working on that container

  • Level 4

    Code

    Classes, interfaces, or tables for one component. Usually generated from code; use the UML Diagram Maker if you need it.

    Audience: Developers, only when it helps

Tips for clear C4 diagrams

  • Give every box a name, a type, a one-line responsibility, and, from level 2 down, its technology.
  • Label every line with what it does ("Sends invoices using") and, where useful, the protocol.
  • Mark systems you do not own as External so readers see where your responsibility ends.
  • Keep each diagram to about 20 boxes; split a crowded view rather than shrinking it.

How to make a C4 diagram

Five steps from a blank page to three levels of architecture diagrams.

  1. 1

    List people and systems

    Add the users and the external systems your software talks to with person and softwareSystem lines.

  2. 2

    Open your system

    Inside your software system block, add one container per app, API, database, or queue, with its technology.

  3. 3

    Add components

    Inside the most important container, add its main components such as controllers and services.

  4. 4

    Connect them

    Write relationships like web -> api "Calls" "JSON/HTTPS". Calls between nested parts appear on higher-level views too.

  5. 5

    Zoom and export

    Switch between Level 1, 2 and 3, then copy Mermaid C4 code or the Structurizr DSL, or download SVG or PNG.

C4 diagram FAQ

What is a C4 diagram?

A C4 diagram is a software architecture diagram drawn with the C4 model, created by Simon Brown. It describes a system as a hierarchy of four levels of abstraction: system context, containers, components, and code. Each level zooms in on one box from the level above, like zooming in on a map.

What are the 4 levels of the C4 model?

Level 1, System Context, shows your system as one box with the people and other systems it interacts with. Level 2, Container, opens the system to show its applications and data stores. Level 3, Component, opens one container to show its main building blocks. Level 4, Code, shows classes or tables and is usually generated by an IDE or left out.

What is a container in the C4 model?

In C4, a container is something that has to be running for the system to work: a web app, mobile app, API, serverless function, database, file store, or message broker. It is a separately runnable or deployable unit and has nothing to do with Docker, although a container is often deployed as one.

What is the difference between C4 and UML?

UML is a large, formal notation with 14 diagram types aimed at detailed design. C4 is a lightweight set of four abstraction levels that is notation-independent: boxes and lines with clear labels are enough. Teams often use C4 for the big picture and add a UML sequence or class diagram where more detail helps.

How do I make a C4 diagram for free?

Describe your people, software systems, containers, components and relationships in the Structurizr DSL text box on this page, or start from a template. The preview draws the system context, container and component views, and you can export Mermaid C4 code, a Structurizr workspace, SVG or PNG without signing up.

Related free tools

UML Diagram Maker

Drill into a component with class, sequence, or state diagrams (C4 level 4).

Tech Stack Recommender

Pick the technologies for each container in your design.

Technical Requirements Template

Pair your diagrams with a structured technical requirements document.

API Documentation Generator

Document the APIs between your containers.

Legacy Application Modernization Assessment

Map an old system with C4, then score how ready it is to modernize.

Software Project Estimation Tool

Estimate the effort to build the architecture you drew.

Want this architecture built?

Elite Coders gives you AI-powered developers that join your Slack and GitHub, review your design, and start shipping from day one.

Start your free trial