How jgtamanini/c4diagrams works
C4Diagram is a web tool for guided C4 architecture modeling, with a React frontend and an Express/PostgreSQL backend. The documented product workflow is to create a diagram visually or with structured text, work through C4 abstraction levels, and receive validation and AI assistance. Sampled code confirms the Canvas route and backend account flows, but not diagram persistence, validation, or AI wiring; those documented capabilities are shown without speculative runtime connections.
Main entry points: App.jsx Frontend routes · auth.controller.js Auth controller · user.service.js User service · user.repository.js User repository
Components 17
Web interface
- Frontend routes
frontend/src/App.jsx - Account screens
frontend/src/pages
C4 modeling
- Diagram canvas
frontend/src/components/Canvas/Canvas.jsx - C4 levels
README.md - Diagram validation
README.md - AI assistance
README.md - Structured text input
README.md
Account services
- API application
backend/src/app.js - Auth routes
backend/src/routes/authRoutes.js - Auth controller
backend/src/controllers/auth.controller.js - User service
backend/src/services/user.service.js - Login service
backend/src/services/auth.service.js
Data and integrations
- User repository
backend/src/repositories/user.repository.js - PostgreSQL
backend/src/config/database.js - Email service
backend/src/services/email.service.js
Other components
- User
- Resend
Connections 12
- User → Frontend routes: uses
- Frontend routes → Diagram canvas: routes to
- Frontend routes → Account screens: routes to
- API application → Auth routes: mounts
- Auth routes → Auth controller: dispatches
- Auth controller → User service: calls
- Auth controller → Login service: calls
- User service → User repository: reads/writes
- User service → Email service: requests email
- Login service → User repository: reads/writes
- User repository → PostgreSQL: queries
- Email service → Resend: sends email