Visor y editor de diagramas C4

Autores
  • Visor y editor de diagramas C4
Serie: UML and Software Architecture
Episodios: (2/7)

Visor y Editor de Diagramas C4: MassiveDiag Playground

Presentamos la Diagramación C4 en MassiveDiag

MassiveDiag Playground ofrece un potente visor y editor de diagramas C4 que transforma el código de diagramas basado en texto en visualizaciones profesionales de arquitectura de sistemas en tiempo real. Esta herramienta destaca como un editor en vivo del modelo C4, permitiéndote ver y refinar instantáneamente tus diagramas de arquitectura de software mientras los desarrollas.

Ya sea que necesites:

  • Conversión de código de diagrama C4 a SVG para documentación web,
  • Exportación de código de diagrama C4 a documento Word para especificaciones técnicas,
  • Conversión de código de modelo C4 a PNG para presentaciones,
  • Exportación de modelo C4 a PDF para documentación formal,

MassiveDiag Playground lo hace fácil y eficiente.

my Image

Prueba ahora el Editor de Diagramas C4 de MassiveDiag →

¿Qué es el Modelo C4?

El modelo C4 es un enfoque en capas para visualizar la arquitectura de software, creado por Simon Brown. Proporciona una forma estandarizada de documentar sistemas de software a través de cuatro niveles de diagramas:

  1. Diagramas de contexto – Vista general del sistema y sus interacciones
  2. Diagramas de contenedores – Elecciones tecnológicas de alto nivel
  3. Diagramas de componentes – Componentes lógicos dentro de los contenedores
  4. Diagramas de código – Detalles de implementación (opcional)

MassiveDiag actúa como un potente generador de diagramas del modelo C4 basado en código, facilitando el acceso a diagramas de arquitectura para desarrolladores y arquitectos técnicos.

Primeros Pasos con el Código de Diagramas C4

Ejemplo de Diagrama de Contexto

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

title Diagrama de Contexto del Sistema de Banca en Línea

Person(customer, "Cliente Bancario", "Un cliente del banco con cuentas personales.")
System(banking_system, "Sistema de Banca en Línea", "Permite a los clientes ver información de sus cuentas y realizar pagos.")
System_Ext(mail_system, "Sistema de Correo", "Sistema de correo Microsoft Exchange interno.")
System_Ext(mainframe, "Mainframe Bancario", "Almacena toda la información bancaria central sobre clientes, cuentas, transacciones, etc.")

Rel(customer, banking_system, "Usa")
Rel(banking_system, mail_system, "Envía correos electrónicos usando")
Rel(banking_system, mainframe, "Usa")
@enduml

my Image

Ejemplo de Diagrama de Contenedores

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

title Diagrama de Contenedores del Sistema de Banca en Línea

Person(customer, "Cliente Bancario", "Un cliente del banco con cuentas personales.")

System_Boundary(c1, "Sistema de Banca en Línea") {
    Container(web_app, "Aplicación Web", "Java y Spring MVC", "Entrega contenido estático y la SPA de banca en línea.")
    Container(spa, "Aplicación de Página Única", "JavaScript y Angular", "Proporciona funcionalidad bancaria completa a los clientes.")
    Container(mobile_app, "Aplicación Móvil", "Xamarin", "Proporciona funcionalidad bancaria limitada a los clientes.")
    Container(api, "Aplicación API", "Java y Spring MVC", "Ofrece funcionalidad bancaria mediante API JSON/HTTPS.")
    Container(database, "Base de Datos", "Oracle", "Almacena información de registro, credenciales, logs de acceso, etc.")
}

System_Ext(mainframe, "Mainframe Bancario", "Almacena información bancaria central sobre clientes, cuentas, transacciones, etc.")
System_Ext(email, "Sistema de Correo", "Sistema Microsoft Exchange interno.")

