de_DEen_USes_ESfa_IRfr_FRid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

VPasCode: Una guía completa

VPasCode es un editor basado en navegador para crear diagramas y visualizar texto estructurado. Escribes o generas código en un formato compatible, ves el resultado en una vista previa en vivo y luego compartes o exportas el diagrama. Reúne varios motores de texto a diagrama y formatos de código o datos en un solo espacio de trabajo.

VPasCode: Primeros pasos

Guía de inicio de VPasCode que muestra cinco pasos: abrir el editor, elegir formato, ingresar código, revisar la vista previa y compartir o exportar diagramas.

  1. Abre el editor de VPasCode.

  2. Elige un formato o comienza con uno de los ejemplos integrados.

  3. Escribe o pega tu código de diagrama en el editor.

  4. Revisa la vista previa renderizada en vivo y ajusta el código según sea necesario.

  5. Comparte el diagrama con un enlace o expórtalo para usarlo en otro lugar.

El editor se describe como gratuito y basado en navegador, por lo que puedes trabajar sin instalar una aplicación de diagramación de escritorio.

VPasCode: Formatos y tipos de diagramas compatibles

VPasCode admite múltiples lenguajes de diagramación, formatos de datos y lenguajes de programación.

Infografía de VPasCode que muestra los tipos y formatos de diagramas admitidos, incluidos PlantUML, Mermaid, Graphviz, D2, esquemas de datos y lenguajes de programación.

  • PlantUML: Diagramas de ArchiMate, modelos C4, secuencia, caso de uso, clase, objeto, actividad, componente, despliegue, estado y temporización; DERs, DERs de Chen, diseños de red y estructuras de desglose de trabajo.

  • Mermaid: Diagramas de flujo, diagramas de clase y secuencia, DERs, diagramas de estado, mapas mentales, modelos C4, gráficos de Gantt, diagramas de cuadrante y requisitos, líneas de tiempo, recorridos de usuario, gráficos de Git y tableros Kanban.

  • Graphviz: Grafos dirigidos y estándar, diagramas de flujo, organigramas, diagramas de clúster y diagramas de flujo de datos.

  • D2: Formas básicas, contenedores, diagramas de secuencia, diagramas con estilo y diagramas de red.

  • Datos y esquemas: SQL, DBML, JSON, JSON Schema, JSONC, JSON5, JSONL/NDJSON, TOON, YAML, XML, CSV y TOML.

  • Código: Java, TypeScript, Go, Rust, C#, Python, C, C++, PHP, Ruby, Scala, Zig, Kotlin, Swift y Elixir.

El artículo señala que se pueden agregar formatos adicionales en futuras actualizaciones.

VPasCode: Creación de un diagrama

Puedes comenzar de una de dos maneras:

  • Escribe el código tú mismo: Elige un formato compatible e ingresa su sintaxis en el editor.

  • Comienza con un ejemplo: Explora los ejemplos integrados para aprender un formato o adaptar una plantilla para tu propio diagrama.

Mientras editas, VPasCode genera una vista previa en tiempo real. Esto te permite detectar problemas de diseño o sintaxis mientras trabajas, en lugar de esperar hasta un paso de exportación separado.

VPasCode: Uso de herramientas de IA

Las funciones de IA de VPasCode pueden ayudar a crear y refinar el código de diagramas:

Infografía de las herramientas de IA de VPasCode que muestra cuatro funciones: generar diagramas a partir de texto, modificar diagramas existentes, corregir errores de código y traducir etiquetas.

  • Generar un diagrama: Describe un sistema o proceso en inglés sencillo, y la IA genera el código para el formato seleccionado.

  • Modificar un diagrama: Da instrucciones para ampliar, simplificar o ajustar de otra manera un diagrama existente.

  • Corregir errores de código: Usa la asistencia de IA para detectar y corregir problemas de sintaxis en el diagrama.

  • Traducir etiquetas: Solicita a la función de traducción que convierta las etiquetas de texto de un diagrama a otro idioma.

Estas herramientas están diseñadas para reducir el trabajo manual de sintaxis. Revisa el código generado o modificado y previsualiza el resultado antes de compartirlo.

VPasCode: Temas de PlantUML

Para diagramas de PlantUML, el editor ofrece una interfaz de selección de temas. Elige un tema de la lista disponible para aplicar su sintaxis y previsualizar el aspecto actualizado. El artículo también describe temas personalizados de Visual Paradigm y Rose: el primero utiliza encabezados azules, mientras que el segundo se inspira en el clásico aspecto amarillo claro de IBM Rational Rose.

VPasCode: Compartir y exportar

Cuando tu diagrama esté listo, puedes:

  • Crear un enlace web compartible.

  • Exportarlo como un PDF vectorial.

  • Exportarlo como una imagen vectorial SVG.

  • Exportarlo como un PNG de alta resolución.

Los formatos vectoriales como SVG y PDF son útiles cuando deseas escalar un diagrama sin perder claridad; PNG es conveniente para documentos y presentaciones comunes.

VPasCode: Conectar un proveedor de IA

Diagrama que muestra cómo VPasCode conecta la infraestructura de IA de una organización con proveedores como OpenAI y Anthropic utilizando credenciales de API existentes.

Las organizaciones pueden conectar su propia infraestructura de IA y utilizar sus credenciales de API existentes. El artículo enumera OpenAI, Anthropic, Google, DeepSeek, Mistral, Qwen y Groq, entre otros. Esta opción está diseñada para proporcionar control sobre el entorno de IA, las credenciales y los acuerdos de gasto; configúralo según los requisitos de tu organización.

VPasCode: Un flujo de trabajo práctico

Diagrama de flujo de trabajo de VPasCode en siete pasos que muestra la selección de formato, generación con IA, edición de código, vista previa, temas y opciones de exportación.

  1. Selecciona el formato de diagrama que se adapte a tu caso de uso.

  2. Comienza con un ejemplo integrado o describe el diagrama al generador de IA.

  3. Inspecciona y edita el código resultante.

  4. Usa la vista previa en tiempo real para verificar la legibilidad y la corrección.

  5. Aplica un tema si estás trabajando en PlantUML.

  6. Usa la modificación, corrección de errores o traducción con IA si resulta útil.

  7. Comparte un enlace o exporta el diagrama finalizado.

VPasCode es más útil cuando prefieres la edición de diagramas basada en texto, necesitas trabajar en varios formatos de diagramas o quieres una forma rápida de generar y revisar diagramas sin organizar manualmente cada forma.