de_DEen_USes_ESfa_IRfr_FRhi_INja

Un estudio de caso completo paso a paso: Aplicación del modelo C4 al sistema de banca en línea (Big Bank plc)

El modelo C4, creado por Simon Brown, es una forma sencilla, jerárquica y amigable para desarrolladores de visualizar la arquitectura de software. Utiliza cuatro niveles de abstracción (de ahí el «C4») para describir un sistema desde una visión de alto nivel hasta detalles a nivel de código:

  1. Contexto del sistema (Nivel 1) – La visión general: el sistema y sus usuarios/dependencias externas.
  2. Contenedores (Nivel 2) – Elecciones tecnológicas de alto nivel y responsabilidades.
  3. Componentes (Nivel 3) – Principales bloques lógicos dentro de un contenedor.
  4. Código (Nivel 4) – Detalles opcionales a nivel de clase o estructura de código.

Está respaldado por tres tipos adicionales de diagramas:

  • Mapa del sistema
  • Dinámico
  • Despliegue

El modelo es independiente de notación (puedes usar cualquier herramienta de diagramación) y se centra en la claridad, la consistencia y los detalles adecuados para el público objetivo. Es ampliamente adoptado porque evita los diagramas de arquitectura de tipo «bola de lodo» y escala desde bocetos en pizarra hasta documentación automatizada.

Para este estudio de caso dirigido, utilizamos el ejemplo canónico del sitio web oficial de C4: Sistema de banca en línea para la ficticia «Big Bank plc». El objetivo comercial es permitir a los clientes personales ver sus cuentas y realizar pagos en línea, al tiempo que se integra con los sistemas centrales existentes del banco.

Revisaremos cada nivel con:

  • Propósito y público objetivo
  • Elementos clave + responsabilidades
  • Relaciones
  • Un diagrama C4 de PlantUML listo para usar diagrama C4 de PlantUML (PlantUML admite la sintaxis C4 y se representa magníficamente en la mayoría de los visores de Markdown)
  • Razón y decisiones clave
  • Cómo ayuda el diagrama a los interesados

Paso 1: Definir el alcance y crear el diagrama de contexto del sistema (Nivel 1)

Propósito: Mostrar cómo se integra el nuevo Sistema de Banca por Internet en el mundo. Público objetivo: interesados del negocio, personas no técnicas y nuevos miembros del equipo.

Elementos (desde el ejemplo oficial):

  • Cliente de Banca Personal (Persona) – Un cliente con una o más cuentas bancarias personales.
  • Sistema de Banca por Internet (Sistema de software) – El nuevo sistema que estamos construyendo.
  • Sistema de Banca Principal (Sistema de software, existente) – Mainframe que gestiona los datos del cliente, las cuentas y las transacciones.
  • Sistema de correo electrónico (Sistema de software, externo) – Servicio Simple de Correo Electrónico de Amazon Web Services (AWS SES) para enviar confirmaciones.

Relaciones:

  • Cliente → utiliza → Sistema de Banca por Internet (para ver cuentas y realizar pagos)
  • Sistema de Banca por Internet → utiliza → Sistema de Banca Principal (para datos de cuentas y pagos)
  • Sistema de Banca por Internet → envía correo electrónico a través de → Sistema de correo electrónico

Aquí está el Diagrama de contexto C4 de PlantUML:

PlantUML


Editar PlantUML en VPasCode
PlantUML Edit PlantUML in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Diagrama de contexto del sistema (Nivel 1) para el Sistema de Banca por Internet

Person(cliente, "Cliente de Banca Personal", "Un cliente con una o más cuentas bancarias personales.")
System(sistema_banca_internet, "Sistema de Banca por Internet", "El nuevo sistema para ver cuentas y realizar pagos.")
System(sistema_banca_principal, "Sistema de Banca Principal", "Mainframe existente que gestiona datos del cliente, cuentas y transacciones.")
System_Ext(sistema_correo, "Sistema de correo electrónico", "Servicio Simple de Correo Electrónico de Amazon Web Services (AWS SES) para enviar confirmaciones.")

