O VPasCode é um ambiente de trabalho baseado no navegador para criar e visualizar diagramas a partir de código baseado em texto. Ele suporta linguagens de diagramação, incluindo PlantUML, Mermaid, Graphviz e D2, e combina edição de código, renderização em tempo real e ferramentas assistidas por IA em um único local. Você escreve ou gera um script de diagrama, e o VPasCode o renderiza como um diagrama visual.
1. Iniciar um diagrama
-
Abra o VPasCode no seu navegador web.
-
Comece com um editor em branco ou cole um script de diagrama existente.
-
Para PlantUML, inclua os marcadores usuais
@startumle@endumlmarcadores. O VPasCode pode detectar a sintaxe do PlantUML e ativar o renderizador correspondente. -
Verifique o diagrama renderizado conforme você trabalha.
2. Gerar um diagrama com IA
Use o assistente de IA para transformar uma descrição em linguagem natural em código de diagrama. Seja específico sobre os elementos e relacionamentos que deseja incluir.
Por exemplo, você pode perguntar:
Crie um diagrama de sequência para autenticação de login de usuário, incluindo o usuário, o aplicativo web, o serviço de autenticação e o banco de dados.
Revise o código gerado e sua saída renderizada. Refine o prompt se participantes, etapas ou relacionamentos importantes estiverem ausentes.
3. Refinar código existente
Em vez de começar do zero, use instruções em linguagem natural para modificar um diagrama que você já possui. Descreva a alteração desejada e onde ela deve ser aplicada.
Por exemplo:
Adicione uma verificação de gateway de pagamento imediatamente após a etapa de envio do pedido.
Em seguida, revise o código atualizado e o diagrama para garantir que a alteração se encaixe no fluxo de trabalho pretendido.
4. Corrigir erros
Se o diagrama não for renderizado como esperado, use a ferramenta de Correção de Erros de Código com IA para ajudar a diagnosticar e reparar problemas de sintaxe. Ela pode identificar problemas como erros de digitação, colchetes ausentes ou tokens desalinhados, fazer uma correção e explicar o que deu errado.
Após aplicar uma correção, inspecione tanto o código quanto o diagrama renderizado para confirmar que o resultado está correto.
5. Traduzir texto do diagrama
Use a ferramenta de Tradução de Diagramas com IA para traduzir texto dentro de um diagrama, como rótulos, propriedades de classe e descrições de mensagens. Isso pode ajudar a preparar diagramas para equipes internacionais.
Revise os termos traduzidos no contexto, especialmente o vocabulário técnico e nomes que devem permanecer inalterados.
6. Aplicar um tema
Escolha um tema no editor para ajustar o estilo visual do diagrama. As opções disponíveis incluem o tema Clássico da Visual Paradigm e alternativas clássicas. As configurações do tema podem aplicar os parâmetros de skin apropriados para você.
Verifique o resultado quanto à legibilidade e consistência antes de exportar.
7. Exportar e compartilhar
Escolha um formato de exportação que se adeque à forma como o diagrama será usado:
| Formato | Útil para |
|---|---|
| SVG | Documentação web escalável e wikis técnicas |
| PNG | Aplicativos de chat, rastreadores de bugs e apresentações |
| Documentos formais e impressão |
Para compartilhar um diagrama, use uma URL direta ou um código QR gerado pela plataforma.
Um fluxo de trabalho prático
-
Descreva o sistema, processo ou arquitetura que deseja modelar.
-
Gere o código inicial do diagrama com IA ou cole um script existente.
-
Revise a renderização em tempo real e refine o diagrama com instruções direcionadas.
-
Use a correção de erros se problemas de sintaxe impedirem a renderização.
-
Traduza os rótulos ou aplique um tema, se necessário.
-
Exporte no formato que se adequa à sua documentação ou apresentação.
-
Compartilhe o diagrama usando sua URL ou código QR.
