{"id":2292,"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\/"},"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\/pt\/your-first-diagram-in-vpascode-a-5-minute-quickstart\/","title":{"rendered":"Seu Primeiro Diagrama no VPasCode \u2013 Um R\u00e1pido In\u00edcio em 5 Minutos"},"content":{"rendered":"
\n

O VPasCode \u00e9 uma ferramenta intuitiva de diagramas como c\u00f3digo e uma plataforma unificada texto para diagrama<\/a> plataforma que permite criar diagramas usando formatos populares como PlantUML, Mermaid e Graphviz. Com capacidades de IA nativa integradas, voc\u00ea agora pode gerar visuais instantaneamente a partir de linguagem natural.<\/p>\n<\/header>\n

\n

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

O VPasCode (plataforma de diagramas como c\u00f3digo da Visual Paradigm) \u00e9 uma plataforma unificada de texto para diagrama que permite criar diagramas usando formatos populares como PlantUML, Mermaid e Graphviz. Seja documentando arquitetura de software, planejando projetos ou visualizando fluxos de dados, o VPasCode oferece um editor de c\u00f3digo gratuito, renderizador em tempo real e IA integrada para dar vida \u00e0s suas ideias.<\/p>\n

A melhor parte? Voc\u00ea pode come\u00e7ar a criar diagramas imediatamente em www.vpascode.com<\/a> \u2013 sem necessidade de registro para recursos b\u00e1sicos. Para uma vis\u00e3o completa dos mais recentes recursos de IA nativa, confira nosso An\u00fancio de Atualiza\u00e7\u00e3o Principal do VPasCode<\/a>.<\/p>\n<\/section>\n

\n

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

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

\"VPasCode
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 dividido com editor de c\u00f3digo \u00e0 esquerda exibindo sintaxe Mermaid e fluxograma renderizado \u00e0 direita, interface limpa e moderna com barra de ferramentas no topo<\/p>\n<\/section>\n

\n

Passo 2: Crie seu Diagrama (via Prompt de IA ou C\u00f3digo)<\/h2>\n

O VPasCode atua como uma ferramenta vers\u00e1til de diagramas como c\u00f3digo, suportando m\u00faltiplos formatos. Voc\u00ea tem duas maneiras principais de criar seus diagramas: escrever c\u00f3digo manualmente ou ger\u00e1-los instantaneamente usando IA integrada.<\/p>\n

Op\u00e7\u00e3o A: Gerar Instantaneamente com IA Nativa<\/h3>\n

Em vez de come\u00e7ar do zero, voc\u00ea pode digitar um prompt em linguagem natural diretamente na interface do aplicativo. Por exemplo, tente inserir:<\/p>\n

\u201cGerar um diagrama de casos de uso em PlantUML para um sistema de caixa eletr\u00f4nico\u201d<\/p><\/blockquote>\n

O VPasCode criar\u00e1 o diagrama nativamente para voc\u00ea instantaneamente em segundos. Para ver esse fluxo de trabalho em a\u00e7\u00e3o, assista ao nosso v\u00eddeo de demonstra\u00e7\u00e3o: Crie e Edite Diagramas R\u00e1pidamente com IA no YouTube<\/a>.<\/p>\n

Op\u00e7\u00e3o B: Escreva C\u00f3digo de Fluxograma Manualmente<\/h3>\n

Alternativamente, voc\u00ea pode escrever ou colar c\u00f3digo manualmente. Limpe o editor e use este exemplo simples de fluxograma Mermaid:<\/p>\n

\n
\nMermaid<\/span>\n\n<\/path><\/path><\/svg>\nEdite 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\n    A[In\u00edcio] --> B{Est\u00e1 funcionando?}\n    B -->|Sim| C[\u00d3timo!]\n    B -->|N\u00e3o| D[Depurar]\n    D --> B\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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nEdite 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