de_DEen_USes_ESfa_IRjapt_PTru_RU

Dominar el diagrama de contenedores C4: Acercándose a las decisiones tecnológicas, las responsabilidades y la comunicación (con ejemplos de PlantUML)

¿Qué es un diagrama de contenedores C4?

El diagrama de contenedores esNivel 2en el modelo C4 de Simon Brown. Se enfoca en un único sistema de software (definido en el Nivel 1 – Contexto del sistema) para mostrar:

The Ultimate Guide to C4 Model Visualization with Visual Paradigm's AI Tools - ArchiMetric

  • La forma de alto nivelde la arquitectura dentro de los límites de su sistema.

  • Unidades principales unidades desplegables/ejecutablesllamadas contenedores.

  • Elecciones tecnológicaspara cada contenedor.

  • Cómo interactúan los contenedores interactúanentre sí y con actores/sistemas externos.

Aclaración importante: Un «contenedor» en C4 no esnecesariamente un contenedor de Docker. Es cualquier unidad desplegable/ejecutable por separado que ejecute código o almacene datos. Ejemplos:

  • Aplicación web / Aplicación de página única (SPA)

  • Aplicación móvil

  • API del lado del servidor / microservicio

  • Base de datos (esquema)

  • Almacenamiento de archivos (cubo de S3, carpeta del sistema de archivos)

  • Broker de mensajes / cola (cuando se modela explícitamente)

  • Aplicación de escritorio / CLI

  • Proceso por lotes / trabajo programado

El diagrama permanece de alto nivel — sin detalles internos de clases o código (eso corresponde a Componentes de Nivel 3 o Código de Nivel 4).

Cuándo crear un diagrama de contenedores

Cree (y mantenga) un diagrama de contenedores cuando:

  • Ha completado (o al menos bosquejado) el Contexto del sistema diagrama y necesita responder: “¿Cuáles son los bloques principales dentro de nuestro sistema?”

  • Integración de nuevos desarrolladores, arquitectos o personal de operaciones — necesitan comprender rápidamente la pila tecnológica y las responsabilidades de alto nivel.

  • Tomando decisiones importantes de tecnología o arquitectura (monolito → microservicios, añadir aplicación móvil, elegir base de datos, introducir colas de mensajes, migración a la nube).

  • Documentación para auditorías, cumplimiento, revisiones de seguridad o respuesta a incidentes (ayuda a mostrar el área de ataque, flujos de datos).

  • Quieres “arquitectura como código” que resida en el repositorio y evolucione con el sistema.

  • La mayoría de los equipos se detienen aquí — Simon Brown mismo señala que Contexto del sistema + contenedores diagramas son suficientes para la mayoría de los equipos de software. Solo profundice (Componentes/Código) cuando la complejidad dentro de un contenedor lo justifique.

Omita o posponga si:

  • El sistema es extremadamente simple (un proceso + base de datos).

  • Está haciendo una ideación muy temprana y solo necesita el contexto general.

¿Por qué usar diagramas de contenedores? (Principales beneficios)

  • Claridad para diferentes audiencias
    Los desarrolladores ven tecnologías y puntos de integración.
    Los equipos de Ops/infra ven unidades desplegables y rutas de comunicación.
    Los arquitectos ven límites de responsabilidad y riesgos de deuda técnica.
    Los gerentes ven una visión suficientemente neutral respecto a la tecnología pero concreta.

  • Evita el problema del “un gran diagrama”
    Evita cargar todo (usuarios + infraestructura + clases + íconos de nube) en una sola imagen sobrecargada.

  • Destaca decisiones clave
    Exponen claramente decisiones como SPA + API + base de datos relacional frente a renderizado del lado del servidor + NoSQL, o sincrónico frente a basado en eventos.

  • Comunicación y colaboración
    Actúa como un mapa compartido durante las sesiones de diseño, análisis de incidentes, modelado de amenazas y planificación estratégica.

  • Documentación viviente
    Cuando se escribe en PlantUML / Structurizr DSL / similar → versionado en Git, regenerado automáticamente en CI, siempre actualizado.

