de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

El modelo C4, desarrollado por Simon Brown, es un enfoque potente y jerárquico para visualizar la arquitectura de software. Utiliza cuatro niveles de abstracción para proporcionar el nivel adecuado de detalle para diferentes audiencias, desde partes interesadas del negocio hasta desarrolladores. Esto lo hace ideal para crear documentación clara, mantenible y centrada en la audiencia.

Introduction to C4 Model: a Quick Guide - Visual Paradigm Blog

Esta guía completa se basa en el conocido estudio de caso de el sistema de banca por internet de Big Bank plc — un ejemplo ficticio pero realista de la creación de una plataforma de banca en línea para clientes personales para ver sus cuentas y realizar pagos. El estudio de caso demuestra cómo aplicar progresivamente el modelo C4, utilizando PlantUML para «arquitectura como código». También incorpora herramientas modernas como el Studio C4 de PlantUML con inteligencia artificial de Visual Paradigm (lanzado a finales de 2025) para acelerar la creación y el mantenimiento.

Visión general del modelo C4

El modelo incluye cuatro niveles:

  1. Nivel 1: Contexto del sistema — La visión general: el sistema, los usuarios y las dependencias externas.

  2. Nivel 2: Contenedores — Unidades principales desplegables (aplicaciones, servicios, bases de datos) y elecciones tecnológicas de alto nivel.

  3. Nivel 3: Componentes — Bloques lógicos internos dentro de un contenedor.

  4. Nivel 4: Código — Detalles de bajo nivel opcionales (por ejemplo, clases); a menudo se omiten a favor de referencias al código fuente.

Las vistas adicionales de apoyo incluyen diagramas dinámicos (flujos en tiempo de ejecución) y diagramas de despliegue.

Aplicación del modelo C4: estudio de caso del sistema de banca por internet de Big Bank plc

Nivel 1: Diagrama de contexto del sistema

Propósito: Proporcionar una visión general de alto nivel para partes interesadas del negocio y audiencias no técnicas, mostrando cómo el sistema de banca por internet encaja en el entorno más amplio sin usar jerga técnica.

Elementos clave:

  • Persona: Cliente de banca personal — Un cliente con una o más cuentas bancarias personales.

  • Sistema de software: Sistema de banca en línea — Permite a los clientes ver la información de sus cuentas y realizar pagos.

  • Sistemas externos:

    • Sistema central de banca (mainframe existente) — Gestiona datos de clientes, cuentas y transacciones.

    • Sistema de correo electrónico (por ejemplo, AWS SES) — Envía confirmaciones y notificaciones.

Relaciones:

  • Cliente usa el sistema de banca en línea.

  • Sistema de banca en línea usa el sistema central de banca para datos y transacciones.

  • Sistema de banca en línea envía correo electrónico a través de el sistema de correo electrónico.

Este nivel mantiene las cosas simples y explícitas sobre el alcance y las integraciones.

Ejemplo de PlantUML (adaptado del estudio de caso):

@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_en_linea, "Sistema de banca en línea", "Permite a los clientes ver sus cuentas y realizar pagos.")
System(sistema_banca_central, "Sistema central de banca", "Mainframe existente que gestiona datos de clientes, 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_en_linea, "Usa")
Rel(sistema_banca_en_linea, sistema_banca_central, "Usa")
Rel(sistema_banca_en_linea, sistema_correo, "Envía correo electrónico a través de")
@enduml

Nivel 2: Diagrama de contenedores

Propósito: Ampliar para mostrar los bloques principales (contenedores) y las elecciones tecnológicas, dirigido a arquitectos, desarrolladores y equipos de DevOps.

Elementos clave (dentro del límite del sistema de banca en línea):

  • Aplicación de página única (SPA) — JavaScript + Angular, interfaz completa en el navegador web.

  • Aplicación móvil — iOS/Android con React Native (o similar), funcionalidad limitada.

  • Aplicación de API — Java + Spring Boot, API JSON/HTTPS que sirve a ambos front-ends.

  • Base de datos — PostgreSQL, almacena datos de sesión, preferencias y resúmenes en caché (los datos principales permanecen en el mainframe).

Externo — Sistema de Banca Central y Sistema de Correo Electrónico.

Relaciones:

  • El cliente utiliza la SPA y la aplicación móvil a través de HTTPS.

  • La SPA y la aplicación móvil llaman a la Aplicación de API (JSON/HTTPS).

  • La Aplicación de API lee/escribe en la Base de datos (JDBC/SQL).

  • La Aplicación de API interactúa con el Sistema de Banca Central (JSON/HTTPS) y el Sistema de Correo Electrónico (HTTPS).

Este diagrama actúa como la “única fuente de verdad” para las decisiones tecnológicas.

Ejemplo de PlantUML (usa sprites para íconos):

@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") {
    Container(spa, "Aplicación de Página Única", "JavaScript + Angular", "Interfaz completa de banca en línea", $sprite="angular")
    Container(mobile_app, "Aplicación Móvil", "iOS/Android (React Native)", "Funcionalidad limitada", $sprite="react")
    Container(api_app, "Aplicación de API", "Java + Spring Boot", "API JSON/HTTPS", $sprite="java")
    ContainerDb(database, "Base de datos", "PostgreSQL", "Datos de sesión, preferencias, resúmenes en caché", $sprite="postgresql")
}
System(core_banking_system, "Sistema de Banca Central", "Mainframe existente...")
System_Ext(email_system, "Sistema de Correo Electrónico", "AWS SES...")
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 electrónico mediante", "HTTPS")
@enduml

