de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

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 visualizadores de Markdown)

  • Razonamiento 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 en Línea 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 en Línea (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 (Sistema de software, externo) – Servicio Simple de Correo de Amazon Web Services (AWS SES) para enviar confirmaciones.

Relaciones:

  • Cliente → utiliza → Sistema de Banca en Línea (para ver cuentas y realizar pagos)

  • Sistema de Banca en Línea → utiliza → Sistema de Banca Principal (para datos de cuentas y pagos)

  • Sistema de Banca en Línea → envía correo a través de → Sistema de Correo

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

@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 en Línea

Person(cliente, "Cliente de Banca Personal", "Un cliente con una o más cuentas bancarias personales.")
System(sistema_banca_linea, "Sistema de Banca en Línea", "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", "Servicio Simple de Correo de Amazon Web Services (AWS SES) para enviar confirmaciones.")

Rel(cliente, sistema_banca_linea, "Utiliza")
Rel(sistema_banca_linea, sistema_banca_principal, "Utiliza")
Rel(sistema_banca_linea, sistema_correo, "Envía correo a través de")

Lay_D(cliente, sistema_banca_linea)
Lay_D(sistema_banca_linea, sistema_banca_principal)
Lay_U(sistema_correo, sistema_banca_linea)
@enduml

Razonamiento y valor: Este diagrama único responde de inmediato a «¿Qué estamos construyendo y con quién se comunica?». Evita el crecimiento del 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: Ampliar el enfoque en el Sistema de Banca en Línea y mostrar las unidades principales desplegables/ejecutables (contenedores) y sus elecciones tecnológicas. Público objetivo: arquitectos, desarrolladores principales y operaciones.

Contenedores dentro del Sistema de Banca en Línea:

  • Aplicación de página única (Navegador web – JavaScript + Angular) – Interfaz completa de banca en línea.

  • Aplicación móvil (Dispositivo móvil – nativo iOS/Android o React Native) – Funcionalidad limitada para uso móvil.

  • Aplicación de API (Lado del servidor – Java + Spring Boot) – API de JSON/HTTPS utilizada por ambos front-ends.

  • Base de datos (BD relacional – PostgreSQL) – Almacena datos de sesión, preferencias del usuario, resúmenes de cuentas en caché (los datos principales permanecen en el mainframe).

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:

@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_ARRIBA_ABAJO()
LAYOUT_CON_LEGENDA()

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

Persona(cliente, “Cliente de banca personal”, “Un cliente con una o más cuentas bancarias personales.”)

Límite_del_sistema(internet_banking_system, “Sistema de banca en línea”, “El nuevo sistema para ver cuentas y realizar pagos.”) {
Contenedor(spa, “Aplicación de página única”, “JavaScript + Angular”, “Interfaz completa de banca en línea”, $sprite=”angular”)
Contenedor(mobile_app, “Aplicación móvil”, “iOS/Android (React Native)”, “Funcionalidad limitada para uso móvil”, $sprite=”react”)
Contenedor(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 de usuario y resúmenes de cuentas en caché”, $sprite=”postgresql”)
}

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

‘ Relaciones
Rel(cliente, spa, “Utiliza”, “HTTPS”)
Rel(cliente, app_móvil, “Utiliza”, “HTTPS”)
Rel(spa, app_api, “Llama a”, “JSON/HTTPS”)
Rel(app_móvil, app_api, “Llama a”, “JSON/HTTPS”)
Rel(app_api, base_de_datos, “Lee y escribe en”, “JDBC/SQL”)
Rel(app_api, sistema_principal_de_banca, “Consulta / Actualiza”, “JSON/HTTPS”)
Rel(app_api, sistema_correo, “Envía correo electrónico mediante”, “HTTPS”)

‘ Indicaciones de diseño (opcional – ayuda a PlantUML organizar mejor los elementos)
Lay_D(cliente, sistema_banco_en_linea)
Lay_D(sistema_banco_en_linea, sistema_principal_de_banca)
Lay_U(sistema_correo, sistema_banco_en_linea)

@enduml

Razón: 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 decisiones tecnológicas de alto nivel y ayuda a DevOps a planificar la infraestructura.

Paso 3: Diagrama de componentes (Nivel 3)

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

Ejemplo: Componentes dentro de la aplicación 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 principal de banca)

  • Componente de notificación por correo electrónico

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

@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", "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", "Maneja el inicio de sesión del usuario, 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", "Spring Bean", "Maneja la autenticación, la generación de tokens JWT y el cifrado de contraseñas.")
    Component(accountmgmt, "Componente de gestión de cuentas", "Spring Bean", "Orquesta las llamadas al sistema de banca central para operaciones de cuentas.")
    Component(email, "Componente de notificación por correo electrónico", "Spring Bean", "Envía correos electrónicos para restablecimiento de contraseña y verificación de 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


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 individual (diagrama de clases, secuencia, etc.). Público objetivo: desarrolladores que trabajan en ese código.

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

@startuml
diagramaDeClases

skinparam {
roundcorner 8
ColorFlecha #444444
ColorFuenteFlecha #444444
ColorBorde #444444

Clase {
ColorBorde #1A237E
ColorFondo #E8EAF6
ColorFuente #1A237E
}
}

clase “ControladorDeAutenticacion” {
+login(credenciales)
+refreshToken()
}

clase “ProveedorDeTokenJwt” {
+generateToken(usuario)
+validateToken(token)
}

class “UserRepository” {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : “usa”
AuthenticationController ..> UserRepository : “usa”
@enduml


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”)

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

título Diagrama dinámico para Ver resumen de cuenta

Person(customer, “Cliente de banca personal”) {
Container(spa, “Aplicación de página única”) {
Container(api, “Aplicación de API”) {
ContainerDb(db, “Base de datos”) {
System_Ext(coreBanking, “Sistema de banca central”)
}
}
}
}

Rel(customer, spa, “1. Hace clic en ‘Cuentas’”, “”)
Rel(spa, api, “2. GET /accounts”, “JSON/HTTPS”)
Rel(api, db, “3. Leer resumen en caché”, “”)
Rel(api, coreBanking, “4. Obtener datos más recientes”, “”)
Rel(api, spa, “5. Devolver JSON”, “”)

MOSTRAR_LEGENDA()
@enduml

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

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

título Diagrama de Despliegue para el Sistema de Banca en Línea

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

Nodo_Despliegue(customerDevice, “Dispositivo del Cliente”, “Web/Móvil”) {
Contenedor(spa, “Aplicación de Página Única”)
Contenedor(mobile, “Aplicación Móvil”)
}

Sistema_Ext(coreBanking, “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

Cómo utilizar este estudio de caso 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 viviente 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 de 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