{"id":2298,"date":"2026-06-20T02:33:55","date_gmt":"2026-06-20T02:33:55","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/your-first-diagram-in-vpascode-a-5-minute-quickstart\/"},"modified":"2026-06-20T02:33:55","modified_gmt":"2026-06-20T02:33:55","slug":"your-first-diagram-in-vpascode-a-5-minute-quickstart","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/es\/your-first-diagram-in-vpascode-a-5-minute-quickstart\/","title":{"rendered":"Tu primer diagrama en VPasCode: una gu\u00eda r\u00e1pida de 5 minutos"},"content":{"rendered":"
\n

VPasCode es una herramienta intuitiva de diagramas como c\u00f3digo y una plataforma unificadade texto a diagrama<\/a>plataforma que te permite crear diagramas utilizando formatos populares como PlantUML, Mermaid y Graphviz. Con capacidades de IA nativas integradas, ahora puedes generar visuales al instante a partir de lenguaje natural.<\/p>\n<\/header>\n

\n

\u00bfQu\u00e9 es VPasCode?<\/h2>\n

VPasCode (plataforma de diagramas como c\u00f3digo de Visual Paradigm) es una plataforma unificada de texto a diagrama que te permite crear diagramas utilizando formatos populares como PlantUML, Mermaid y Graphviz. Ya sea que est\u00e9s documentando la arquitectura de software, planificando proyectos o visualizando flujos de datos, VPasCode ofrece un editor de c\u00f3digo gratuito, un renderizador en tiempo real e IA integrada para dar vida a tus ideas.<\/p>\n

\u00bfLo mejor? Puedes empezar a crear diagramas inmediatamente enwww.vpascode.com<\/a> \u2013 no se requiere registro para las funciones b\u00e1sicas. Para una visi\u00f3n completa de las \u00faltimas funciones de IA nativa, consulta nuestroAnuncio de la gran actualizaci\u00f3n de VPasCode<\/a>.<\/p>\n<\/section>\n

\n

Paso 1: Acceder a VPasCode<\/h2>\n

Navega awww.vpascode.com<\/a>en tu navegador web. Ver\u00e1s una interfaz limpia con un editor de c\u00f3digo a la izquierda y un panel de vista previa en vivo a la derecha. La plataforma se carga al instante con un diagrama de ejemplo para ayudarte a entender la sintaxis.
\n<\/p>\n

\"VPasCode
Interfaz intuitiva de VPasCode con edici\u00f3n de c\u00f3digo lado a lado y vista previa en tiempo real<\/figcaption><\/figure>\n

Indicador de imagen:<\/strong>Captura de pantalla de la interfaz web de VPasCode que muestra un dise\u00f1o de pantalla dividida con el editor de c\u00f3digo a la izquierda mostrando sintaxis de Mermaid y el diagrama de flujo renderizado a la derecha, interfaz moderna y limpia con barra de herramientas en la parte superior<\/p>\n<\/section>\n

\n

Paso 2: Crea tu diagrama (mediante indicaci\u00f3n de IA o c\u00f3digo)<\/h2>\n

VPasCode act\u00faa como una herramienta vers\u00e1til de diagramas como c\u00f3digo que admite m\u00faltiples formatos. Tienes dos formas principales de crear tus diagramas: escribir el c\u00f3digo manualmente o generarlo al instante utilizando la IA integrada.<\/p>\n

Opci\u00f3n A: Generar al instante con IA nativa<\/h3>\n

En lugar de empezar desde cero, puedes escribir un indicaci\u00f3n en lenguaje natural directamente en la interfaz de la aplicaci\u00f3n. Por ejemplo, intenta ingresar:<\/p>\n

“Generar un diagrama de casos de uso en PlantUML para un sistema de cajero autom\u00e1tico”<\/p><\/blockquote>\n

VPasCode crear\u00e1 el diagrama nativamente para ti al instante en segundos. Para ver este flujo de trabajo en acci\u00f3n, mira nuestro video de demostraci\u00f3n:Crea y edita diagramas r\u00e1pidamente con IA en YouTube<\/a>.<\/p>\n

Opci\u00f3n B: Escribe el c\u00f3digo del diagrama de flujo manualmente<\/h3>\n

Alternativamente, puedes escribir o pegar el c\u00f3digo manualmente. Limpia el editor y utiliza este sencillo ejemplo de diagrama de flujo Mermaid:<\/p>\n

\n
\nMermaid<\/span>\n\n<\/path><\/path><\/svg>\nEditar Mermaid en VPasCode<\/span>\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
graph TD\n    A[Inicio] --> B{\u00bfFunciona?}\n    B -->|S\u00ed| C[\u00a1Genial!]\n    B -->|No| D[Depurar]\n    D --> B\n    C --> E[Fin]<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nEditar Mermaid en VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
Esta sintaxis de Mermaid crea un diagrama de flujo de decisi\u00f3n b\u00e1sico. Esto es lo que significa:<\/p>\n