Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
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 |
(
, 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
docker pull archivisio/c4_modelizer:latest
docker run -p 8080:80 archivisio/c4_modelizer:latest
# Open
Prefer hacking it locally?
git clone
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
Drop a
on the repo → Have an idea? Open an issue
Happy mapping!