academia/docs/architecture/diagrams/04-components.puml

135 lines
2.8 KiB
Plaintext

@startuml components
!theme plain
skinparam componentStyle uml2
skinparam packageStyle rectangle
skinparam componentBackgroundColor #F8F9FA
skinparam componentBorderColor #495057
skinparam packageBackgroundColor #FFFFFF
skinparam packageBorderColor #DEE2E6
title Sistema de Registro de Estudiantes - Arquitectura de Componentes
package "Frontend (Angular 21)" as frontend {
[App Component] as app
[Student List] as studentList
[Student Form] as studentForm
[Enrollment Page] as enrollPage
[Classmates Page] as classmates
package "Core" {
[Apollo Client] as apollo
[Student Service] as studentSvc
[Enrollment Service] as enrollSvc
[Connectivity Service] as connSvc
[Error Handler] as errorHandler
}
package "Shared" {
[Connectivity Overlay] as overlay
[Loading Spinner] as spinner
[Confirm Dialog] as dialog
}
}
package "Backend (.NET 10)" as backend {
package "Host" as host {
[Program.cs] as program
[DI Container] as di
}
package "Adapters" as adapters {
package "Driving (Primary)" {
[GraphQL API\n(HotChocolate)] as graphql
[Query] as query
[Mutation] as mutation
[Types] as types
}
package "Driven (Secondary)" {
[Repositories] as repos
[DataLoaders] as loaders
[DbContext] as dbContext
}
}
package "Application" as application {
[Commands] as commands
[Queries] as queries
[Handlers] as handlers
[Validators] as validators
[DTOs] as dtos
}
package "Domain" as domain {
[Entities] as entities
[Value Objects] as valueObjects
[Domain Services] as domainSvc
[Ports (Interfaces)] as ports
}
}
database "SQL Server 2022" as sqlserver {
[Students]
[Subjects]
[Professors]
[Enrollments]
}
cloud "Browser" as browser
' Conexiones Frontend
browser --> app
app --> studentList
app --> studentForm
app --> enrollPage
app --> classmates
app --> overlay
studentList --> studentSvc
studentForm --> studentSvc
enrollPage --> enrollSvc
classmates --> enrollSvc
overlay --> connSvc
studentSvc --> apollo
enrollSvc --> apollo
connSvc ..> errorHandler
' Conexiones Backend
apollo --> graphql : HTTP/GraphQL
graphql --> query
graphql --> mutation
query --> handlers
mutation --> handlers
handlers --> validators
handlers --> commands
handlers --> queries
commands --> domainSvc
queries --> repos
domainSvc --> entities
domainSvc --> valueObjects
repos --> dbContext
loaders --> dbContext
dbContext --> sqlserver
' Implementación de puertos
repos ..|> ports : implements
note right of domain
<b>Regla de Dependencia:</b>
Domain no depende
de capas externas
end note
note bottom of graphql
Endpoints:
- /graphql
- /health
end note
@enduml