[docs: autonomous-visual-synthesis] Inject structural classDiagrams

architectures/backend-for-frontend/folder-structure.md

@@ -48,6 +48,22 @@ src/
 └── index.ts
 ```
 
+```mermaid
+classDiagram
+    src --|> handlers
+    handlers --|> userDashboardHandler_ts
+    src --|> config
+    src --|> index_ts
+    class src:::component
+    class handlers:::component
+    note for userDashboardHandler_ts "contains routing, business logic, and API calls"
+    class userDashboardHandler_ts:::component
+    class config:::component
+    class index_ts:::component
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+```
+
 ### ⚠️ Problem
 Placing routing, data aggregation, and downstream API calls in a single handler creates a monolithic structure within the BFF. It makes testing difficult, limits code reuse, and violates the single responsibility principle.
 
@@ -68,5 +84,36 @@ src/
 └── app.ts
 ```
 
+```mermaid
+classDiagram
+    src --|> routes
+    routes --|> dashboard_routes_ts
+    src --|> controllers
+    controllers --|> dashboard_controller_ts
+    src --|> services
+    services --|> aggregator_service_ts
+    src --|> clients
+    clients --|> user_client_ts
+    clients --|> order_client_ts
+    src --|> types
+    types --|> dtos_ts
+    src --|> app_ts
+    class src:::component
+    class routes:::component
+    class dashboard_routes_ts:::component
+    class controllers:::component
+    class dashboard_controller_ts:::component
+    class services:::component
+    class aggregator_service_ts:::component
+    class clients:::component
+    class user_client_ts:::component
+    class order_client_ts:::component
+    class types:::component
+    class dtos_ts:::component
+    class app_ts:::component
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+```
+
 ### 🚀 Solution
 Separate responsibilities clearly. `routes` handle HTTP concerns. `controllers` parse requests and format responses. `services` (or aggregators) orchestrate the calls to multiple downstream microservices. `clients` isolate the network logic (HTTP/gRPC) for communicating with downstream microservices. This structure enhances testability and maintainability.

architectures/event-sourcing/folder-structure.md

@@ -29,3 +29,35 @@ src/
 └── 📁 infrastructure/      # Event Store bindings, Repositories, Message Bus
     └── EventStoreRepository.ts
 ```
+
+```mermaid
+classDiagram
+    src --|> commands
+    commands --|> CreateOrderCommand_ts
+    src --|> events
+    events --|> OrderCreatedEvent_ts
+    src --|> aggregates
+    aggregates --|> OrderAggregate_ts
+    src --|> projections
+    projections --|> OrderReadModelProjector_ts
+    src --|> infrastructure
+    infrastructure --|> EventStoreRepository_ts
+    class src:::component
+    note for commands "Intentions to change state"
+    class commands:::component
+    class CreateOrderCommand_ts:::component
+    note for events "Facts that have occurred"
+    class events:::component
+    class OrderCreatedEvent_ts:::component
+    note for aggregates "Domain entities that process commands and emit events"
+    class aggregates:::component
+    class OrderAggregate_ts:::component
+    note for projections "Listeners that update read models based on events"
+    class projections:::component
+    class OrderReadModelProjector_ts:::component
+    note for infrastructure "Event Store bindings, Repositories, Message Bus"
+    class infrastructure:::component
+    class EventStoreRepository_ts:::component
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+```

architectures/hexagonal-architecture/folder-structure.md

@@ -65,6 +65,65 @@ src/
         └── 📁 external/     # 3rd Party APIs (SendGrid, Stripe)
             └── SendGridEmailSender.ts
 ```
+
+```mermaid
+classDiagram
+    src --|> core
+    core --|> domain
+    domain --|> User_ts
+    domain --|> AccountId_ts
+    core --|> ports
+    ports --|> in
+    in --|> CreateUserUseCase_ts
+    ports --|> out
+    out --|> UserRepositoryPort_ts
+    out --|> EmailSenderPort_ts
+    src --|> adapters
+    adapters --|> primary
+    primary --|> http
+    http --|> UserController_ts
+    primary --|> cli
+    adapters --|> secondary
+    secondary --|> database
+    database --|> PostgresUserRepository_ts
+    secondary --|> external
+    external --|> SendGridEmailSender_ts
+    class src:::component
+    note for core "The Heart of the System (No External Tech"
+    class core:::component
+    note for domain "Entities, Value Objects, Business Rules"
+    class domain:::component
+    class User_ts:::component
+    class AccountId_ts:::component
+    note for ports "Interfaces defining interactions"
+    class ports:::component
+    note for in "Primary Ports (Use Cases / Commands"
+    class in:::component
+    class CreateUserUseCase_ts:::component
+    note for out "Secondary Ports (SPIs / Repositories"
+    class out:::component
+    class UserRepositoryPort_ts:::component
+    class EmailSenderPort_ts:::component
+    note for adapters "Concrete implementations"
+    class adapters:::component
+    note for primary "Entry Points (Driving Adapters"
+    class primary:::component
+    note for http "REST Controllers / Express Routes"
+    class http:::component
+    class UserController_ts:::component
+    note for cli "Console Commands"
+    class cli:::component
+    note for secondary "Exit Points (Driven Adapters"
+    class secondary:::component
+    note for database "ORMs (TypeORM, Prisma"
+    class database:::component
+    class PostgresUserRepository_ts:::component
+    note for external "3rd Party APIs (SendGrid, Stripe"
+    class external:::component
+    class SendGridEmailSender_ts:::component
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+```
 ## ⛔ Boundary Constraints
 
 1. **Isolation in `core/`:** Code inside `core/` is forbidden from importing modules from `adapters/`.

architectures/micro-frontends/folder-structure.md

@@ -29,6 +29,23 @@ monorepo/
 │   ├── mfe-auth/ (imports directly from app-shell)
 ```
 
+```mermaid
+classDiagram
+    monorepo --|> packages
+    packages --|> shared_ui
+    packages --|> app_shell
+    packages --|> mfe_auth
+    class monorepo:::component
+    class packages:::component
+    note for shared_ui "contains business logic!"
+    class shared_ui:::component
+    class app_shell:::component
+    note for mfe_auth "imports directly from app-shell"
+    class mfe_auth:::component
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+```
+
 #### ⚠️ Problem
 Storing business logic in shared libraries or directly importing cross-package code defeats the purpose of micro-frontends. It binds deployment cycles together, meaning a change in `shared-ui` forces all dependent MFEs to re-test and redeploy simultaneously.
 
@@ -44,6 +61,32 @@ workspace/
 │   └── event-bus/ (Agnostic communication contract types)
 ```
 
+```mermaid
+classDiagram
+    workspace --|> apps
+    apps --|> app_shell
+    apps --|> mfe_catalog
+    apps --|> mfe_checkout
+    workspace --|> packages
+    packages --|> design_system
+    packages --|> event_bus
+    class workspace:::component
+    class apps:::component
+    note for app_shell "Entry point, Router, Module Federation config"
+    class app_shell:::component
+    note for mfe_catalog "Independent application"
+    class mfe_catalog:::component
+    note for mfe_checkout "Independent application"
+    class mfe_checkout:::component
+    class packages:::component
+    note for design_system "Pure, dumb UI components only"
+    class design_system:::component
+    note for event_bus "Agnostic communication contract types"
+    class event_bus:::component
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+```
+
 
 
 ### Structural Comparison: Monorepo vs Polyrepo for MFEs