VPasCode es un espacio de trabajo basado en el navegador para crear y visualizar diagramas a partir de código basado en texto. Soporta lenguajes de diagramación como PlantUML, Mermaid, Graphviz y D2, y combina la edición de código, la renderización en tiempo real y herramientas asistidas por IA en un solo lugar. Escribes o generas un script de diagrama, y VPasCode lo renderiza como un diagrama visual.
1. Iniciar un diagrama
-
Abre VPasCode en tu navegador web.
-
Comienza con un editor en blanco o pega un script de diagrama existente.
-
Para PlantUML, incluye los habituales
@startumly@endumlmarcadores. VPasCode puede detectar la sintaxis de PlantUML y activar el renderizador correspondiente. -
Revisa el diagrama renderizado mientras trabajas.
2. Generar un diagrama con IA
Usa el asistente de IA para convertir una descripción en lenguaje natural en código de diagrama. Sé específico sobre los elementos y relaciones que deseas incluir.
Por ejemplo, podrías preguntar:
Crea un diagrama de secuencia para la autenticación de inicio de sesión de usuario, incluyendo el usuario, la aplicación web, el servicio de autenticación y la base de datos.
Revisa el código generado y su salida renderizada. Refina la instrucción si faltan participantes, pasos o relaciones importantes.
3. Refinar código existente
En lugar de empezar de nuevo, usa instrucciones en lenguaje natural para modificar un diagrama que ya tienes. Describe el cambio que deseas y dónde debe ir.
Por ejemplo:
Añade una verificación de pasarela de pago inmediatamente después del paso de envío del pedido.
Luego revisa el código y el diagrama actualizados para asegurarte de que el cambio se ajusta al flujo de trabajo previsto.
4. Corregir errores
Si el diagrama no se renderiza como se espera, usa la herramienta de Corrección de Errores de Código con IA para ayudar a diagnosticar y reparar problemas de sintaxis. Puede identificar errores como errores tipográficos, corchetes faltantes o tokens desalineados, realizar una corrección y explicar qué salió mal.
Después de aplicar una corrección, inspecciona tanto el código como el diagrama renderizado para confirmar que el resultado es correcto.
5. Traducir texto de diagrama
Usa la herramienta de Traducción de Diagramas con IA para traducir texto dentro de un diagrama, como etiquetas, propiedades de clase y descripciones de mensajes. Esto puede ayudar a preparar diagramas para equipos internacionales.
Revisa los términos traducidos en contexto, especialmente el vocabulario técnico y los nombres que deben permanecer sin cambios.
6. Aplicar un tema
Elige un tema en el editor para ajustar el estilo visual del diagrama. Las opciones disponibles incluyen el tema Clásico de Visual Paradigm y alternativas clásicas. La configuración del tema puede aplicar los parámetros de estilo adecuados por ti.
Revisa el resultado en cuanto a legibilidad y coherencia antes de exportar.
7. Exportar y compartir
Elige un formato de exportación que se adapte a cómo se utilizará el diagrama:
| Formato | Útil para |
|---|---|
| SVG | Documentación web escalable y wikis técnicas |
| PNG | Aplicaciones de chat, rastreadores de errores y presentaciones |
| Documentos formales e impresión |
Para compartir un diagrama, utiliza una URL directa o un código QR generado por la plataforma.
Un flujo de trabajo práctico
-
Describe el sistema, proceso o arquitectura que deseas modelar.
-
Genera el código inicial del diagrama con IA, o pega un script existente.
-
Revisa el renderizado en vivo y refina el diagrama con instrucciones específicas.
-
Utiliza la corrección de errores si los problemas de sintaxis impiden el renderizado.
-
Traduce las etiquetas o aplica un tema si es necesario.
-
Exporta en el formato que se ajuste a tu documentación o presentación.
-
Comparte el diagrama utilizando su URL o código QR.
