Uso del modelo C4 y PlantUML para la documentación de arquitectura de producción
Resumen Ejecutivo
Este estudio de caso presenta un análisis detallado del despliegue en producción en vivode una plataforma de comercio electrónico moderna y de alto rendimiento. Diseñada para atender a miles de usuarios concurrentes a través de canales web y móviles, el sistema aprovecha una arquitectura inspirada en microservicios con un enfoque en escalabilidad, resiliencia, rendimiento y claridad operativa.
El despliegue se basa en el modelo C4 — específicamente, el Diagrama de Despliegue — utilizando PlantUML y la biblioteca estándar C4-PlantUML para modelar contenedores en tiempo de ejecución mapeados sobre infraestructura física/virtual. La arquitectura integra backends políglotas (Java + Go), caché Redis, clustering primario/replica de PostgreSQL, protocolos gRPC y HTTP/2, y balanceo de carga basado en Nginx.
Resultados clave:
-
Logra 10.000+ solicitudes por segundo en la puerta de enlace de la API.
-
Garantiza alta disponibilidad mediante la replicación de bases de datos y rutas de respaldo.
-
Optimiza rendimiento mediante caché agresiva y selección de protocolos.
-
Habilita agilidad del desarrollador con servicios optimizados para el lenguaje.
-
Soporta experiencias multiplataforma (React SPA + móvil React Native).
Este documento demuestra cómo el Diagrama de Despliegue C4 sirve como un artefacto vivo y controlado por versiones que alinea a los equipos técnicos, apoya la respuesta a incidentes y guía la planificación de capacidad.
1. Contexto empresarial y técnico
Objetivos empresariales
La plataforma de comercio electrónico soporta:
-
Navegación y búsqueda de productos en tiempo real.
-
Verificación dinámica de inventario y precios.
-
Colocación segura y confiable de pedidos y finalización de compra.
-
Experiencias sin interrupciones a través de navegadores y aplicaciones móviles nativas.
Usuarios objetivo: consumidores globales que esperan interacciones de baja latencia, actualizaciones en tiempo real, y sin tiempo de inactividaddurante eventos pico (por ejemplo, Viernes Negro, ventas estacionales).
Diagrama de implementación generado por el chatbot de Visual Paradigm AI