Nivel 3: Diagrama de Componentes

Propósito: Detalla la estructura interna de un contenedor clave (aquí, la Aplicación de API) para los equipos de desarrollo.

Componentes clave (dentro de la Aplicación de API):

  • Controlador de Cuentas (Spring MVC) — Proporciona resúmenes y saldos.

  • Controlador de Autenticación (Spring MVC) — Inicio de sesión, sesiones, tokens.

  • Controlador de Restablecimiento de Contraseña (Spring MVC) — Restablecimiento de contraseñas mediante correo electrónico.

  • Componente de Seguridad (Spring Bean) — Autenticación, JWT, hashing.

  • Componente de Gestión de Cuentas (Spring Bean) — Orquesta las llamadas al Sistema de Banca Central.

  • Componente de Notificación por Correo Electrónico (Spring Bean) — Envía correos electrónicos.

Interacciones — Los controladores usan Seguridad; Gestión de Cuentas usa Banca Central; Correo usa Base de datos; los front-ends llaman a los controladores.

Ejemplo de PlantUML:

PlantUML Diagram

@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", "...")
Container(ma, "Aplicación móvil", "...", "...")
ContainerDb(db, "Base de datos", "...", "...")
System_Ext(mbs, "Sistema principal de banca", "...")
Container_Boundary(api, "Aplicación de API") {
    Component(accounts, "Controlador de cuentas", "Spring MVC", "...")
    Component(auth, "Controlador de autenticación", "Spring MVC", "...")
    Component(reset, "Controlador de restablecimiento de contraseña", "Spring MVC", "...")
    Component(security, "Componente de seguridad", "Spring Bean", "...")
    Component(accountmgmt, "Componente de gestión de cuentas", "Spring Bean", "...")
    Component(email, "Componente de notificación por correo electrónico", "Spring Bean", "...")
    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

Nivel 4: Diagrama de código (opcional)

Propósito: Mostrar detalles a nivel de clase para áreas específicas (por ejemplo, autenticación).

A menudo se omite: en su lugar, se hace referencia al código fuente.

Ejemplo — Diagrama de clases UML para autenticación:

  • AuthenticationController utiliza JwtTokenProvider y UserRepository.

Ejemplo de PlantUML:

@startuml
classDiagram
class "AuthenticationController" {
    +login(credentials)
    +refreshToken()
}
class "JwtTokenProvider" {
    +generateToken(user)
    +validateToken(token)
}
class "UserRepository" {
    +findByUsername()
}
AuthenticationController ..> JwtTokenProvider : "utiliza"
AuthenticationController ..> UserRepository : "utiliza"
@enduml

Vistas de apoyo

  • Diagrama dinámico (por ejemplo, secuencia de «Ver resumen de cuenta»): Cliente → SPA → API → Base de datos/Sistema principal de banca → Respuesta.

  • Diagrama de despliegue: Mapea contenedores a infraestructura (por ejemplo, AWS EC2 para API, RDS para base de datos, mainframe en instalaciones).

Aprovechando las herramientas impulsadas por IA de Visual Paradigm

Las herramientas de Visual ParadigmEstudio C4 PlantUML impulsado por IA (lanzamiento a finales de 2025) revoluciona este proceso:

  • Introduzca lenguaje natural (por ejemplo, «Cree un modelo C4 para un sistema de banca en línea con SPA, aplicación móvil, API Spring Boot, PostgreSQL e integración con mainframe»).

  • La IA genera código PlantUML y diagramas para todos los niveles.

  • Utilice el chatbot de IA para iterar (por ejemplo, «Agregue MFA al componente de autenticación» o «Genere la vista de despliegue en AWS»).

  • Mantenga la consistencia entre niveles y apoye la «documentación viviente».

  • Exportar, gestionar versiones e integrar con repositorios.

Esta herramienta proporciona salidas estructuradas y compatibles con C4 de forma mucho más confiable que las IA generales.

Mejores prácticas

  1. Comience con talleres — Utilice pizarras para el Nivel 1 para alinear a los interesados.

  2. Trata la arquitectura como código — Almacena los archivos PlantUML en tu repositorio para actualizaciones automáticas con los cambios de código.

  3. Automatiza con IA — Usa Visual Paradigm para generar y refinar diagramas rápidamente.

  4. Enfoque en el público objetivo — Omite los detalles técnicos del Nivel 1; añádelos progresivamente.

  5. Manténlo ligero — Solo detalla los contenedores complejos en el Nivel 3; omite el Nivel 4 a menos que sea esencial.

  6. Evoluciona la documentación — Haz que los diagramas sean “vivos” para evitar artefactos obsoletos.

El estudio de caso de The Big Bank plc sigue siendo un ejemplo canónico de la eficacia del modelo C4 en escenarios del mundo real, promoviendo claridad, colaboración y comunicación escalable de arquitectura. Para más información, explore el sitio oficial de C4 o las herramientas de IA de Visual Paradigm.