Poniéndose en marcha con Visual Paradigm VPasCode tarda menos de un minuto. Dado que la plataforma es completamente nativa en la nube, no necesita instalar entornos de ejecución de Java, configurar módulos de Node.js ni descargar dependencias pesadas de extensiones de IDE. Puede pasar de una sintaxis de texto sin procesar a un diagrama visual de alta fidelidad en solo tres sencillos pasos.
Siga esta breve guía para crear, personalizar y compartir su primer activo de Diagrama como Código (DaC).
Paso 1: Abra el editor en vivo
Navegue hasta el sitio gratuito de VPasCode Playground. Por defecto, se le presentará una interfaz moderna de dos paneles:
- El panel izquierdo (editor de código): Un editor de texto ligero y de alto rendimiento equipado con resaltado automático de sintaxis, números de línea y detección activa de errores.
- El panel derecho (ventana de vista previa en vivo): Un renderizador de diagramas en tiempo real que actualiza automáticamente su disposición visual mientras escribe o modifica su representación de texto.
Paso 2: Elija su motor y pegue un plano
VPasCode reconoce automáticamente su sintaxis. Para verlo en acción, borre cualquier texto de marcador de posición en el panel izquierdo y copie y pegue uno de los siguientes ejemplos base en el editor:
Opción A: Diagrama de flujo en Markdown (sintaxis Mermaid)
Si prefiere un diseño de diagrama de flujo ágil y de arriba hacia abajo, use este bloque sencillo:
graph TD
A[Solicitud del cliente] --> B{Pasarela de API}
B --> |Token válido| C[Servicio de autenticación]
B --> |Token inválido| D[Acceso denegado]
C --> E[(Base de datos de usuarios)]
Opción B: Componente de arquitectura de software (sintaxis PlantUML)
Si desea representar componentes estructurados del sistema con marcos de límites formales, use este bloque:
@startuml
paquete "Nivel de aplicación" {
[Aplicación web] -derecha-> [Pasarela de API]
}
base de datos "Almacenamiento de datos" {
[Pasarela de API] --> [SQL principal]
[Pasarela de API] ..> [Caché Redis] : "Optimización de lectura"
}
@enduml
En el momento en que pegue el código, el panel derecho compilará inmediatamente su texto y mostrará su diagrama visual limpio y perfectamente alineado.
Paso 3: Exportar y compartir su trabajo
Una vez que esté satisfecho con su diseño, puede exportar o compartir inmediatamente su documento utilizando la barra de controles de espacio de trabajo ubicada en la parte superior de la interfaz:
- Copiar URL compartible: Haz clic en el Compartir botón para generar un enlace instantáneo. VPasCode utiliza serialización de estado sin base de datos, lo que significa que todo el texto de tu diagrama se comprime de forma segura directamente en el hash de la URL. Cualquiera que haga clic en tu enlace podrá ver y editar el modelo de código exacto de inmediato.
- Descargar vector de alta resolución (SVG): Haz clic en el Exportar SVG botón para descargar un activo vectorial escalable. Esto es perfecto para incrustaciones limpias dentro de repositorios Git, wikis de equipo o archivos de documentación interna de ingeniería en markdown.
- Descargar imagen estática (PNG): Haz clic en Exportar PNG para obtener una instantánea de alta resolución lista para insertarse directamente en Slack, Microsoft Teams o presentaciones de diseño.
Ahora que has generado tu primer activo, explora las siguientes secciones de nuestra documentación para dominar los métodos individuales de diseño de Guía de PlantUML, Guía de Mermaid, y Guía de Graphviz métodos de diseño!