Rel(customer, web_app, "Usa", "HTTPS")
Rel(customer, spa, "Usa", "HTTPS")
Rel(customer, mobile_app, "Usa")
Rel(web_app, spa, "Entrega al navegador del cliente")
Rel(spa, api, "Llama a API", "JSON/HTTPS")
Rel(mobile_app, api, "Llama a API", "JSON/HTTPS")
Rel(api, database, "Lee y escribe en", "JDBC")
Rel(api, mainframe, "Llama a API", "XML/HTTPS")
Rel(api, email, "Envía correos usando")
@enduml

my Image

Cómo Usar MassiveDiag como tu Visor de Diagramas C4

1. Genera o Prepara tu Código del Modelo C4

Puedes escribir tu propio código del modelo C4 o usar herramientas de IA como ChatGPT para generarlo fácilmente.

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

Person(admin, "Administrador", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite")
System_Boundary(c1, "Sistema de Ejemplo", $link="https://github.com/plantuml-stdlib/C4-PlantUML") {
    Container(web_app, "Aplicación Web", "C#, ASP.NET Core 2.1 MVC", $descr="Permite comparar múltiples líneas de tiempo de Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md")
}
System(twitter, "Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML")

Rel(admin, web_app, "Usa", "HTTPS", $link="https://plantuml.com/link")
Rel(web_app, twitter, "Obtiene tweets de", "HTTPS", $link="https://plantuml.com/link")
@enduml

2. Pega el Código en MassiveDiag Playground

Accede al MassiveDiag Playground – sin necesidad de instalación o registro. Pega o sube tu código.

my Image

3. Elige "C4" como Tipo de Diagrama

El playground detecta automáticamente el tipo de diagrama, pero puedes seleccionar manualmente "C4 PlantUML" si lo deseas.

my Image

4. Crea tu Diagrama

Haz clic en "Crear Diagrama" para transformar el código en un diagrama visual C4.

my Image

5. Edita y Refina

Utiliza la interfaz de doble panel para:

  • Editar el código y ver actualizaciones en tiempo real
  • Realizar ajustes visuales en el editor SVG en vivo

6. Exporta en el Formato que Prefieras

Elige entre múltiples opciones de exportación:

  • SVG para uso web
  • PNG para presentaciones
  • PDF para documentación
  • Word para especificaciones técnicas
  • React JSX para componentes interactivos en la web

my Image

¡Crea tu Primer Diagrama C4 Ahora →

Casos de Uso Práctico de Diagramas C4

Documentación de Arquitectura de Software

Utiliza diagramas C4 para documentar el diseño de tu sistema en distintos niveles:

  • Diagramas de contexto para partes interesadas
  • Diagramas de contenedores para equipos de desarrollo
  • Diagramas de componentes para planificación técnica

Especificaciones Técnicas

Genera diagramas para:

  • Documentos de propuesta de sistema
  • Registros de Decisiones de Arquitectura (ADR)
  • Especificaciones de requisitos técnicos

Onboarding y Transferencia de Conocimiento

Crea visiones generales del sistema para ayudar a nuevos miembros a comprender:

  • Límites e interacciones del sistema
  • Visualización de la pila tecnológica
  • Responsabilidades y relaciones entre componentes

Preguntas Frecuentes sobre Diagramas C4 y MassiveDiag

¿Qué hace diferente al modelo C4 de otros enfoques?

C4 proporciona un enfoque jerárquico y estandarizado para documentar la arquitectura de software.

¿Necesito saber programar para usar el visor de diagramas C4?

No es obligatorio, pero tener una noción básica de sintaxis de código es útil.

¿Puedo colaborar con otros en mis diagramas C4?

Sí, puedes compartir el código del diagrama C4 o exportar los diagramas para revisión y colaboración.

¿Cómo incluyo los diagramas C4 en mi documentación?

  • Exporta como SVG/PNG para la web o presentaciones
  • Exporta como PDF/Word para documentación formal

Empieza a Crear Diagramas C4 Profesionales Ahora →

Compartir