Começando com Visual Paradigm VPasCode leva menos de um minuto. Como a plataforma é totalmente nativa em nuvem, você não precisa instalar runtime do Java, configurar módulos do Node.js ou baixar dependências pesadas de extensões de IDE. Você pode passar da sintaxe de texto bruto para um diagrama visual de alta fidelidade em apenas três etapas simples.
Siga este guia rápido para criar, personalizar e compartilhar seu primeiro ativo Diagrama como Código (DaC).
Etapa 1: Abra o Editor ao Vivo
Navegue até o site gratuito VPasCode Playground. Por padrão, você será recebido por uma interface moderna de dois painéis:
- O Painel Esquerdo (Editor de Código): Um editor de texto leve e de alto desempenho com realce automático de sintaxe, números de linha e detecção ativa de erros.
- O Painel Direito (Janela de Visualização em Tempo Real): Um renderizador de diagrama em tempo real que atualiza seu layout visual automaticamente enquanto você digita ou modifica sua representação de texto.
Etapa 2: Escolha seu Motor e Cole um Modelo
O VPasCode reconhece automaticamente sua sintaxe. Para ver isso em ação, limpe qualquer texto de espaço reservado no painel esquerdo e copie e cole um dos seguintes exemplos básicos no editor:
Opção A: Fluxograma em Markdown (Sintaxe Mermaid)
Se você preferir um layout de fluxograma ágil e de cima para baixo, use este bloco simples:
graph TD
A[Solicitação do Cliente] --> B{Gateway da API}
B --> |Token Válido| C[Serviço de Autenticação]
B --> |Token Inválido| D[Acesso Negado]
C --> E[(Banco de Dados de Usuários)]
Opção B: Componente de Arquitetura de Software (Sintaxe PlantUML)
Se você quiser mapear componentes estruturados do sistema com delimitação formal, use este bloco:
@startuml
pacote "Nível de Aplicação" {
[Aplicativo Web] -direita-> [Gateway da API]
}
database "Armazenamento de Dados" {
[Gateway da API] --> [SQL Principal]
[Gateway da API] ..> [Cache Redis] : "Otimização de Leitura"
}
@enduml
No momento em que você cola o código, o painel da direita compilará imediatamente seu texto e exibirá seu diagrama visual limpo e perfeitamente alinhado.
Etapa 3: Exporte e Compartilhe seu Trabalho
Assim que você estiver satisfeito com seu layout, poderá exportar ou compartilhar seu documento instantaneamente usando a barra de controle de trabalho localizada na parte superior da interface:
- Copiar URL compartilhável: Clique no Compartilhar botão para gerar um link instantâneo. O VPasCode utiliza serialização de estado sem banco de dados, o que significa que todo o texto do seu diagrama é compactado de forma segura diretamente na hash da URL. Qualquer pessoa que clicar no seu link poderá visualizar e editar o modelo de código exato instantaneamente.
- Baixar vetor de alta resolução (SVG): Clique no Exportar SVG botão para baixar um ativo vetorial escalável. Isso é perfeito para incorporações limpas em repositórios Git, wikis da equipe ou arquivos de documentação em markdown para engenharia interna.
- Baixar imagem estática (PNG): Clique em Exportar PNG para obter uma captura de alta resolução pronta para ser inserida diretamente no Slack, no Microsoft Teams ou em apresentações de design.
Agora que você renderizou seu primeiro ativo, explore as próximas seções da nossa documentação para dominar os métodos individuais de design do Playbook do PlantUML, Playbook do Mermaid, e Playbook do Graphviz métodos de design!