Introducción
En el entorno en rápida evolución del desarrollo de software y la arquitectura de sistemas, la claridad es la moneda. Durante décadas, los profesionales han dependido de interfaces de arrastrar y soltar para crear diagramas, un proceso que a menudo es lento, difícil de controlar mediante versiones y propenso a inconsistencias. A medida que los equipos adoptan prácticas de DevOps y metodologías de infraestructura como código (IaC), la demanda de “diagramas como código” (DaC) ha aumentado considerablemente.
Presente VPasCode (Visual Paradigm como código), una plataforma completamente nueva y unificada diseñada para cerrar la brecha entre la precisión textual y la claridad visual. Ya sea que usted sea un ingeniero de software que define estructuras de clases, un arquitecto de sistemas que mapea infraestructura en la nube o un analista de negocios que describe flujos de trabajo, VPasCode transforma el texto en diagramas hermosos y profesionales en segundos. Al integrar los motores de diagramación de código abierto más populares del mundo en un entorno web único y fluido, VPasCode elimina el cambio de contexto y permite a los equipos crear, previsualizar y compartir visualizaciones complejas con una eficiencia sin precedentes.

¿Qué es VPasCode?
VPasCode es un entorno integrado que combina un editor de código cómodo y gratuitoeditor de código con un renderizador de alto rendimientorenderizador de diagramas. Está diseñado para quienes aman la velocidad, la reproducibilidad y las ventajas de control de versiones del escritura de código, pero necesitan el poder comunicativo de los diagramas visuales.
Dado que es un entorno completamente integrado, VPasCode teóricamente admitetodos las reglas de sintaxis para los motores de diagramación más populares del mundo. En su lanzamiento, admite completamente:
-
Editor y renderizador de PlantUML: Cree diagramas robustos de arquitectura empresarial y de software.
-
Editor y renderizador de Mermaid.js: Renderice gráficos y cronologías modernas inspiradas en markdown directamente en su navegador.
-
Editor y renderizador de Graphviz: Aproveche el poder del lenguaje DOT para estructuras de red y datos complejas.
Este soporte multi-motor garantiza que, independientemente de su sintaxis preferida o de los estándares de documentación heredados, VPasCode sirva como un espacio universal para sus necesidades visuales.

Tipos de diagramas compatibles a simple vista
VPasCode admite una biblioteca increíblemente amplia de tipos de diagramas. Aquí tiene una vista general de lo que puede crear ahora mismo:
Integración con PlantUML
-
Diagramas de secuencia, de casos de uso, de clases y de objetos
-
Diagramas de actividad, de componentes, de despliegue y de estado
-
Modelos ArchiMate y C4
-
Diagramas de relaciones de entidades (ERD) y ERD de Chen
-
Diagramas de red, Estructura de desglose de trabajo (WBS) y diagramas de temporización
Integración con Mermaid.js
-
Diagramas de flujo, de clases y de secuencia
-
Diagramas de relaciones entidad (ERD) y diagramas de estado
-
Mapas mentales, cronologías y mapas del recorrido del usuario
-
Diagramas de Gantt, gráficos de Git y tableros Kanban
-
Modelos C4, diagramas de cuadrantes y diagramas de requisitos
Integración con Graphviz
-
Digrafo y grafo
-
Diagramas de flujo y diagramas de flujo de datos
-
Diagramas organizativos y agrupaciones
Características y capacidades
Queremos que VPasCode sea accesible para todos, por eso hemos incluido en nuestra versión gratuita herramientas esenciales, mientras ofrecemos características innovadoras con asistencia de IA para usuarios premium.
Características gratuitas disponibles para todos:
-
Soporte multi-motor:Acceso completo a PlantUML, Mermaid.js y Graphviz.
-
Descripciones textuales:Cree diagramas complejos únicamente mediante código intuitivo.
-
Vista previa en tiempo real:Vea su diagrama actualizarse instantáneamente en el lado de su pantalla mientras escribe.
-
Compartir fácilmente:Genere una URL única para compartir fácilmente su diagrama en vivo con sus compañeros de equipo o clientes.
-
Exportaciones flexibles:Descargue su trabajo terminado como imágenes de alta calidadPNGo gráficos vectoriales escalablesSVGgráficos vectoriales.
Potencie su flujo de trabajo con características de pago:
-
Corrección de errores de código con IA:¿Atascado en un error de sintaxis? Nuestra IA integrada analizará su código de PlantUML, Mermaid o Graphviz y corregirá los errores automáticamente.

