![\"From](\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png\")
<\/p>\nEste guia foi elaborado para gui\u00e1-lo por todo o fluxo de trabalho de cria\u00e7\u00e3o de diagramas profissionais usando a sintaxe Mermaid no VPasCode e public\u00e1-los de forma cont\u00ednua na sua base de conhecimento no OpenDocs. Abordaremos todo o pipeline, desde a configura\u00e7\u00e3o at\u00e9 a publica\u00e7\u00e3o, com exemplos pr\u00e1ticos e prontos para uso.<\/p>\n
<\/p>\n
A documenta\u00e7\u00e3o no desenvolvimento de software frequentemente fica para tr\u00e1s em rela\u00e7\u00e3o ao c\u00f3digo. Engenheiros gastam horas criando arquiteturas de sistemas complexas, enquanto redatores t\u00e9cnicos lutam para manter as visualiza\u00e7\u00f5es atualizadas em documentos est\u00e1ticos. O resultado? Diagramas desatualizados, links quebrados e uma base de conhecimento que n\u00e3o reflete a realidade.<\/p>\n
O VPasCode e o OpenDocs resolvem esse problema. O VPasCode permite que voc\u00ea crie diagramas profissionais usando uma sintaxe de texto simples (como o Mermaid), enquanto o OpenDocs atua como uma plataforma de gest\u00e3o de conhecimento com intelig\u00eancia artificial. A m\u00e1gica acontece quando voc\u00ea os conecta: com a integra\u00e7\u00e3o do Pipeline do VPasCode ao OpenDocs, voc\u00ea pode enviar diagramas diretamente do seu editor de c\u00f3digo para sua documenta\u00e7\u00e3o com um \u00fanico clique. Acabou a necessidade de exportar, baixar ou reenviar arquivos.<\/p>\n
Antes de come\u00e7ar a criar diagramas, certifique-se de ter acesso \u00e0s ferramentas necess\u00e1rias:<\/p>\n
VPasCode<\/strong>: Uma plataforma interativa e baseada em navegador para Diagramas como C\u00f3digo (DaC), com editor integrado. Suporta Mermaid.js, PlantUML e Graphviz em uma interface unificada.<\/p>\n<\/li>\n OpenDocs<\/strong>: Uma plataforma de gest\u00e3o de conhecimento baseada na web especialmente projetada para ser \u201cconsciente de diagramas\u201d.<\/p>\n<\/li>\n Conta Visual Paradigm<\/strong>: Embora as vers\u00f5es gratuitas ofere\u00e7am visualiza\u00e7\u00e3o em tempo real e exporta\u00e7\u00e3o, as vers\u00f5es pagas desbloqueiam recursos avan\u00e7ados de IA, como corre\u00e7\u00e3o de erros e tradu\u00e7\u00e3o.<\/p>\n<\/li>\n<\/ul>\n O VPasCode apresenta uma interface responsiva em duas colunas que equilibra a reda\u00e7\u00e3o de c\u00f3digo com feedback visual imediato:<\/p>\n Painel Esquerdo: Editor de C\u00f3digo<\/strong>\u00a0\u2013 Cont\u00e9m realce de sintaxe, seletor de motor e contagem de erros em tempo real.<\/p>\n<\/li>\n Painel Direito: Visualiza\u00e7\u00e3o em Tempo Real<\/strong>\u00a0\u2013 Renderiza instantaneamente seu diagrama enquanto digita.<\/p>\n<\/li>\n Barra de Status<\/strong>: Mostra valida\u00e7\u00e3o de sintaxe em tempo real e contagem de erros.<\/p>\n<\/li>\n<\/ul>\n A integra\u00e7\u00e3o \u00e9 embutida, portanto n\u00e3o s\u00e3o necess\u00e1rias chaves de API complexas. Basta fazer login em ambas as plataformas com as mesmas credenciais do Visual Paradigm. Quando estiver pronto para compartilhar um diagrama, o bot\u00e3o\u201cEnviar para o Pipeline do OpenDocs\u201d<\/strong> no VPasCode encaminha com seguran\u00e7a sua visualiza\u00e7\u00e3o para o seu espa\u00e7o de trabalho no OpenDocs.<\/p>\n O Pipeline atua como o reposit\u00f3rio central seguro e baseado em nuvem para todos os seus ativos visuais. Ele rastreia as vers\u00f5es dos ativos, mant\u00e9m o hist\u00f3rico de revis\u00f5es e registra coment\u00e1rios dos usu\u00e1rios \u2014 tudo isso sem exigir salvamento manual de arquivos.<\/p>\n Vamos explorar como criar diagramas do mundo real usando a sintaxe Mermaid no VPasCode.<\/p>\n Este exemplo mostra um processo de login b\u00e1sico usando um fluxograma. Os fluxogramas s\u00e3o ideais para documentar l\u00f3gica de neg\u00f3cios, jornadas do usu\u00e1rio e fluxos de processos.<\/p>\nCompreendendo a Interface do VPasCode<\/h3>\n
\n
Conectando o Pipeline<\/h3>\n
Exemplos Pr\u00e1ticos de Mermaid<\/h2>\n
Exemplo 1: Fluxograma de Autentica\u00e7\u00e3o de Usu\u00e1rio<\/h3>\n
![\"\"](\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74e4c839d.png\")
<\/p>\n\n\nMermaid<\/span>
\n
\n