Design a new system from scratch
Open the visual editor and model a system node by node — context, containers, components, deployment, and behavioral flows. No account, no setup, no syntax to learn.
Open the editorCRAYON-C4
C4 structure · F4 flows · D4 deployment
Architecture that explains itself.
Sketch an idea in seconds or model an entire system — CRAYON-C4 connects structure to behavior, so every diagram tells the full story, to every audience.
Your architecture diagrams are already out of date.
Most software teams have three kinds of architecture documentation: the whiteboard photo nobody updated, the wiki page from the last big release — Confluence, Azure DevOps, SharePoint, take your pick — and the diagram that lives in the senior engineer’s head.
When someone new joins, they get a tour. When something breaks, nobody knows which service owns it. When a stakeholder asks how the system works, someone schedules a meeting.
CRAYON-C4 is built around a single connected model. Change one thing and every diagram updates. Add a behavioral flow and suddenly everyone understands not just what the system is — but what it does.
Model once. Communicate to everyone.
- 1
Build your architecture model
Draw your system at four levels — context, containers, components, deployment. Everything connects. Rename a container and it updates everywhere. No copy-paste, no drift.
- 2
Add behavioral flows
Layer F4 flows on top of your structure. Show how a user logs in, how an order gets processed, what a background job touches — the layer that makes diagrams useful for your whole team, not just the people who built it.
- 3
Share the right view to the right audience
A context diagram for your product review. A deployment diagram for DevOps. A component flow for onboarding. One model, every audience, no rework.
Two ways in.
Start a brand-new design, or point CRAYON-C4 at code you already have — and keep the model honest as the system evolves.
Document your system as it evolves
Generate a C4 model straight from your codebase, then curate it by hand. When the code changes, re-run the generator and merge — your manual edits are never thrown away. Free on every plan, including without an account.
See the document-from-code flowGenerate, curate, repeat — without losing your work.
- 1
Generate from code
Run the generator over your repository to extract a C4 / deployment / F4 model that matches what is actually there.
- 2
Curate by hand
Rename, describe, group, and lay out the model in the visual editor — the judgement a generator can’t make.
- 3
Re-run and merge
As the code moves, generate again and merge. A three-way reconcile keeps your curation and folds in what changed.
Re-running the generator never silently discards your manual curation — renames, descriptions, and layout survive every update.
Command-line generator
Run crayon-c4 in any repo — zero-config, outputs a portable model file.
VSCode extension
Generate, regenerate, and open the viewer without leaving your editor.
In-app import & merge
Bring a generated model into a project and review every change before it lands — on any plan, at any size.
For every team that builds software and needs to explain it.
Software teams
Stop rebuilding the same diagram for every meeting. Model your system once — every engineer, product manager, and new hire starts from the same shared picture, always current.
Startups · Scale-ups · Enterprise teams
Architects & tech leads
Architecture knowledge shouldn’t live in one person’s head. Give your whole team a shared model they can read, explore, and contribute to — at whatever level of detail they need.
Solution architects · Staff engineers · CTOs
Consultants & freelancers
Deliver architecture documentation your clients can actually use. No seat minimums. No DSL your clients need to learn. Export to PDF or Markdown, hand it over, and move on.
Independent architects · Tech consultants · Agencies
Students & learners
Learn C4 modeling by doing it. The free tier gives you a full visual editor, the complete C4 model, and export to share your work. Point it at a real codebase and read the model it generates — no setup, no cost, no size limit on what you can explore.
CS students · Self-taught developers · Bootcamps
Not another diagramming tool.
draw.io gives you boxes and lines. Structurizr gives you a DSL. IcePanel gives you a beautiful tool with a seat minimum. CRAYON-C4 gives you a connected model with behavioral flows, a generator that reads your codebase, and a free solo tier — with no learning curve.
| Capability | CRAYON-C4 | Structurizr | IcePanel | draw.io |
|---|---|---|---|---|
| C4 model support | ✓ | ✓ | ✓ | Partial |
| Behavioral flows (F4) | ✓ | — | — | — |
| Generate the model from code | ✓ | — | — | — |
| No DSL required | ✓ | — | ✓ | ✓ |
| Multi-audience views | ✓ | Partial | ✓ | — |
| Zero setup (web) | ✓ | — | ✓ | ✓ |
| Free solo tier | ✓ | ✓ | — | ✓ |
| Team collaboration | ✓ | — | ✓ | — |
F4 behavioral flows let you show what your system does — not just what it is. Overlay flows on any C4 level to communicate user journeys, data pipelines, background processes, or failure paths. No other C4 tool includes this.
Everything a modern architecture tool needs.
account_tree
C4 structure
Context, containers, and components in a single connected project. Model once, view at any level of detail — rename anything and it updates everywhere.
sync_alt
F4 behavioral flowsOnly in CRAYON-C4
Overlay behavioral flows on your architecture model to show what the system does at runtime. Unique to CRAYON-C4.
dns
D4 deployment
Map your architecture onto environments and infrastructure, and consolidate across levels the same way C4 and F4 do — one connected model, every layer.
edit_note
Live visual editor
Add nodes, draw relationships, restructure your model — all with instant visual preview. No syntax to remember.
terminal
Generate from code
Point the generator at a TypeScript, React, .NET or Java repository and get a model of what is actually there. Re-run it as the code moves — your renames, descriptions and layout survive every update. Free on every plan.
zoom_in
Drill-down navigation
Click into any container to see its components, into any component to see its relationships. Navigate your architecture like a map.
group
Team collaboration
Invite team members to view and edit. Everyone works from the same model, always in sync.
ios_share
Export everywhere
PNG, SVG, Markdown bundle, or print-ready PDF. Share with engineers, send to stakeholders, attach to a PR, include in a handover doc.
Start free. Scale when your team does.
Generate a model from your code and explore it free, at any size. No 5-seat minimums, no DSL to buy, no credit card to start.
Compare the versions
The same capabilities, side by side — pick the version that fits.
Free
Free forever
Elements you can edit
Up to 20
Up to 50
Up to 10,000
No limit
Named projects
Up to 20
Up to 20
Up to 30
No limit
Diagrams you can add
Up to 3
Up to 7
No limit
No limit
Team members per project
0
0
Up to 10
No limit
Account needed
—
✓
✓
✓
Full diagram editor
✓
✓
✓
✓
Generate & view a model of any size
✓
✓
✓
✓
JSON export & import
✓
✓
✓
✓
Diagram image export (SVG & PNG)
✓
✓
✓
✓
CLI generator & VS Code extension
✓
✓
✓
✓
Export themes, Markdown & PDF documents
—
—
✓
✓
Import & update projects from code
✓
✓
✓
✓
Auto-saved to cloud
—
—
✓
✓
Team collaboration
—
—
✓
✓
Invite members by email
—
—
✓
✓
Architecture decisions (ADRs)
—
—
✓
✓
Published read-only links
—
—
✓
—
Version history & restore
—
—
✓
✓
Copy styles & diagrams between projects
—
—
✓
✓
Self-hosted — run on your own infrastructure
—
—
—
✓
Prices exclude VAT. €18.15 incl. 21% Dutch VAT. Businesses in the EU with a valid VAT number are reverse-charged at checkout; other countries are charged their own rate.