C4 Modelizer – draw your C4 architecture in minutes!

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

May 11, 2025 - 00:32

C4 Modelizer – draw your C4 architecture in minutes!

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