Rel(cliente, sistema_banca_internet, "Utiliza")
Rel(sistema_banca_internet, sistema_banca_principal, "Utiliza")
Rel(sistema_banca_internet, sistema_correo, "Envía correo electrónico a través de")

Lay_D(cliente, sistema_banca_internet)
Lay_D(sistema_banca_internet, sistema_banca_principal)
Lay_U(sistema_correo, sistema_banca_internet)
@enduml
Edit PlantUML in VPasCode



Editar PlantUML en VPasCode

Razón y valor: Este único diagrama responde de inmediato a «¿Qué estamos construyendo y con quién se comunica?». Evita el crecimiento de alcance al hacer explícitas las dependencias externas. A los interesados del negocio les encanta porque aún no hay detalles tecnológicos.

Paso 2: Diagrama de contenedores (Nivel 2)

Propósito: Amplíe el Sistema de Banca en Línea y muestre las unidades principales desplegables/ejecutables (contenedores) y sus opciones tecnológicas. Público objetivo: arquitectos, desarrolladores principales, operaciones.

Contenedores dentro del Sistema de Banca en Línea:

  • Aplicación de página única (Navegador web – JavaScript + Angular) – Interfaz de usuario completa de banca en línea.
  • Aplicación móvil (Dispositivo móvil – nativo iOS/Android o React Native) – Funcionalidad limitada para uso en movimiento.
  • Aplicación de API (Lado del servidor – Java + Spring Boot) – API de JSON/HTTPS utilizada por ambos front-ends.
  • Base de datos (Base de datos relacional – PostgreSQL) – Almacena datos de sesión, preferencias del usuario y resúmenes de cuentas en caché (los datos principales permanecen en el mainframe heredado).

Relaciones clave (mismos sistemas externos que en el Nivel 1):

  • SPA y Aplicación móvil → llaman → Aplicación de API
  • Aplicación de API ↔ Base de datos
  • Aplicación de API → Sistema de banca central y Sistema de correo electrónico

Diagrama de contenedores C4 de PlantUML:

PlantUML


Editar PlantUML en VPasCode
PlantUML Edit PlantUML in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Diagrama de contenedores C4 para el Sistema de Banca en Línea

Person(customer, "Cliente de banca personal", "Un cliente con una o más cuentas bancarias personales.")

System_Boundary(internet_banking_system, "Sistema de Banca en Línea", "El nuevo sistema para ver cuentas y realizar pagos.") {
Container(spa, "Aplicación de página única", "JavaScript + Angular", "Interfaz de usuario completa de banca en línea", $sprite="angular")
Container(mobile_app, "Aplicación móvil", "iOS/Android (React Native)", "Funcionalidad limitada para uso en movimiento", $sprite="react")
Container(api_app, "Aplicación de API", "Java + Spring Boot", "API de JSON/HTTPS utilizada por ambos front-ends", $sprite="java")
ContainerDb(database, "Base de datos", "PostgreSQL", "Almacena datos de sesión, preferencias del usuario y resúmenes de cuentas en caché", $sprite="postgresql")
}

System(core_banking_system, "Sistema de banca central", "Mainframe existente que maneja datos de clientes, cuentas y transacciones.")
System_Ext(email_system, "Sistema de correo electrónico", "Servicio Simple de Correo de Amazon Web Services (AWS SES) para enviar confirmaciones.")

' Relaciones
Rel(customer, spa, "Utiliza", "HTTPS")
Rel(customer, mobile_app, "Utiliza", "HTTPS")
Rel(spa, api_app, "Llama", "JSON/HTTPS")
Rel(mobile_app, api_app, "Llama", "JSON/HTTPS")
Rel(api_app, database, "Lee y escribe en", "JDBC/SQL")
Rel(api_app, core_banking_system, "Consulta / Actualiza", "JSON/HTTPS")
Rel(api_app, email_system, "Envía correo mediante", "HTTPS")

' Sugerencias de disposición (opcionales – ayuda a PlantUML a organizar mejor los elementos)
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml
Edit PlantUML in VPasCode



Editar PlantUML en VPasCode