-
Traducción con IA:Traduzca sin problemas el texto y las etiquetas dentro de sus diagramas a múltiples idiomas con un solo clic, eliminando las barreras lingüísticas en equipos globales.

Cómo acceder a las funciones pagadas de VPasCode
Si ya es usuario existente de Visual Paradigm, es posible que ya tenga acceso a nuestras funciones premium de IA. Las funciones pagadas de VPasCode están incluidas con:
-
Edición combinada en línea de Visual Paradigm (o superior).
-
Edición profesional de escritorio de Visual Paradigm (o superior) con un contrato de mantenimiento activo.
Nota para usuarios de escritorio:Los usuarios de la edición profesional de Visual Paradigm (o superior) con mantenimiento activo obtienen automáticamente acceso completo a las aplicaciones web de la edición combinada en línea de VP, lo que significa que obtiene acceso instantáneo a las herramientas premium de IA de VPasCode sin costo adicional.
PlantUML y Mermaid en VPasCode – Ejemplos de diagramas
Diagrama de casos de uso de PlantUML: Sistema de comercio electrónico
Este diagrama de casos de uso ilustra las interacciones principales dentro de un sistema de pago de comercio electrónico. Un cliente puede ver su carrito y proceder al pago, donde la autenticación, la aplicación de cupones y el pago con tarjeta de crédito están integrados mediante servicios externos como un proveedor de identidad y un procesador de pagos.

@startuml
dirección de izquierda a derecha
actor "Cliente de comercio electrónico" como customer
actor "Proveedor de identidad" como authPool
actor "Procesador de pagos" como stripe
rectángulo "Límite del sistema de pago" {
usecase "Autenticar" como UC_Auth
usecase "Ver carrito" como UC_Cart
usecase "Pagar" como UC_Check
usecase "Aplicar cupón" como UC_Promo
usecase "Pagar con tarjeta de crédito" como UC_Pay
}
customer --> UC_Cart
customer --> UC_Check
UC_Check ..> UC_Auth : <>
UC_Check <.. UC_Promo : <>
UC_Check ..> UC_Pay : <>
UC_Auth --> authPool
UC_Pay --> stripe
@enduml
Diagrama de clases de PlantUML: Sistema de gestión de bibliotecas
Este diagrama de clases modela un sistema de gestión de bibliotecas, mostrando las entidades clave involucradas en la gestión de catálogos, servicios para miembros y operaciones de préstamo. El diseño utiliza herencia para representar diferentes tipos de materiales de biblioteca (como libros, revistas y DVDs), mientras que las asociaciones entre miembros, bibliotecarios, registros de préstamo y multas ilustran cómo los artículos son prestados, devueltos y gestionados a lo largo de su ciclo de vida.

