# jgtamanini/c4diagrams architecture

> Architecture diagram of the GitHub repository jgtamanini/c4diagrams, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jgtamanini/c4diagrams
- Repository: https://github.com/jgtamanini/c4diagrams

## Overview

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: [`frontend/src/App.jsx`](https://github.com/jgtamanini/c4diagrams/blob/main/frontend/src/App.jsx) (Frontend routes), [`backend/src/controllers/auth.controller.js`](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/controllers/auth.controller.js) (Auth controller), [`backend/src/services/user.service.js`](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/services/user.service.js) (User service), [`backend/src/repositories/user.repository.js`](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/repositories/user.repository.js) (User repository)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Web interface"]
  node_app["Frontend routes<br/>[App.jsx]"]
  node_authpages["Account screens"]
end

subgraph group_modeling["C4 modeling"]
  node_canvas["Diagram canvas<br/>[Canvas.jsx]"]
  node_levels["C4 levels<br/>[README.md]"]
  node_validation["Diagram validation<br/>[README.md]"]
  node_ai["AI assistance<br/>[README.md]"]
  node_text["Structured text input<br/>[README.md]"]
end

subgraph group_identity["Account services"]
  node_api["API application<br/>[app.js]"]
  node_authroutes["Auth routes<br/>[authRoutes.js]"]
  node_controller["Auth controller<br/>[auth.controller.js]"]
  node_userservice["User service<br/>[user.service.js]"]
  node_authservice["Login service<br/>[auth.service.js]"]
end

subgraph group_platform["Data and integrations"]
  node_repository["User repository<br/>[user.repository.js]"]
  node_database[("PostgreSQL<br/>[database.js]")]
  node_emailservice["Email service<br/>[email.service.js]"]
end

node_user(("User"))
node_resend["Resend"]

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_canvas
node_app -->|"routes to"| node_authpages
node_api -->|"mounts"| node_authroutes
node_authroutes -->|"dispatches"| node_controller
node_controller -->|"calls"| node_userservice
node_controller -->|"calls"| node_authservice
node_userservice -->|"reads/writes"| node_repository
node_userservice -->|"requests email"| node_emailservice
node_authservice -->|"reads/writes"| node_repository
node_repository -->|"queries"| node_database
node_emailservice -->|"sends email"| node_resend

click node_app "https://github.com/jgtamanini/c4diagrams/blob/main/frontend/src/App.jsx"
click node_canvas "https://github.com/jgtamanini/c4diagrams/blob/main/frontend/src/components/Canvas/Canvas.jsx"
click node_levels "https://github.com/jgtamanini/c4diagrams/blob/main/README.md"
click node_validation "https://github.com/jgtamanini/c4diagrams/blob/main/README.md"
click node_ai "https://github.com/jgtamanini/c4diagrams/blob/main/README.md"
click node_text "https://github.com/jgtamanini/c4diagrams/blob/main/README.md"
click node_authpages "https://github.com/jgtamanini/c4diagrams/tree/main/frontend/src/pages"
click node_api "https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/app.js"
click node_authroutes "https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/routes/authRoutes.js"
click node_controller "https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/controllers/auth.controller.js"
click node_userservice "https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/services/user.service.js"
click node_authservice "https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/services/auth.service.js"
click node_repository "https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/repositories/user.repository.js"
click node_database "https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/config/database.js"
click node_emailservice "https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/services/email.service.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_authpages,node_user toneBlue
class node_canvas,node_levels,node_validation,node_ai,node_text toneAmber
class node_api,node_authroutes,node_controller,node_userservice,node_authservice toneMint
class node_repository,node_database,node_emailservice toneRose
class node_resend toneIndigo
```

## Components

### Web interface

- [Frontend routes](https://github.com/jgtamanini/c4diagrams/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Account screens](https://github.com/jgtamanini/c4diagrams/tree/main/frontend/src/pages): `frontend/src/pages`

### C4 modeling

- [Diagram canvas](https://github.com/jgtamanini/c4diagrams/blob/main/frontend/src/components/Canvas/Canvas.jsx): `frontend/src/components/Canvas/Canvas.jsx`
- [C4 levels](https://github.com/jgtamanini/c4diagrams/blob/main/README.md): `README.md`
- [Diagram validation](https://github.com/jgtamanini/c4diagrams/blob/main/README.md): `README.md`
- [AI assistance](https://github.com/jgtamanini/c4diagrams/blob/main/README.md): `README.md`
- [Structured text input](https://github.com/jgtamanini/c4diagrams/blob/main/README.md): `README.md`

### Account services

- [API application](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/app.js): `backend/src/app.js`
- [Auth routes](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/routes/authRoutes.js): `backend/src/routes/authRoutes.js`
- [Auth controller](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/controllers/auth.controller.js): `backend/src/controllers/auth.controller.js`
- [User service](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/services/user.service.js): `backend/src/services/user.service.js`
- [Login service](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/services/auth.service.js): `backend/src/services/auth.service.js`

### Data and integrations

- [User repository](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/repositories/user.repository.js): `backend/src/repositories/user.repository.js`
- [PostgreSQL](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/config/database.js): `backend/src/config/database.js`
- [Email service](https://github.com/jgtamanini/c4diagrams/blob/main/backend/src/services/email.service.js): `backend/src/services/email.service.js`

### Other components

- **User**
- **Resend**

## Connections

- 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