A free C4 model maker, one level at a time
- Free
- No sign-up
- Works offline
Draw the context, then the containers, then the components — and press Present to take each audience through the level that is theirs.
Present reveals your C4 model diagram one step at a time, on its own.
The C4 model is a way of describing software architecture at four zoom levels, so a diagram can be aimed at one audience instead of trying to serve everyone. Free to draw, no sign-up, kept in your browser.
Its real contribution is the discipline of not mixing levels. Most architecture diagrams fail because a database sits next to a business capability next to a Kubernetes pod, and no reader knows what altitude they are at.
Context, container, component — and who each is for
Level 1, System Context: your system as one box, with the people and external systems around it. The audience is everyone, including non-technical stakeholders, and it should fit comfortably on a slide.
Level 2, Container: the separately deployable things inside — web application, API, database, message broker — with the technology and the protocol on each connection. This is the level most teams need most often.
Level 3, Component: the major building blocks inside one container. Worth drawing only for containers complex enough to earn it.
Level 4 is code, and is generated rather than drawn. In practice most teams should keep levels 1 and 2 current and treat level 3 as occasional.
The rule that makes C4 work
One diagram, one level. The moment a container diagram gains a box that is really a component, and another that is really an external system, it has stopped being a C4 diagram and become the ordinary architecture picture C4 was invented to replace.
Label every relationship with both purpose and mechanism — "Reads orders from, via JSON/HTTPS". An unlabelled arrow between two containers is the single least useful mark in an architecture diagram.
Present the zoom
Press Present and the diagram builds element by element, narrated — the context first, then each container and the reason it exists. It is the fastest way to bring a new engineer onto a system, and far better than emailing them three static images with no order.
How to make a C4 diagram, start to export
Open the editor and draw the context first: your system, its users, its neighbours. Then a second diagram for containers, labelling every connection with its technology. Export PNGs for the wiki, or a PDF for review.
Free, private, and offline
Diagramium is free and there is no paid tier. Draw, present and export PNG or SVG without an account; a free account unlocks the animated export formats — GIF, video and animated SVG.
Your diagram is stored in your own browser, not on a server. It keeps working with the network off, and nothing is uploaded unless you choose to publish it.
Frequently asked questions
Is this C4 model maker free?
Diagramium is free and there is no paid tier. Draw, present and export PNG or SVG without an account; a free account unlocks the animated export formats — GIF, video and animated SVG.
What are the four C4 levels?
Context (the system and its neighbours), Container (separately deployable pieces), Component (blocks inside a container) and Code. Most teams maintain the first two and draw the third only where it earns its keep.
What counts as a container in C4?
Something separately deployable or runnable — a web app, an API, a database, a message broker, a mobile app. Not a Docker container specifically, which is the commonest confusion with the name.
Do I need all four levels?
No. Context and container answer most questions. Component diagrams age fastest and are worth drawing only for the parts complex enough to justify maintaining them.
How is C4 different from an ordinary architecture diagram?
C4 fixes the altitude of each diagram and its audience. An ordinary architecture diagram usually mixes levels, which is why two readers take away different systems.
More diagram makers
A flowchart maker that walks its own path · The sequence diagram maker that draws what you type · A mind map maker that turns brainstorms into walkthroughs · An architecture diagram maker that walks the request path · A UML diagram maker that walks through your design · An ER diagram maker that presents your schema step by step · A data flow diagram maker that presents the path data takes · The animated diagram maker where diagrams explain themselves · An AI Diagram Maker for the Assistant You Already Use · A free timeline maker for roadmaps, launches, and history · The Gantt Chart Maker That Explains Your Schedule · Software release plan maker: from code freeze to hotfix lane · RASCI matrix maker: one lane per role, every hand-off explicit · A free org chart maker that presents itself level by level · A free Venn diagram maker where the overlap is the point · A free process map maker for the way work actually runs · A free state machine diagram maker that walks every transition · A free concept map maker where every link says what it means · A free customer journey map maker that shows where it hurts · A free decision tree maker where every path reaches an answer · A free fishbone diagram maker for finding the actual cause · A free network diagram maker that keeps your topology private · A free use case diagram maker that shows who can do what · A free threat model maker that stays on your machine · A free BPMN diagram maker for processes two teams must agree on · A free kanban board maker for explaining how work flows · A free sitemap diagram maker for planning a site's structure