@startuml
class Biblioteca {
- nombre: String
- dirección: String
- teléfono: String
+ agregarMiembro(miembro: Miembro): void
+ eliminarMiembro(idMiembro: String): void
+ agregarItem(item: ItemBiblioteca): void
+ eliminarItem(idItem: String): void
+ prestarItem(idMiembro: String, idItem: String): boolean
+ devolverItem(idItem: String): boolean
}
class ItemBiblioteca {
# idItem: String
# título: String
# editorial: String
# añoPublicación: int
# disponible: boolean
+ obtenerDetalles(): String
+ establecerDisponibilidad(estado: boolean): void
}
clase abstracta Libro {
- isbn: String
- autor: String
- númeroPáginas: int
+ obtenerAutor(): String
}
class LibroDigital {
- tamañoMB: double
- formato: String
- urlDescarga: String
+ descargar(): void
}
class LibroImpreso {
- ubicaciónEstante: String
- estado: String
+ obtenerUbicaciónEstante(): String
}
class Revista {
- númeroEdición: int
- númeroVolumen: int
- fechaPortada: Date
}
class DVD {
- duraciónMinutos: int
- director: String
- idioma: String
- subtítulosDisponibles: boolean
}
class Miembro {
- idMiembro: String
- nombre: String
- correo: String
- teléfono: String
- fechaAfiliación: Date
+ prestarItem(item: ItemBiblioteca): boolean
+ devolverItem(item: ItemBiblioteca): boolean
+ obtenerItemsPrestados(): List
}
class RegistroPrestamo {
- idRegistro: String
- fechaPrestamo: Date
- fechaVencimiento: Date
- fechaDevolucion: Date
- estáAtrasado(): boolean
- calcularMulta(): double
}
class Multa {
- idMulta: String
- monto: double
- fechaEmisión: Date
- estáPagada: boolean
+ pagarMulta(): void
}
class Bibliotecario {
- idPersonal: String
- departamento: String
+ procesarPrestamo(miembro: Miembro, item: ItemBiblioteca): void
+ procesarDevolución(item: ItemBiblioteca): void
+ generarReporte(): void
+ gestionarInventario(): void
}
' Relaciones de herencia
ItemBiblioteca <|-- Libro
ItemBiblioteca <|-- Revista
ItemBiblioteca <|-- DVD
Libro <|-- LibroDigital
Libro <|-- LibroImpreso
' Composición y agregación
Biblioteca "1" -- "muchos" Miembro : tiene >
Biblioteca "1" -- "muchos" ItemBiblioteca : contiene >
Biblioteca "1" -- "muchos" Bibliotecario : emplea >
Miembro "1" -- "muchos" RegistroPrestamo : tiene >
RegistroPrestamo "1" -- "1..*" ItemBiblioteca : referencia >
RegistroPrestamo "1" -- "0..*" Multa : genera >
' Asociación
Bibliotecario --> RegistroPrestamo : gestiona >
Miembro --> RegistroPrestamo : crea >
nota arriba de Biblioteca : Sistema central que gestionanmiembros, artículos y préstamos
nota derecha de ItemBiblioteca : Clase base abstractanpara todos los materiales de biblioteca
@enduml
Diagrama de secuencia de PlantUML: Retiro de efectivo en cajero automático
Este diagrama de secuencia ilustra las interacciones involucradas en una transacción de retiro de efectivo en un cajero automático, desde la inserción de la tarjeta y la validación del PIN hasta la dispensación de efectivo y la actualización de la cuenta. Destaca la comunicación entre el cliente, el cajero automático, el sistema bancario y la base de datos de la cuenta del cliente, además de modelar flujos alternativos como intentos fallidos de PIN, fondos insuficientes y la impresión opcional de recibos.

@startuml
' Título
título Retiro de efectivo en cajero automático - Diagrama de secuencia
' Actores y participantes
actor Cliente como C
participante "Cajero automático" como ATM
participante "Sistema bancario" como BS
base de datos "Cuenta del cliente" como DB
' Secuencia
C -> ATM : Insertar tarjeta
ATM -> ATM : Leer detalles de la tarjeta
ATM -> C : Solicitar PIN
C -> ATM : Ingresar PIN
ATM -> BS : Validar tarjeta y PIN
BS -> DB : Verificar credenciales
DB --> BS : Resultado de validación
alt PIN inválido
BS --> ATM : PIN inválido
ATM -> C : PIN inválido, inténtelo de nuevo
nota derecha: Después de 3 intentos fallidos,nla tarjeta se retiene
else PIN válido
BS --> ATM : PIN válido
ATM -> C : Mostrar menú principal
C -> ATM : Seleccionar retiro
ATM -> C : Solicitar monto
C -> ATM : Ingresar monto
ATM -> BS : Verificar saldo y límite
BS -> DB : Consultar saldo
DB --> BS : Saldo actual
alt Fondos insuficientes
BS --> ATM : Saldo insuficiente
ATM -> C : Transacción rechazadan(Mostrar saldo)
C -> ATM : Cancelar transacción
ATM -> C : Devolver tarjeta
else Fondos suficientes
BS --> ATM : Aprobado
ATM -> ATM : Dispensar efectivo
ATM -> C : Dispensar efectivo
C -> ATM : Recoger efectivo
ATM -> BS : Confirmar dispensación de efectivo
BS -> DB : Debitar cuenta y registrar transacción
DB --> BS : Actualización completa
BS --> ATM : Transacción completada
ATM -> C : Imprimir recibo
alt Recibo solicitado
C -> ATM : Recoger recibo
else Sin recibo
C -> ATM : Rechazar recibo
end
ATM -> C : Devolver tarjeta
C -> ATM : Recoger tarjeta
end
end
ATM -> C : Gracias / Finalizar transacción
@enduml
Diagrama de actividad de PlantUML: Sistema de reclamaciones de seguros
Este diagrama de actividad modela el flujo de trabajo completo de un sistema de procesamiento de reclamaciones de seguros, desde la presentación de la reclamación hasta la validación, la investigación y la resolución. Captura puntos clave de decisión como la elegibilidad de la póliza, la completitud de los documentos, la validez de la reclamación y la aceptación de la resolución, al tiempo que ilustra tanto los caminos exitosos como los de manejo de excepciones, incluyendo la rechazo de reclamaciones y la resolución de disputas.

