C4 Modelizer – draw your C4 architecture in minutes!

#architecture #webdev #javascript #opensource

An open‑source React/TypeScript tool for creating, exploring, and sharing C4 diagrams (Context → Containers → Components → Code).
Repo: https://github.com/archivisio/c4_modelizer

Why another diagram editor?

The four layers of the C4 model often live in different places—one draw.io file here, a README.md there. C4 Modelizer brings everything together in one typed JSON source of truth. Add, move, and connect your building blocks, and the tool automatically keeps every view in sync.

Key features

Category	Details
Diagrams	System ↔ Container ↔ Component ↔ Code
Editing	Drag‑and‑drop canvas, contextual palette, rename via side panel
Relationships	Dependencies across any levels, animated arrows, labels + tech annotations
Cross‑connections	Link items across different levels without leaving the canvas
Import/Export	Versioned JSON, copy‑paste between instances
UX	Dark theme, i18n, MUI accessibility

(Yes, even the Code level—with an embedded Prism editor!)

Under the hood

React 19 + Vite → blazing‑fast HMR
@xyflow/react → interactive canvas
Material UI → consistent, accessible look‑and‑feel
Zustand persist → local storage for your models
Cypress + Jest → confidence on every pull request

Spin it up in 30 seconds

docker pull archivisio/c4_modelizer:latest
docker run -p 8080:80 archivisio/c4_modelizer:latest
# Open http://localhost:8080

Prefer hacking it locally?

git clone https://github.com/archivisio/c4_modelizer.git
cd c4_modelizer && npm install && npm run dev

A quick peek

Roadmap at a glance

🖼️ PNG/SVG export of your diagrams
🧜 Mermaid export for your CI/CD pipelines and docs

Join the adventure

Drop a ⭐ on the repo → https://github.com/archivisio/c4_modelizer
Have an idea? Open an issue

Happy mapping!

DEV Community