Welcome to CRAYON-C4
CRAYON-C4 is an interactive architecture diagram tool. Sketch the system.
It covers the full picture of how a software system works — its structure, where it runs, and how work moves through it — in one browser-based workspace with nothing to install. These docs are organized around what you want to do. Pick your goal below, or type into the search box at the top of any docs page.
I want to…
| Goal | Start here |
|---|---|
| Understand the ideas first — what the three diagram types are for | Concepts |
| Build my first diagram — a guided 10-minute start | Getting started |
| Watch someone do it first — recorded walkthroughs | Video tutorials |
| Document my existing code & keep it in sync — generate a model from a codebase | Document from code |
| Model my system's structure — context, containers, drill-down | C4 guides |
| Show what runs where — environments, nodes, instances | Deployment guides |
| Explain a process — lanes, activities, hand-offs | Flow (F4) guides |
| Save, share, or export my work | Projects & sharing |
| Fix a problem — empty screens, imports, sign-in | Troubleshooting |
The whole story in one paragraph
A software system can be described from three angles, and CRAYON-C4 draws all three. A C4 diagram shows the system's structure: the parts it is built from and how they depend on each other, from a single big-picture box down to fine detail. A deployment diagram shows what is running where: the actual instances of those parts placed onto real infrastructure, per environment. An F4 flow shows how work moves: who does what, in what order, across the parts. All three views share one underlying model, so they can never tell two different stories about the same system. Each idea here is explained properly in Concepts — you never need to know any of them in advance to follow these docs.
Where next
- The three views of a system — pick the right diagram for the question you have.
- Getting started — tour the screens and build a first diagram.