@startuml SistemaReclamacionesSeguros
start
:El asegurado presenta la reclamación;
:La reclamación se registra en el sistema;
si (¿La póliza está activa y es válida?) entonces (sí)
:Asignar la reclamación al ajustador;
:Notificar al ajustador sobre la nueva reclamación;
sino (no)
:Enviar notificación de rechazo al asegurado;
:Registrar motivo: Póliza inactiva/inválida;
stop
fin si
:El ajustador revisa los documentos presentados;
si (¿Están todos los documentos requeridos presentes?) entonces (sí)
:El ajustador inicia la validación de la reclamación;
sino (no)
:Solicitar documentos faltantes al asegurado;
:Esperar documentos adicionales;
:Volver a revisar los documentos;
nota derecha
El sistema espera la
respuesta del asegurado
fin nota
-> volver a "El ajustador revisa los documentos presentados";
fin si
:El ajustador investiga la reclamación;
:Contactar testigos/expertos si es necesario;
:Estimar el monto de daños/pérdidas;
si (¿La reclamación es válida según los términos de la póliza?) entonces (sí)
:Calcular el monto aprobado;
:Aplicar la franquicia si es aplicable;
sino (no)
:Enviar notificación de rechazo con motivo;
:Registrar decisión en el sistema;
stop
fin si
:Generar oferta de resolución;
:Enviar oferta de resolución al asegurado;
:El asegurado revisa la oferta;
si (¿El asegurado acepta la oferta?) entonces (sí)
:Procesar el pago;
:Actualizar el estado de la reclamación a "Resuelta";
:Enviar confirmación al asegurado;
:Registrar detalles de cierre;
sino (no)
:Escalar a resolución de disputas;
:Negociar la resolución;
:Actualizar la oferta;
-> volver a "Enviar oferta de resolución al asegurado";
fin si
stop
@enduml
Diagrama de estados de PlantUML: Sistema de detección de humo
Este diagrama de estados ilustra el comportamiento de un sistema de detección de humo mientras transita entre estados operativos como espera, monitoreo, detección de humo, activación de alarma y manejo de errores. Muestra cómo el sistema responde a eventos como cambios de alimentación, resultados de autopruebas, detección de humo, condiciones de batería baja y reinicios iniciados por el usuario, para garantizar un monitoreo confiable de incendios y alertas.

@startuml SistemaDeteccionHumo
titulo Diagrama de estados - Sistema de detección de humo
[*] --> Apagado
estado Apagado {
[*] --> SinAlimentacion
SinAlimentacion : Dispositivo apagado
SinAlimentacion --> Encendido : Botón de encendido pulsado
}
estado Encendido {
[*] --> Espera
Espera : Sistema listo
Espera --> Autoprueba : Autoprueba periódica (cada 24h)
Espera --> Monitoreo : Iniciar monitoreo (sensor activo)
estado Autoprueba {
[*] --> PruebaSensores
PruebaSensores --> PruebaExitosa : Todos los sensores OK
PruebaSensores --> PruebaFallida : Error detectado en sensor
PruebaExitosa --> Espera : Volver a espera
PruebaFallida --> EstadoError : Reportar error
}
estado Monitoreo {
[*] --> SinHumo
SinHumo : Operación normal
SinHumo --> DeteccionHumo : Nivel de humo > umbral
SinHumo --> BateriaBaja : Batería baja (inalámbrico)
BateriaBaja --> SinHumo : Batería reemplazada
estado DeteccionHumo {
[*] --> AlertaInicial
AlertaInicial --> ConfirmacionHumo : El humo persiste > 5 segundos
AlertaInicial --> FalsaAlarma : El humo desaparece < 5 segundos FalsaAlarma --> SinHumo : Reinicio
ConfirmacionHumo --> AlarmaActivada
}
estado AlarmaActivada {
[*] --> ActivarAlarma : Activar sirena y luces
ActivarAlarma --> EnviarNotificacion : Notificar panel de control / app
EnviarNotificacion --> EsperarReinicio
EsperarReinicio --> AlarmaActivada : El humo aún está presente
EsperarReinicio --> ReiniciarSistema : Botón de reinicio pulsado
ReiniciarSistema --> SinHumo : El sistema se reinicia
}
}
}
estado EstadoError {
[*] --> IndicadorFallo : Parpadeo del LED de error
IndicadorFallo --> Apagado : Se requiere reinicio manual de alimentación
}
Encendido --> EstadoError : Falla en autoprueba
EstadoError --> Apagado : Reinicio de alimentación
Apagado --> [*] : Sistema desenchufado / batería retirada
@enduml
Diagrama de componentes de PlantUML: Sistema de mensajería
Este diagrama de componentes presenta la arquitectura de alto nivel de un sistema de gestión de mensajeros, mostrando cómo las aplicaciones cliente, los servicios de fondo, la infraestructura de mensajería, las memorias caché y las bases de datos interactúan para apoyar las operaciones de entrega de paquetes. Ilustra la separación de responsabilidades entre servicios como gestión de pedidos, despacho, seguimiento, pagos, notificaciones y gestión de usuarios, destacando tanto la comunicación de API síncrona como el procesamiento asíncrono basado en eventos.