Razonamiento: Elegimos un patrón moderno de SPA + backend de API para web, una aplicación móvil nativa para rendimiento, y mantuvimos la base de datos ligera (la mayoría de los datos residen en el mainframe heredado). Este diagrama es la única fuente de verdad para las decisiones tecnológicas de alto nivel y ayuda a DevOps a planificar la infraestructura.

Paso 3: Diagrama de componentes (Nivel 3)

Propósito: Amplíe un contenedor (normalmente el más complejo – la Aplicación de API) y muestre sus componentes lógicos principales. Público objetivo: equipos de desarrollo.

Ejemplo: Componentes dentro de la Aplicación de API:

  • Controlador de cuentas (Spring MVC)
  • Controlador de autenticación
  • Controlador de restablecimiento de contraseña
  • Componente de seguridad (gestiona autenticación, JWT, etc.)
  • Componente de gestión de cuentas (orquesta llamadas al sistema de banca central)
  • Componente de notificación por correo electrónico

Diagrama de componentes C4 de PlantUML (enfocado en la aplicación de API):

PlantUML


Editar PlantUML en VPasCode
PlantUML Edit PlantUML in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

LAYOUT_WITH_LEGEND()

title Diagrama de componentes para el sistema de banca en línea - Aplicación de API

Container(spa, "Aplicación de página única", "javascript y angular", "Proporciona todas las funcionalidades de banca en línea a los clientes a través de su navegador web.")
Container(ma, "Aplicación móvil", "Xamarin", "Proporciona un subconjunto limitado de las funcionalidades de banca en línea a los clientes a través de su dispositivo móvil.")
ContainerDb(db, "Base de datos", "Esquema de base de datos relacional", "Almacena información de registro de usuarios, credenciales de autenticación cifradas, registros de acceso, etc.")
System_Ext(mbs, "Sistema informático principal de banca", "Almacena toda la información central de banca sobre clientes, cuentas, transacciones, etc.")

Container_Boundary(api, "Aplicación de API") {
    Component(accounts, "Controlador de cuentas", "Spring MVC", "Proporciona resúmenes y saldos de cuentas a los clientes.")
    Component(auth, "Controlador de autenticación", "Spring MVC", "Gestiona el inicio de sesión de usuarios, la gestión de sesiones y la generación de tokens.")
    Component(reset, "Controlador de restablecimiento de contraseña", "Spring MVC", "Permite a los usuarios restablecer su contraseña mediante correo electrónico.")
    Component(security, "Componente de seguridad", "Bean de Spring", "Gestiona la autenticación, la generación de tokens JWT y el cifrado de contraseñas.")
    Component(accountmgmt, "Componente de gestión de cuentas", "Bean de Spring", "Orquesta las llamadas al sistema de banca central para operaciones de cuentas.")
    Component(email, "Componente de notificación por correo electrónico", "Bean de Spring", "Envía correos electrónicos para restablecer contraseñas y verificar cuentas mediante SMTP.")

    Rel(accounts, security, "Utiliza")
    Rel(auth, security, "Utiliza")
    Rel(reset, security, "Utiliza")
    Rel(accountmgmt, mbs, "Utiliza", "XML/HTTPS")
    Rel(email, db, "Lee", "JDBC")
}

Rel(spa, accounts, "Utiliza", "JSON/HTTPS")
Rel(spa, auth, "Utiliza", "JSON/HTTPS")
Rel(spa, reset, "Utiliza", "JSON/HTTPS")
Rel(ma, accounts, "Utiliza", "JSON/HTTPS")
Rel(ma, auth, "Utiliza", "JSON/HTTPS")
Rel(ma, reset, "Utiliza", "JSON/HTTPS")
@enduml
Edit PlantUML in VPasCode



Editar PlantUML en VPasCode

Razón: Este nivel muestra cómo se distribuyen las responsabilidades (separación de preocupaciones) y hace que la incorporación de nuevos desarrolladores sea mucho más rápida. Solo dibujas diagramas de componentes para contenedores lo suficientemente complejos como para justificarlo.

Paso 4: Diagrama de código (Nivel 4) – Opcional

Propósito: Mostrar la estructura interna de un componente único (diagrama de clases, secuencia, etc.). Público objetivo: desarrolladores que trabajan en ese código.

Ejemplo para el Controlador de autenticación componente – un diagrama de clases UML simple en PlantUML:

