O VPasCode é um editor baseado em navegador para criar diagramas e visualizar texto estruturado. Você escreve ou gera código em um formato suportado, vê o resultado em uma prévia ao vivo e, em seguida, compartilha ou exporta o diagrama. Ele reúne vários motores de texto para diagramas e formatos de código ou dados em um único espaço de trabalho.
VPasCode: Iniciando
-
Abra o editor VPasCode.
-
Escolha um formato ou comece com um dos exemplos integrados.
-
Insira ou cole seu código de diagrama no editor.
-
Revise a prévia renderizada ao vivo e ajuste o código conforme necessário.
-
Compartilhe o diagrama com um link ou exporte-o para uso em outro lugar.
O editor é descrito como gratuito e baseado em navegador, permitindo que você trabalhe sem instalar um aplicativo de diagramação para desktop.
VPasCode: Formatos e tipos de diagrama suportados
O VPasCode suporta múltiplas linguagens de diagramação, formatos de dados e linguagens de programação.
-
PlantUML: Diagramas ArchiMate, modelos C4, sequência, caso de uso, classe, objeto, atividade, componente, implantação, estado e temporização; DERs, DERs de Chen, layouts de rede e estruturas de decomposição de trabalho.
-
Mermaid: Fluxogramas, diagramas de classe e sequência, DERs, diagramas de estado, mapas mentais, modelos C4, gráficos de Gantt, diagramas de quadrante e requisitos, linhas do tempo, jornadas do usuário, gráficos Git e quadros Kanban.
-
Graphviz: Grafos direcionados e padrão, fluxogramas, organogramas, diagramas de cluster e diagramas de fluxo de dados.
-
D2: Formas básicas, contêineres, diagramas de sequência, diagramas estilizados e diagramas de rede.
-
Dados e esquemas: SQL, DBML, JSON, JSON Schema, JSONC, JSON5, JSONL/NDJSON, TOON, YAML, XML, CSV e TOML.
-
Código: Java, TypeScript, Go, Rust, C#, Python, C, C++, PHP, Ruby, Scala, Zig, Kotlin, Swift e Elixir.
O artigo observa que formatos adicionais podem ser adicionados em atualizações futuras.
VPasCode: Criando um diagrama
Você pode começar de uma das duas maneiras:
-
Escreva o código você mesmo: Escolha um formato suportado e insira sua sintaxe no editor.
-
Comece com um exemplo: Navegue pelos exemplos integrados para aprender um formato ou adaptar um modelo para o seu próprio diagrama.
À medida que você edita, o VPasCode gera uma visualização em tempo real. Isso permite que você identifique problemas de layout ou sintaxe enquanto trabalha, em vez de esperar até uma etapa de exportação separada.
VPasCode: Usando ferramentas de IA
Os recursos de IA do VPasCode podem ajudar a criar e refinar o código de diagramas:
-
Gerar um diagrama:Descreva um sistema ou processo em inglês simples, e a IA gera o código para o formato selecionado.
-
Modificar um diagrama:Dê instruções para expandir, simplificar ou ajustar de outra forma um diagrama existente.
-
Corrigir erros de código:Use a assistência da IA para detectar e corrigir problemas de sintaxe do diagrama.
-
Traduzir rótulos:Solicite à função de tradução que converta os rótulos de texto de um diagrama para outro idioma.
Essas ferramentas têm como objetivo reduzir o trabalho manual de sintaxe. Revise o código gerado ou modificado e visualize o resultado antes de compartilhá-lo.
VPasCode: Temas PlantUML
Para diagramas PlantUML, o editor oferece uma interface de seleção de temas. Escolha um tema da lista disponível para aplicar sua sintaxe e visualizar a aparência atualizada. O artigo também descreve temas personalizados do Visual Paradigm e do Rose: o primeiro usa cabeçalhos azuis, enquanto o segundo se inspira no visual clássico amarelo-claro do IBM Rational Rose.
VPasCode: Compartilhamento e exportação
Quando seu diagrama estiver pronto, você pode:
-
Criar um link web compartilhável.
-
Exportá-lo como um PDF vetorial.
-
Exportá-lo como uma imagem vetorial SVG.
-
Exportá-lo como um PNG de alta resolução.
Formatos vetoriais, como SVG e PDF, são úteis quando você deseja dimensionar um diagrama sem perder a clareza; o PNG é conveniente para documentos e apresentações comuns.
VPasCode: Conectando um provedor de IA
As organizações podem conectar sua própria infraestrutura de IA e usar suas credenciais de API existentes. O artigo lista OpenAI, Anthropic, Google, DeepSeek, Mistral, Qwen e Groq, entre outros. Esta opção tem como objetivo fornecer controle sobre o ambiente de IA, as credenciais e os arranjos de gastos; configure-a de acordo com as necessidades da sua organização.
VPasCode: Um fluxo de trabalho prático
-
Selecione o formato de diagrama que se adequa ao seu caso de uso.
-
Comece a partir de um exemplo integrado ou descreva o diagrama para o gerador de IA.
-
Inspeccione e edite o código resultante.
-
Use a visualização em tempo real para verificar a legibilidade e a correção.
-
Aplique um tema se estiver trabalhando no PlantUML.
-
Use modificação por IA, correção de erros ou tradução, se for útil.
-
Compartilhe um link ou exporte o diagrama finalizado.
O VPasCode é mais útil quando você prefere a edição de diagramas baseada em texto, precisa trabalhar em vários formatos de diagrama ou deseja uma maneira rápida de gerar e revisar diagramas sem organizar manualmente cada forma.
This post is also available in Deutsch, English, Español, فارسی, Français, Bahasa Indonesia, 日本語, Polski, Ру́сский, Việt Nam, 简体中文 and 繁體中文.