@startuml SistemaMensajeria
titulo Sistema de mensajería - Diagrama de componentes
' === Componentes ===
component "Aplicación del cliente" as ClienteApp
component "Aplicación móvil del mensajero" as MensajeroApp
component "Panel web de administración" as PanelAdmin
component "Pasarela de API" as PasarelaAPI
component "Servicio de pedidos" as ServicioPedidos
component "Servicio de despacho" as ServicioDespacho
component "Servicio de seguimiento" as ServicioSeguimiento
component "Servicio de pagos" as ServicioPagos
component "Servicio de notificaciones" as ServicioNotificaciones
component "Servicio de usuarios" as ServicioUsuarios
component "Cola de mensajesn(RabbitMQ/Kafka)" as ColaMensajes
component "Caché Redis" as RedisCache
database "Base de datos PostgreSQL" as SQLDB
database "MongoDBn(Los registros/historial de seguimiento)" as MongoLogs
' === Interfaces / Puertos ===
ClienteApp --> PasarelaAPI : "REST / WebSocket"
MensajeroApp --> PasarelaAPI : "REST / WebSocket"
PanelAdmin --> PasarelaAPI : "REST"
PasarelaAPI --> ServicioPedidos
PasarelaAPI --> ServicioSeguimiento
PasarelaAPI --> ServicioPagos
PasarelaAPI --> ServicioUsuarios
' === Dependencias de servicios ===
ServicioPedidos --> ServicioDespacho : "gRPC / REST"
ServicioPedidos --> ServicioPagos
ServicioPedidos --> ServicioNotificaciones
ServicioPedidos --> SQLDB : "JDBC"
ServicioPedidos --> RedisCache : "Caché"
ServicioDespacho --> ColaMensajes : "Publicar eventos"
ServicioDespacho --> MensajeroApp : "Enviar por pasarela de API"
ServicioDespacho --> SQLDB
ServicioSeguimiento --> ColaMensajes : "Suscribirse a actualizaciones de ubicación"
ServicioSeguimiento --> MongoLogs : "Escribir historial de seguimiento"
ServicioSeguimiento --> RedisCache : "Caché de ubicación actual"
ServicioPagos --> SQLDB
ServicioPagos --> ServicioNotificaciones
ServicioNotificaciones --> ColaMensajes : "Consumir notificaciones"
ServicioNotificaciones --> ClienteApp : "Enviar por pasarela de API"
ServicioUsuarios --> SQLDB
ServicioUsuarios --> RedisCache
' === Notas ===
nota derecha de ServicioPedidos
Maneja la creación de paquetes,
precios y estado de pedidos
fin nota
nota derecha de ServicioDespacho
Asigna pedidos a mensajeros,
optimiza rutas
fin nota
nota abajo de ColaMensajes
Eventos asíncronos: pedido_creado,
ubicacion_actualizada,
estado_entrega_cambiado
fin nota
@enduml
Diagrama de despliegue de PlantUML: Arquitectura de ejemplo