Cómo crear un diagrama de contenedores excelente (paso a paso + mejores prácticas)

  1. Comienza desde el nivel 1
    Copia Personas + Sistemas de software externos desde el diagrama de contexto — se convertirán en actores que interactúan con tus contenedores.

  2. Dibuja el límite del sistema
    Usa Límite_del_sistema en PlantUML para delimitar claramente “dentro de nuestro sistema”.

  3. Identifica los contenedores
    Pregunta: ¿Qué cosas independientemente ejecutables/desplegables entregan la funcionalidad del sistema?
    Patrones comunes:

    • SPA web ↔ backend de API ↔ base de datos

    • Aplicación móvil ↔ backend para frontend (BFF) ↔ servicios compartidos

    • Microservicios con broker de mensajes

    • Monolito heredado + capa de API nueva

  4. Añade tecnología y descripción breve
    Cada contenedor debe mostrar: nombre, tecnología, propósito breve.
    Mantén las descripciones con menos de 15 palabras.

  5. Define interacciones (relaciones)
    Muestra dirección + protocolo + intención (por ejemplo, “JSON/HTTPS”, “Lee de y escribe en”, “Publica en”, “Consume de”).
    Usa verbos en las relaciones.

  6. Mejores prácticas

    • Manténlo legible — apunta a menos de 10–12 contenedores. Si hay más → crea vistas enfocadas (por ejemplo, “contenedores del subsistema de API”).

    • Sé consistente — misma dirección de disposición (de arriba abajo/de izquierda a derecha), mismo nivel de detalle.

    • Usa íconos/sprites — añade impacto visual (PlantUML admite devicons, font-awesome, etc.).

    • Leyenda y clave — habilitar la leyenda automática en PlantUML.

    • Evitar el desorden — omitir colas/temas si no aportan valor; etiquetar los protocolos en las flechas en su lugar.

    • Versión y almacenar como código — confirmar archivos .puml en el repositorio.

    • Adaptación al público objetivo — una versión para desarrolladores (tecnología detallada), versión más ligera para interesados.

Ejemplo de PlantUML – Sistema clásico de banca en línea (estilo Big Bank plc)

Aquí tienes un ejemplo limpio y de producción utilizando la biblioteca oficial C4-PlantUML.

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' Opcional: agregar iconos atractivos (desde sprites de tupadr3)
!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
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/android.puml

título Diagrama de contenedores: Sistema de banca en línea

Persona(cliente, "Cliente de banca personal", "Un cliente de Big Bank plc")

Límite_de_sistema(c1, "Sistema de banca en línea") {
    Contenedor(spa, "Aplicación de página única", "JavaScript & Angular", "Proporciona todas las funcionalidades de banca en línea a los clientes a través de su navegador web", $sprite="angular")
    Contenedor(móvil, "Aplicación móvil", "Android/iOS (React Native)", "Funcionalidades limitadas de banca en línea", $sprite="android")
    Contenedor(api, "Aplicación de API", "Java & Spring Boot", "Proporciona funcionalidades de banca en línea mediante API", $sprite="java")
    ContenedorDb_Ext(base, "Base de datos de banca", "PostgreSQL", "Almacena preferencias del usuario, datos en caché, sesiones (los cuentas y transacciones principales permanecen en el mainframe)", $sprite="postgresql")
}

Sistema_Ext(núcleo, "Sistema de banca central", "Sistema mainframe – existente")
Sistema_Ext(correo, "Sistema de correo", "Envía correos electrónicos (por ejemplo, AWS SES)")

Rel(cliente, spa, "Utiliza", "HTTPS")
Rel(cliente, móvil, "Utiliza", "HTTPS")

Rel(spa, api, "Llama", "JSON/HTTPS")
Rel(móvil, api, "Llama", "JSON/HTTPS")

Rel(api, base, "Lee y escribe en", "JDBC/SQL")
Rel(api, núcleo, "Utiliza", "JSON/HTTPS")
Rel(api, correo, "Envía correo usando", "HTTPS")

LAYOUT_CON_LEYENDA()
LAYOUT_DE_ARIBA_A_ABAJO()

@enduml

Esto genera un diagrama limpio con:

  • Límite del sistema

  • Etiquetas de tecnología

  • Sprites/iconos

  • Relaciones claras

  • Leyenda

Puedes pegarlo directamente en el servidor en línea de PlantUML o en cualquier IDE/editor compatible.

Utiliza esta estructura como plantilla — reemplaza los elementos con los nombres, tecnologías y flujos de tu propio sistema. Para un estilo más avanzado (temas, colores personalizados), consulta las muestras de GitHub de C4-PlantUML.

¡Feliz diagramación — y recuerda: el objetivo es una comunicación efectiva, no la perfección de UML!

Recurso de diagrama de contenedores C4