{"id":1948,"date":"2026-06-20T02:33:55","date_gmt":"2026-06-20T02:33:55","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/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\/pt\/your-first-diagram-in-vpascode-a-5-minute-quickstart-2\/","title":{"rendered":"Seu Primeiro Diagrama no VPasCode \u2013 Um In\u00edcio R\u00e1pido de 5 Minutos"},"content":{"rendered":"
\n
\n

O VPasCode \u00e9 uma ferramenta intuitiva de diagrama como c\u00f3digo<\/a> e unificada texto para diagrama<\/a>plataforma que permite criar diagramas usando formatos populares como PlantUML, Mermaid e Graphviz.<\/p>\n<\/header>\n

\n

O que \u00e9 o VPasCode?<\/h2>\n

O VPasCode (plataforma de diagrama como c\u00f3digo do Visual Paradigm) \u00e9 uma plataforma unificada de texto para diagrama que permite criar diagramas usando formatos populares como PlantUML, Mermaid e Graphviz. Seja para documentar arquitetura de software, planejar projetos ou visualizar fluxos de dados, o VPasCode oferece um editor de c\u00f3digo gratuito e um renderizador de diagrama instant\u00e2neo para transformar suas ideias em realidade.<\/p>\n

A melhor parte? Voc\u00ea pode come\u00e7ar a criar diagramas imediatamente em www.vpascode.com<\/a> \u2013 sem necessidade de cadastro para os recursos b\u00e1sicos.<\/p>\n<\/section>\n

\n

Passo 1: Acesse o VPasCode<\/h2>\n

Navegue at\u00e9 www.vpascode.com<\/a> no seu navegador da web. Voc\u00ea ver\u00e1 uma interface limpa com um editor de c\u00f3digo \u00e0 esquerda e um painel de visualiza\u00e7\u00e3o em tempo real \u00e0 direita. A plataforma carrega instantaneamente com um diagrama de exemplo para ajud\u00e1-lo a entender a sintaxe.
\n<\/p>\n

\"VPasCode
A interface intuitiva do VPasCode com edi\u00e7\u00e3o de c\u00f3digo lado a lado e visualiza\u00e7\u00e3o em tempo real<\/figcaption><\/figure>\n

Prompt da Imagem:<\/strong> Captura de tela da interface web do VPasCode mostrando layout de tela dividida com editor de c\u00f3digo \u00e0 esquerda exibindo a sintaxe Mermaid e fluxograma renderizado \u00e0 direita, interface moderna limpa com barra de ferramentas no topo<\/p>\n<\/section>\n

\n

Passo 1: Escreva o c\u00f3digo do seu fluxograma<\/h2>\n

O VPasCode atua como uma ferramenta vers\u00e1til de diagrama como c\u00f3digo, suportando m\u00faltiplos formatos. Para este in\u00edcio r\u00e1pido de texto para diagrama, usaremos o Mermaid, uma das escolhas mais populares para fluxogramas.<\/p>\n

Limpe o c\u00f3digo de exemplo e cole este exemplo simples de fluxograma:<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o Mermaid no 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[In\u00edcio] --> B{Est\u00e1 funcionando?}\r\n    B -->|Sim| C[\u00d3timo!]\r\n    B -->|N\u00e3o| D[Depurar]\r\n    D --> B\r\n    C --> E[Fim]<\/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>
\nEdite o Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Esta sintaxe Mermaid cria um fluxograma de decis\u00e3o b\u00e1sico. Veja o que significa:<\/p>\n