Generación de código PlantUML por el chatbot de Visual Paradigm AI
@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
título Diagrama de implementación para la plataforma de comercio electrónico – en vivo
AddElementTag(“fallback”, $bgColor=”#c0c0c0″, $fontColor=”#666666″)
AddRelTag(“fallback”, $textColor=”#c0c0c0″, $lineColor=”#438DD5″)
Deployment_Node(deploymentnode_live, “E-Commerce en vivo”, “Entorno de producción en vivo”, “Centro de datos de producción en Seattle”) {
AddProperty(“Ubicación”, “Seattle, WA”)
AddProperty(“Red”, “Fibra de alta velocidad”)
Deployment_Node_L(deploymentnode_api_gateway, “api-gw-01”, “Ubuntu 22.04 LTS”, “Pasarela de API para enrutar solicitudes a servicios de fondo.”) {
AddProperty(“Tráfico”, “10k+ solicitudes/segundo”)
AddProperty(“Protocolo”, “HTTP/2 y gRPC”)
Deployment_Node_L(deploymentnode_order_service, “Servicio de pedidos”, “Java Spring Boot”, “Administra la creación, procesamiento y cumplimiento de pedidos.”) {
Container(container_order, “Gestión de pedidos”, “Java y Spring Boot”, “Administra el ciclo de vida del pedido, incluyendo creación, actualizaciones de estado y entrega.”)
}
Deployment_Node_L(deploymentnode_product_service, “Servicio de productos”, “Go con Gin”, “Proporciona el catálogo de productos y funcionalidad de búsqueda.”) {
Container(container_product, “Catálogo de productos”, “Go y Gin”, “Proporciona detalles del producto, precios y disponibilidad.”)
}
}
Deployment_Node_R(deploymentnode_db_primary, “db-prime-01”, “Ubuntu 22.04 LTS”, “Servidor de base de datos principal.”) {
Deployment_Node_R(deploymentnode_postgresql_primary, “PostgreSQL – Principal”, “PostgreSQL 15”, “Base de datos principal que almacena pedidos, productos y datos de usuarios.”) {
ContainerDb(container_db_primary, “Base de datos”, “PostgreSQL 15”, “Almacena el historial de pedidos, inventario y catálogo de productos.”)
}
}
Deployment_Node_R(deploymentnode_db_secondary, “db-replica-02”, “Ubuntu 22.04 LTS”, “Servidor de base de datos secundario.”, $tags=”fallback”) {
Deployment_Node_R(deploymentnode_postgresql_secondary, “PostgreSQL – Secundario”, “PostgreSQL 15”, “Réplica en espera para conmutación por fallo.”, $tags=”fallback”) {
ContainerDb(container_db_secondary, “Base de datos”, “PostgreSQL 15”, “Réplica de la base de datos principal, utilizada para escalado de lectura y recuperación ante desastres.”, $tags=”fallback”)
}
}
Deployment_Node_L(deploymentnode_cache_service, “cache-srv-01”, “Redis 7.0”, “Capa de caché para reducir la carga de la base de datos.”) {
Container(container_cache, “Capa de caché”, “Redis 7.0”, “Almacena datos de productos y pedidos frecuentemente accedidos.”)
}
Deployment_Node(deploymentnode_web_server, “web-srv-01”, “Ubuntu 22.04 LTS”, “Servidor web de frontend.”) {
AddProperty(“CORS”, “Habilitado”)
AddProperty(“SSL”, “Habilitado”)
Deployment_Node(deploymentnode_nginx, “Nginx”, “Nginx 1.25”, “Proxy inverso y balanceador de carga.”) {
Container(container_frontend, “Aplicación de frontend”, “React y Node.js”, “Proporciona la experiencia de carrito de compras, páginas de productos y proceso de pago.”)
}
}
}
Deployment_Node(deploymentnode_mobile_device, “Dispositivo móvil del cliente”, “iOS o Android”) {
Container(container_mobile_app, “Aplicación móvil”, “React Native”, “Proporciona funcionalidades de compra, navegación de productos y proceso de pago en dispositivos móviles.”)
}
Deployment_Node(deploymentnode_customer_computer, “Computadora del cliente”, “Windows o macOS”) {
Deployment_Node(deploymentnode_browser, “Navegador web”, “Chrome, Safari, Edge”) {
Container(container_spa, “Aplicación de página única”, “React y Redux”, “Proporciona una experiencia completa de comercio electrónico a través del navegador web.”)
}
}
Rel(container_mobile_app, container_order, “Realiza llamadas a la API de”, “gRPC”)
Rel(container_mobile_app, container_product, “Realiza llamadas a la API de”, “gRPC”)
Rel(container_spa, container_order, “Realiza llamadas a la API de”, “HTTP/2”)
Rel(container_spa, container_product, “Realiza llamadas a la API de”, “HTTP/2”)
Rel(container_order, container_db_primary, “Lee y escribe en”, “JDBC”)
Rel(container_order, container_db_secondary, “Lee y escribe en”, “JDBC”, $tags=”reserva”)
Rel(container_product, container_db_primary, “Lee y escribe en”, “JDBC”)
Rel(container_product, container_db_secondary, “Lee y escribe en”, “JDBC”, $tags=”reserva”)
Rel(container_cache, container_db_primary, “Caché de datos de”, “Redis”)
Rel(container_cache, container_product, “Almacena en caché datos de”, “Redis”)
Rel_R(container_db_primary, container_db_secondary, “Reproduce datos en”)
MOSTRAR_LEGENDA()
@enduml
Requisitos Técnicos
| Requisito | Objetivo |
|---|---|
| Throughput máximo | 10k+ RPS en la puerta de enlace de la API |
| Consistencia de datos | Cumplimiento ACID para pedidos e inventario |
| Alta disponibilidad | SLA de disponibilidad del 99,99% |
| Escalabilidad | Escalado horizontal de servicios y bases de datos |
| Rendimiento | Tiempo de respuesta inferior a 100 ms para las rutas críticas |
| Flexibilidad para desarrolladores | Utilizar el lenguaje óptimo por dominio |
2. Estructura de despliegue de alto nivel
El entorno en vivo está lógicamente particionado en tres niveles: Núcleo de Backend y Datos, Persistencia de datos, y Entrega de frontend.
Nivel de Núcleo de Backend y Datos (lado izquierdo)
| Nodo | Tecnología | Función |
|---|---|---|
api-gw-01 (Ubuntu 22.04 LTS) |
Proxy Nginx 1.25 + gRPC/HTTP/2 | Punto de entrada para todo el tráfico de clientes; enruta hacia los servicios de Pedido y Producto |
| Servicio de Pedido | Java Spring Boot | Gestiona todo el ciclo de vida del pedido: creación, procesamiento de pagos, cumplimiento y seguimiento de estado |
| Servicio de Producto | Go + Gin | Gestiona la administración del catálogo, búsqueda de productos, precios, disponibilidad y recomendaciones |
✅ Ambos servicios se conectan a la instancia principal de PostgreSQL mediante JDBC.
Capa de almacenamiento en caché
| Nodo | Tecnología | Rol |
|---|---|---|
cache-srv-01 |
Redis 7.0 | Almacena en caché datos de productos populares, estados de sesión e información temporal de pedidos |
🔥 Impacto en el rendimiento: Reduce la carga de lectura de la base de datos hasta en un 70% para consultas de productos.
Nivel de persistencia de datos (lado derecho)
| Nodo | Tecnología | Propósito |
|---|---|---|
db-prime-01 |
PostgreSQL 15 (Principal) | Única fuente de verdad para pedidos, inventario, usuarios y productos |
db-replica-02 |
PostgreSQL 15 (Replica) | Escalado de lectura y conmutación automática; etiquetado como “fallback” en el diagrama |
⚠️ Modo de replicación: La replicación en streaming síncrona garantiza la durabilidad de los datos.
🔄 Conmutación: Cambio manual o automático (mediante Patroni o similar) durante un fallo del primario.
Nivel de entrega de frontend
| Nodo | Tecnología | Función |
|---|---|---|
web-srv-01 |
Nginx 1.25 (proxy inverso) | Sirve una SPA de React con finalización de SSL/TLS, aplicación de políticas CORS y equilibrio de carga |
🌐 Clientes:
Web: SPA basada en navegador que utiliza HTTP/2 (compresión de encabezados, multiplexación).
Móvil: Aplicación React Native que utiliza gRPC (protocolo binario eficiente, tipado fuerte).
3. Interacciones clave y flujos de datos
Comunicación cliente-servicio
| Tipo de cliente | Protocolo | Razón |
|---|---|---|
| Aplicación móvil | gRPC | Codificación binaria eficiente, tamaño de carga reducido, mejor uso de la batería |
| Navegador web | HTTP/2 | Soporte nativo del navegador, multiplexación, capacidades de envío del servidor |
🔄 gRPC se utiliza para las API específicas de móviles (por ejemplo, flujo de compra, actualizaciones del carrito).
Interacción entre servicio y base de datos
-
Ruta principal: Todas las operaciones de escritura y lecturas críticas van a
db-prime-01. -
Escalado de lectura: Las lecturas no críticas (por ejemplo, detalles del producto, vistas del catálogo) se redirigen a
db-replica-02mediante lógica de agrupamiento de conexiones. -
Ruta de respaldo: Durante un fallo en la ruta principal, los servicios pueden cambiar a
db-replica-02(etiquetado como “respaldo” en el diagrama).
📌 Nota: Las escrituras permanecen con líder único — no hay división de escritura hacia réplica.
Estrategia de caché
-
Claves de caché de Redis:
-
product:12345:details→ Almacenado en caché durante 5 minutos -
inventario:12345→ TTL: 30 segundos -
carrito:sesión:abc123→ Específico de sesión, expira después de 1 hora
-
-
Invalidación de caché:
-
Se activa con la actualización de productos, cambio de stock o finalización de pedidos.
-
Implementado mediante colas de mensajes (por ejemplo, Kafka) o desencadenadores directos en la base de datos.
-
⚠️ Compromiso: Consistencia eventual — ligera demora entre la actualización de la base de datos y la sincronización de la caché.
Replicación y conmutación por fallo
-
Primario → Réplica: Transmisión continua del registro WAL (Write-Ahead Log).
-
Disparador de conmutación por fallo: Comprobaciones de estado cada 5 segundos; automatizadas mediante un orquestador (por ejemplo, Patroni).
-
Tiempo de recuperación: ~30–60 segundos para promover la réplica y redirigir el tráfico.
🧩 Indicadores visuales: La etiqueta «fallback» y el estilo desactivado en el diagrama enfatizan que esta es una ruta ruta no primaria en condiciones normales.
4. Decisiones arquitectónicas clave y compromisos
| Decisión | Razonamiento | Compromiso / Consideración |
|---|---|---|
| Backends políglotas (Java + Go) | Spring Boot ofrece soporte maduro para transacciones y un ecosistema para el procesamiento de pedidos. Go + Gin proporciona alto rendimiento y baja latencia para la búsqueda de productos. | Complejidad operativa aumentada: dos entornos de ejecución, pipelines de compilación, pilas de monitoreo. |
| PostgreSQL primario + réplica | Garantiza el cumplimiento de ACID para datos financieros. La replicación permite escalado de lectura y recuperación ante desastres. | Un líder de escritura único crea un cuello de botella potencial durante picos extremos de escritura. |
| Capa de caché Redis | Descarga las lecturas frecuentes de productos; reduce la carga de la base de datos y mejora la latencia. | La invalidación de caché es compleja; requiere un diseño cuidadoso para evitar datos obsoletos. |
| gRPC (móvil), HTTP/2 (web) | gRPC es ideal para móviles (cargas más pequeñas, análisis más rápido). HTTP/2 es ampliamente compatible en navegadores. | La pila de protocolos dual aumenta la sobrecarga de desarrollo y pruebas. |
| Proxy inverso Nginx | Centraliza la terminación de SSL, equilibrio de carga, CORS y límite de tasa. | Agrega un punto único de fallo (SPOF) a menos que se implemente en modo de alta disponibilidad. |
| Nodos de fallback con etiquetas | Indica claramente las rutas de failover para el análisis de incidentes y la incorporación. | Requiere disciplina para mantener los diagramas actualizados durante los cambios en la infraestructura. |
5. Propiedades no funcionales destacadas
| Propiedad | Cómo se logra |
|---|---|
| Rendimiento | Servicio Go de alto rendimiento, caché Redis, eficiencia de gRPC, multiplexación de HTTP/2 |
| Disponibilidad | Replicación de base de datos, rutas de fallback, nodos redundantes |
| Escalabilidad | Escalado de lectura mediante réplica, potencial de escalado horizontal de servicios |
| Observabilidad | Protocolos claros, indicadores de volumen de tráfico, ubicaciones de nodos y etiquetas |
| Seguridad | SSL/TLS obligatorio, políticas CORS aplicadas, conexiones seguras a la base de datos |
| Mantenibilidad | Los diagramas C4 están bajo control de versiones, son auto-documentados y alineados con la base de código |
💡 Estas propiedades no se asumen; se diseñan explícitamente en la estructura de despliegue.
6. Alineación del modelo C4 y conceptos clave ilustrados
Este diagrama de despliegue es un ejemplo canónico de un diagrama de despliegue C4, uno de los cuatro niveles en el modelo C4 (Contexto, Contenedor, Componente, Despliegue).
✅ Conceptos centrales del diagrama de despliegue C4 demostrados
| Concepto | Implementación en este diagrama |
|---|---|
| Nodos de despliegue | Servidores físicos/virtuales (api-gw-01, db-prime-01, etc.) |
| Instancias de contenedor | Servicios en tiempo de ejecución (Servicio de pedidos, Servicio de productos, Redis, PostgreSQL) colocados dentro de nodos |
| Nodos de infraestructura | Balanceador de carga implícito (Nginx), red de fibra de alta velocidad, ubicación del centro de datos |
| Relaciones | Flechas direccionales que muestran el flujo de tráfico, protocolos (HTTP/2, gRPC, JDBC, Redis) y lógica de fallback |
| Etiquetas y estilo | "fallback" etiqueta y estilo desactivado para db-replica-02 para indicar el rol secundario |
| Propiedades | Versiones del sistema operativo, versiones de software, protocolos, volumen de tráfico, configuraciones de seguridad |
| Enfoque en el entorno | Claramente etiquetado como «Entorno de Producción en Vivo» |
🛠️ Se siguen las mejores prácticas de C4
-
Mapeo de contenedores a la infraestructura, no se recrea la lógica del componente.
-
Estructura anidada: Servidor → Entorno de ejecución → Contenedor (por ejemplo,
api-gw-01→ Spring Boot → Servicio de Pedidos). -
Rutas explícitas de conmutación por fallo y escalado mostradas visualmente.
-
Protocolos y tecnologías claramente etiquetados.
-
Indicadores visuales (color, etiquetas) utilizados para distinguir rutas principales frente a rutas de respaldo.
-
Rico en metadatos — incluye ubicación, versión y contexto de rendimiento.
📌 ¿Por qué esto importa: Este diagrama responde la pregunta fundamental:
«¿Dónde y cómo se está ejecutando realmente este sistema en producción?»
Complementa los diagramas de nivel superior (por ejemplo, Diagrama de Contenedores que muestra los límites de los servicios) al fundamentarlos en infraestructura del mundo real.
7. Conclusión y hoja de ruta futura
✅ Resumen de éxitos
-
La plataforma ofrece alto rendimiento, resiliencia, y flexibilidad para desarrolladores.
-
El Diagrama de implementación C4 actúa como un artefacto de documentación viviente, integrado en CI/CD y control de versiones.
-
Los equipos lo usan para:
-
Integración de nuevos ingenieros
-
Respuesta a incidentes y análisis de causa raíz
-
Planificación de capacidad y decisiones de escalado
-
Revisiones de arquitectura y verificaciones de cumplimiento
-
🔮 Mejoras futuras
| Mejora | Beneficio |
|---|---|
| Agregar orquestación de Kubernetes | Permite escalado automático, autocuración y despliegue declarativo |
| Introduce fragmentación de bases de datos | Escalabilidad más allá de los límites de un solo primario para conjuntos de datos masivos |
| Agregar nodos de observabilidad | Incluir exportadores de Prometheus, Grafana y OpenTelemetry para monitoreo de toda la pila |
| Crear diagramas de preproducción/estágio | Permite validación específica de entorno y gestión de cambios |
| Automatizar la generación de diagramas | Usar herramientas de inteligencia artificial (por ejemplo, Visual Paradigm’s C4 PlantUML Studio) para generar diagramas a partir de código o requisitos |
🤖 Herramientas impulsadas por IA como C4 PlantUML Studio de Visual Paradigm pueden generar estos diagramas a partir de descripciones en lenguaje natural, acelerando la documentación y reduciendo errores.
Lista de referencias (formato Markdown)
- Generador de diagramas de IA de Visual Paradigm: soporte completo para el modelo C4
Notas de lanzamiento que destacan la generación de modelos C4 impulsada por IA, incluyendo diagramas de Paisaje del Sistema, Contexto, Contenedor y Componente. - Acerca de los diagramas C4 en C4 PlantUML Studio impulsado por IA
Visión general completa de cómo la IA genera diagramas C4, incluyendo ingeniería de prompts, validación de salidas y casos de uso empresariales. - Generador de diagramas de paisaje del sistema C4 con IA – Guía de Visual Paradigm
Tutorial paso a paso sobre cómo generar un diagrama de paisaje del sistema a partir de una entrada en lenguaje natural. - Características de C4 PlantUML Studio de Visual Paradigm
Página oficial de características que detalla la generación con IA, integración con PlantUML, soporte para diagramas de múltiples niveles y herramientas de colaboración. - Guía para principiantes sobre diagramas del modelo C4
Introducción accesible a los cuatro niveles del modelo C4 y sus aplicaciones prácticas. - La guía definitiva para C4 PlantUML Studio – Revolucionando el diseño de arquitectura de software
Análisis profundo sobre cómo el diseño de arquitectura asistido por IA transforma los flujos de trabajo para equipos de todos los tamaños. - Diagrama de componente C4: una guía definitiva sobre la estructura interna de tu código
Refuerza la naturaleza jerárquica de los diagramas C4, comenzando desde el paisaje del sistema hasta el detalle a nivel de componente.
Conclusión final
Esta plataforma de comercio electrónico ejemplifica cómo la arquitectura de software moderna puede ser claramente comunicada, operativamente eficaz, y resistente al futuro — todo ello mediante el uso disciplinado del modelo C4 y PlantUML.
Al tratar los diagramas de despliegue comoactivos vivos y controlados por versión, las organizaciones pueden:
-
Reducir el tiempo de incorporación
-
Acelerar la respuesta ante incidentes
-
Alinear a los actores técnicos y comerciales
-
Evolver sistemas con confianza
🏁 El futuro de la documentación de arquitectura no es solo visual: es inteligente, automatizado e integrado.
Con herramientas comoC4 PlantUML Studio, los equipos pueden pasar de diagramas estáticos anarración de arquitectura dinámica y aumentada por IA— asegurando claridad, consistencia y continuidad a lo largo de todo el ciclo de vida del software.
📌 Este estudio de caso es una referencia práctica para cualquier equipo que construya o documente sistemas de producción utilizando el modelo C4. Adáptalo, extiéndelo y manténlo vivo con tu código.