@startuml
nodo "AWS Cloud Route53" como DNS
nodo "VPC (10.0.0.0/16)" {
nodo "Subred pública" {
artefacto "Balanceador de carga NGINX" como ALB
}
nodo "Cluster de subred privada" {
nodo "Instancia EC2 1" {
componente "API de Node.js [Pod 1]" como Pod1
}
nodo "Instancia EC2 2" {
componente "API de Node.js [Pod 2]" como Pod2
}
}
nodo "Subred de base de datos" {
base de datos "Amazon RDS (Aurora Multi-AZ)" como Aurora
}
}
DNS --> ALB : Resuelve el tráfico
ALB --> Pod1 : Balanceo round-robin
ALB --> Pod2
Pod1 --> Aurora : Grupo de conexiones
Pod2 --> Aurora
@enduml
Ejemplo de ArchiMate de PlantUML: Navegador de internet
Este diagrama ArchiMate ilustra cómo las capas de negocio, aplicación y tecnología interactúan para apoyar la funcionalidad empresarial basada en web a través de un navegador de internet. Muestra las relaciones entre los procesos de negocio, los componentes y datos de páginas web generados dinámicamente, los servicios y complementos del navegador, y la infraestructura subyacente del servidor web que entrega y apoya la experiencia de la aplicación.

@startuml Internet Browser Sample
!include <archimate/Archimate>
title Muestra ArchiMate - Navegador de Internet
'LAYOUT_AS_SKETCH()
'LAYOUT_LEFT_RIGHT()
'LAYOUT_TOP_DOWN()
Grouping(business, "Negocio"){
Business_Object(businessObject, "Un objeto de negocio")
Business_Process(someBusinessProcess,"Algún proceso de negocio")
Business_Service(itSupportService, "Soporte de TI para el negocio (servicio de aplicación)")
}
Grouping(application, "Aplicación"){
Application_DataObject(dataObject, "Datos de página web n 'en tiempo real'")
Application_Function(webpageBehaviour, "Comportamiento de página web")
Application_Component(ActivePartWebPage, "Parte activa de la página web n 'en tiempo real'")
}
Grouping(technology, "Tecnología"){
Technology_Artifact(inMemoryItem,"en memoria / 'en tiempo real' html/javascript")
Technology_Service(internetBrowser, "Navegador de internet genérico y complemento")
Technology_Service(internetBrowserPlugin, "Algún complemento de navegador de internet")
Technology_Service(webServer, "Algún servidor web")
}
Rel_Flow_Left(someBusinessProcess, businessObject, "")
Rel_Serving_Up(itSupportService, someBusinessProcess, "")
Rel_Specialization_Up(webpageBehaviour, itSupportService, "")
Rel_Flow_Right(dataObject, webpageBehaviour, "")
Rel_Specialization_Up(dataObject, businessObject, "")
Rel_Assignment_Left(ActivePartWebPage, webpageBehaviour, "")
Rel_Specialization_Up(inMemoryItem, dataObject, "")
Rel_Realization_Up(inMemoryItem, ActivePartWebPage, "")
Rel_Specialization_Right(inMemoryItem,internetBrowser, "")
Rel_Serving_Up(internetBrowser, webpageBehaviour, "")
Rel_Serving_Up(internetBrowserPlugin, webpageBehaviour, "")
Rel_Aggregation_Right(internetBrowser, internetBrowserPlugin, "")
Rel_Access_Up(webServer, inMemoryItem, "")
Rel_Serving_Up(webServer, internetBrowser, "")
@enduml
Ejemplo de ERD de PlantUML: Sistema de boletos para cine