PlantUML


Editar PlantUML en VPasCode
PlantUML Edit PlantUML in VPasCode 

@startuml
classDiagram

skinparam {
roundcorner 8
ArrowColor #444444
ArrowFontColor #444444
BorderColor #444444

Class {
BorderColor #1A237E
BackgroundColor #E8EAF6
FontColor #1A237E
}
}

class "ControladorDeAutenticación" {
+login(credenciales)
+refreshToken()
}

class "ProveedorDeTokenJwt" {
+generateToken(usuario)
+validateToken(token)
}

class "RepositorioDeUsuario" {
+findByUsername()
}

ControladorDeAutenticación ..> ProveedorDeTokenJwt : "utiliza"
ControladorDeAutenticación ..> RepositorioDeUsuario : "utiliza"
@enduml
Edit PlantUML in VPasCode



Editar PlantUML en VPasCode

En proyectos reales, a menudo se salta el Nivel 4 y se apunta directamente al código fuente real.

Paso 5: Diagramas de apoyo

Diagrama dinámico (ejemplo: flujo de “Ver resumen de cuenta”)

PlantUML


Editar PlantUML en VPasCode
PlantUML Edit PlantUML in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title Diagrama dinámico para Vista Resumen de Cuenta

Persona(cliente, "Cliente de Banca Personal") {
Contenedor(spa, "Aplicación de página única") {
Contenedor(api, "Aplicación de API") {
ContenedorDb(db, "Base de datos") {
Sistema_Ext(sistemaNúcleo, "Sistema de banca central")
}
}
}
}

Rel(cliente, spa, "1. Hace clic en 'Cuentas'", "")
Rel(spa, api, "2. GET /accounts", "JSON/HTTPS")
Rel(api, db, "3. Leer resumen en caché", "")
Rel(api, sistemaNúcleo, "4. Obtener datos más recientes", "")
Rel(api, spa, "5. Devolver JSON", "")

MOSTRAR_LEGENDA()
@enduml
Edit PlantUML in VPasCode



Editar PlantUML en VPasCode

Diagrama de despliegue (mapeo físico de alto nivel):

PlantUML


Editar PlantUML en VPasCode
PlantUML Edit PlantUML in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title Diagrama de despliegue para Sistema de Banca en Línea

Nodo_Despliegue(aws, "Amazon Web Services", "Nube") {
Nodo_Despliegue(ec2, "Grupo de escalado automático EC2", "Linux") {
Contenedor(api, "Aplicación de API", "Java Spring Boot")
}
Nodo_Despliegue(rds, "RDS", "PostgreSQL") {
ContenedorDb(db, "Base de datos")
}
}

Nodo_Despliegue(dispositivoCliente, "Dispositivo del cliente", "Web/Móvil") {
Contenedor(spa, "Aplicación de página única")
Contenedor(mobile, "Aplicación móvil")
}

Sistema_Ext(sistemaNúcleo, "Sistema de banca central (mainframe local)")

Rel(spa, api, "Realiza llamadas a la API", "HTTPS")
Rel(mobile, api, "Realiza llamadas a la API", "HTTPS")
Rel_U(api, spa, "Entrega al navegador web del cliente")
Rel_U(api, mobile, "Entrega a la aplicación móvil")

MOSTRAR_LEGENDA()
@enduml
Edit PlantUML in VPasCode



Editar PlantUML en VPasCode

Cómo utilizar este caso de estudio en la práctica

  1. Comience con un taller: dibuje el contexto en una pizarra.
  2. Itere hacia Contenedores y Componentes utilizando PlantUML C4.
  3. Mantenga los diagramas en el repositorio de código (como código!) para que permanezcan actualizados.
  4. Genere documentación viva automáticamente.

Este ejemplo exacto del Sistema de Banca en Línea es la referencia oficial creada por Simon Brown y se utiliza en miles de organizaciones en todo el mundo. Al seguir estos pasos, ahora tiene una descripción completa y lista para producción de la arquitectura que cualquiera—desde el CEO hasta un nuevo desarrollador junior—puede entender al nivel adecuado de detalle.

Artículos sobre diagramas C4