{"id":1950,"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-2\/"},"modified":"2026-06-20T02:33:55","modified_gmt":"2026-06-20T02:33:55","slug":"your-first-diagram-in-vpascode-a-5-minute-quickstart-2","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/es\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/","title":{"rendered":"Su primer diagrama en VPasCode \u2013 Una gu\u00eda r\u00e1pida de 5 minutos"},"content":{"rendered":"
\n
\n

VPasCode es una herramienta intuitivade diagramas como c\u00f3digo<\/a>y unificadatexto a diagrama<\/a>plataforma que le permite crear diagramas utilizando formatos populares como PlantUML, Mermaid y Graphviz.<\/p>\n<\/header>\n

\n

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

VPasCode (la plataforma de diagramas como c\u00f3digo de Visual Paradigm) es una plataforma unificada de texto a diagrama que le permite crear diagramas utilizando formatos populares como PlantUML, Mermaid y Graphviz. Ya sea que est\u00e9 documentando arquitectura de software, planeando proyectos o visualizando flujos de datos, VPasCode ofrece un editor de c\u00f3digo gratuito y un renderizador de diagramas instant\u00e1neo para dar vida a sus ideas.<\/p>\n

Lo mejor es que puede comenzar a crear diagramas de inmediato enwww.vpascode.com<\/a>\u2013 no se requiere registro para las funciones b\u00e1sicas.<\/p>\n<\/section>\n

\n

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

Navegue hastawww.vpascode.com<\/a>en su navegador web. Ver\u00e1 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 de inmediato con un diagrama de ejemplo para ayudarle a entender la sintaxis.
\n<\/p>\n

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

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

\n

Paso 1: Escriba el c\u00f3digo de su diagrama de flujo<\/h2>\n

VPasCode funciona como una herramienta vers\u00e1til de diagramas como c\u00f3digo que admite m\u00faltiples formatos. Para esta gu\u00eda r\u00e1pida de texto a diagrama, usaremos Mermaid, una de las opciones m\u00e1s populares para diagramas de flujo.<\/p>\n

Limpie el c\u00f3digo de ejemplo y pegue este sencillo ejemplo de diagrama de flujo:<\/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\r\n    A[Inicio] --> B{\u00bfFunciona?\r\n    B -->|S\u00ed| C[\u00a1Genial!]\r\n    B -->|No| D[Depurar]\r\n    D --> B\r\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            \n<\/p><\/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