@startuml
entity "Cliente" as customer {
* customer_id : UUID <>
--
* first_name : VARCHAR(50)
* last_name : VARCHAR(50)
* email : VARCHAR(100) <>
* phone : VARCHAR(20)
* loyalty_points : INT
* registration_date : TIMESTAMP
}
entity "Película" as movie {
* movie_id : UUID <>
--
* title : VARCHAR(200)
* description : TEXT
* duration_minutes : INT
* genre : VARCHAR(50)
* release_date : DATE
* rating : VARCHAR(10)
}
entity "Teatro" as theater {
* theater_id : UUID <>
--
* theater_name : VARCHAR(100)
* total_seats : INT
* seat_layout : JSON
}
entity "Función" as show {
* show_id : UUID <>
--
* movie_id : UUID <>
* theater_id : UUID <>
* show_time : TIMESTAMP
* end_time : TIMESTAMP
* language : VARCHAR(50)
* subtitle : BOOLEAN
* price_regular : DECIMAL(10,2)
* price_vip : DECIMAL(10,2)
}
entity "Asiento" as seat {
* seat_id : UUID <>
--
* theater_id : UUID <>
* row_label : CHAR(2)
* seat_number : INT
* seat_type : VARCHAR(20)
* is_accessible : BOOLEAN
}
entity "Reserva" as booking {
* booking_id : UUID <>
--
* customer_id : UUID <>
* show_id : UUID <>
* booking_time : TIMESTAMP
* total_amount : DECIMAL(10,2)
* status : VARCHAR(20)
* payment_method : VARCHAR(30)
* transaction_id : VARCHAR(100)
}
entity "BookingSeat" as booking_seat {
* booking_id : UUID <<FK,PK>>
* seat_id : UUID <<FK,PK>>
--
* ticket_price : DECIMAL(10,2)
* discount_applied : DECIMAL(10,2)
}
entity "Pago" as payment {
* payment_id : UUID <>
--
* booking_id : UUID <>
* amount : DECIMAL(10,2)
* payment_date : TIMESTAMP
* payment_status : VARCHAR(20)
* payment_gateway : VARCHAR(30)
* gateway_reference : VARCHAR(200)
}
entity "Reseña" as review {
* review_id : UUID <>
--
* customer_id : UUID <>
* movie_id : UUID <>
* rating : INT
* comment : TEXT
* review_date : TIMESTAMP
}
' Relaciones
customer ||--o{ booking : "realiza"
movie ||--o{ show : "programada como"
theater ||--o{ show : "aloja"
show ||--o{ booking : "tiene"
booking ||--|{ booking_seat : "contiene"
seat ||--o{ booking_seat : "asignado a"
booking ||--|| payment : "tiene"
customer ||--o{ review : "escribe"
movie ||--o{ review : "recibe"
note right of booking : Estado: PENDIENTE, CONFIRMADO, CANCELADO, EXPIRADO
note left of seat : tipo_asiento: NORMAL, VIP, PAREJAS
note right of payment : estado_pago: PENDIENTE, EXITOSO, FALLIDO, REEMBOLSADO
@enduml
Diagrama de flujo de Mermaid: Ver al médico
Este diagrama de flujo ilustra un proceso típico de toma de decisiones en salud, guiando a los pacientes desde la primera identificación de síntomas hasta el diagnóstico, pruebas, tratamiento y recuperación. Destaca puntos clave de decisión, incluyendo la evaluación de emergencia, la evaluación diagnóstica y la efectividad del tratamiento, mostrando cómo los síntomas no resueltos pueden requerir una consulta médica adicional y una reevaluación.

flowchart TD
A[Sentirse mal o necesitar consejo médico] --> B{¿Es una emergencia?}
B -->|Sí| C[Llamar a servicios de emergencia o ir al hospital]
B -->|No| D[Programar cita con el médico]
D --> E[Asistir a la cita]
E --> F[Evaluación del médico]
F --> G{¿Se ha realizado el diagnóstico?}
G -->|Sí| H[Plan de tratamiento]
G -->|No| I[Ordenar pruebas]
I --> J[Recibir resultados de las pruebas]
J --> F
H --> K[Seguir el tratamiento]
K --> L{¿Mejoraron los síntomas?}
L -->|Sí| M[Recuperación / seguimiento rutinario]
L -->|No| N[Volver al médico]
N --> F
Gráfico Graphviz
Este diagrama representa una topología de red de centro de datos simplificada, ilustrando cómo los hosts están conectados a través de una red principal de conmutadores interconectados. Destaca las rutas principales de comunicación entre los dispositivos de red, incluyendo un enlace troncal entre conmutadores y una conexión secundaria de respaldo que proporciona redundancia y resiliencia en caso de interrupciones de red.

graph UndirectedSpanningTree {
fontname="Helvetica,Arial,sans-serif"
label="Infraestructura principal de topología de red en malla para centro de datos"
labelloc="b"
fontsize=14
node [fontname="Helvetica,Arial,sans-serif", shape=circle, style=filled, color="#475569", fillcolor="#f1f5f9", width=0.8, fixedsize=true]
edge [color="#94a3b8", penwidth=2.5]
SwitchAlpha [label="SW_A", fillcolor="#cbd5e1"]
SwitchBeta [label="SW_B", fillcolor="#cbd5e1"]
Node1 [label="Host_01"]
Node2 [label="Host_02"]
Node3 [label="Host_03"]
Node4 [label="Host_04"]
SwitchAlpha -- SwitchBeta [label=" Enlace troncal", weight=5]
SwitchAlpha -- Node1
SwitchAlpha -- Node2
SwitchBeta -- Node3
SwitchBeta -- Node4
Node1 -- Node2 [style=dashed, color="#cbd5e1", label=" Interconexión de respaldo"]
} Arquitectura central y unidad multi-motor
VPasCode no es solo otra herramienta de diagramación; es un entorno de trabajo unificado que trae las sintaxis de diagramación más populares del mundo a un editor en la nube sin interrupciones. Su verdadero soporte multi-motor permite el análisis y renderizado nativos de PlantUML, Mermaid.js y Graphviz, asegurando compatibilidad con los estándares existentes de documentación. La función de vista previa en tiempo real proporciona una visualización lado a lado que renderiza gráficos instantáneamente mientras escribes tu script, mientras que su acceso en la nube sin configuración significa que funciona completamente en el navegador sin descargas de software ni dependencias locales.
Automatización nativa de IA
VPasCode aprovecha la inteligencia artificial para eliminar la fricción del proceso de diagramación:
-
Lenguaje natural a diagrama: Traduce directamente descripciones arquitectónicas en inglés sencillo en scripts de código limpios y listos para renderizar.
-
Corrección de errores de código con IA: Detecta scripts dañados y ofrece una opción de «Corregir con IA» para sanar instantáneamente los errores de sintaxis.
-
Traducción de diagramas con IA: Localiza variables, etiquetas y títulos de diagramas en múltiples idiomas objetivo con solo dos clics, manteniendo intactas las estructuras de sintaxis.
Compartibilidad e integración
Diseñado para flujos de trabajo colaborativos modernos, VPasCode ofrece exportaciones visuales flexibles, permitiendo a los usuarios descargar disposiciones instantáneamente como PNGs de alta resolución o gráficos vectoriales escalables (SVG). Su función de compartición de enlaces en vivo genera una URL web única y permanente para revisiones y presentaciones colaborativas instantáneas. Además, como almacena las disposiciones de diagramas como archivos de texto sin procesar, es compatible con Git, permitiendo el control de versiones directo dentro de los flujos estándar de CI/CD de las aplicaciones.
Conclusión
VPasCode representa un avance significativo en la forma en que los equipos técnicos visualizan sistemas complejos. Al unificar PlantUML, Mermaid.js y Graphviz en una única plataforma potenciada por IA, aborda los puntos críticos del diagramado tradicional: inconsistencia, falta de control de versiones y ciclos de iteración lentos. Para organizaciones comprometidas con las prácticas Ágiles y DevOps, VPasCode ofrece una forma simplificada, eficiente y colaborativa de mantener documentación dinámica que evoluciona junto con la base de código. Ya sea que estés depurando un error de sintaxis con ayuda de IA o traduciendo un diagrama para un accionista global, VPasCode garantiza que tu comunicación visual sea tan sólida y confiable como tu código.
Referencias
- Guía completa de VPasCode por Visual Paradigm: Una revisión detallada de las características, capacidades y casos de uso de VPasCode para ingenieros de software y arquitectos.
- Presentación de VPasCode: La plataforma definitiva de texto a diagrama unificada: El anuncio oficial de lanzamiento que detalla el soporte multi-motor para PlantUML, Mermaid.js y Graphviz.
- Claridad por diseño: Simplificación de la documentación de infraestructura con VPasCode y Graphviz: Una guía centrada en el uso de Graphviz dentro de VPasCode para documentar de forma clara la infraestructura y la topología de redes.
- Características de VPasCode: Un resumen de las características principales de VPasCode, incluyendo vista previa en tiempo real, capacidades de compartición y opciones de exportación.
- Dominando VPasCode: La guía definitiva para diagramas como código impulsados por IA con soporte multi-motor: Una tutorial completa sobre cómo aprovechar las funciones de IA y el soporte multi-motor en VPasCode para crear diagramas de forma eficiente.
- Rompe las barreras de idioma de forma nativa con la nueva traducción de diagramas con IA de VPasCode: Un artículo que explica la función de traducción con IA que permite a los usuarios localizar etiquetas y texto de diagramas en múltiples idiomas.
- VP Online: La plataforma basada en web donde se aloja VPasCode, ofreciendo herramientas de diagramación en la nube.
- Nunca vuelvas a quedarte atascado con la sintaxis de nuevo: Presentamos la corrección de errores de código con IA en VPasCode: Una nota de lanzamiento que detalla la capacidad de corrección de errores impulsada por IA que ayuda a los usuarios a resolver problemas de sintaxis en su código de diagramas.


