Estamos entusiasmados em anunciar uma atualização importante para VPasCode: suporte completo para a D2linguagem diagram-as-code! Com esta atualização, arquitetos, desenvolvedores e redatores técnicos podem transformar instantaneamente scripts de texto declarativos D2 em diagramas visuais limpos e profissionais, sem qualquer atrito.
Seja você mapear arquiteturas de nuvem complexas, topologia de microserviços ou fluxos de trabalho organizacionais, o VPasCode funciona como seu editor D2 gratuito de escolhaeditor D2 gratuito e ferramenta online com recursos avançados ferramenta online D2. Experimente uma visualização contínua e em tempo real diretamente no seu navegador.
Para saber mais sobre os recursos e atualizações da nossa plataforma, visite a página oficial do Página do VPasCode.
Como o Integração D2 Funciona no VPasCode
Usar o D2 no VPasCode é rápido, intuitivo e projetado para maximizar sua produtividade. O ambiente de trabalho apresenta uma disposição conveniente em lado a lado:
- Painel Esquerdo (Editor de Código):Basta colar, digitar ou editar seu script D2. A detecção automática de formato do VPasCode reconhece imediatamente seu código, sem exigir alternância manual de linguagem.
- Painel Direito (Visualizador em Tempo Real):Observe seu diagrama sendo renderizado dinamicamente em tempo real enquanto digita ou modifica blocos de código.
O vídeo abaixo mostra como criar um diagrama D2 no editor diagram-as-code do Visual Paradigm VPasCode.
Pronto para experimentar por si mesmo? Comece imediatamente com nosso Editor VPasCode.
Recursos Principais Incluídos com o Suporte a D2
Além da renderização em tempo real, nossa nova integração D2 vem com opções versáteis de colaboração e saída para se adaptar ao seu fluxo de trabalho:
- Opções Flexíveis de Exportação:Baixe seus diagramas concluídos instantaneamente como gráficos vetoriais escaláveis SVG ou imagens PNG de alta resolução para relatórios, apresentações e documentação.
- Integração com a área de transferência:Copie rapidamente sua imagem de diagrama renderizada diretamente para sua área de transferência com um único clique para colar diretamente no Slack, emails ou editores de texto.
- Compartilhamento de URL Instantâneo:Compartilhe seu trabalho facilmente com colegas ou clientes por meio de links diretos. Melhor ainda, não é necessário fazer login para que os espectadores analisem seus diagramas compartilhados.
Demonstração: Criando um Diagrama de Rede Básico no D2
Para ver o quão fácil é modelar sistemas usando esteeditor D2 gratuito, considere o seguinte exemplo de uma arquitetura de rede básica em múltiplos níveis.
Código-fonte D2
direcao: direita
cliente -> balanceador_de_carga: HTTPS
balanceador_de_carga -> app1: HTTP
balanceador_de_carga -> app2: HTTP
app1 -> redis: GET
app2 -> redis: GET
app1 -> postgres: SQL
app2 -> postgres: SQL
cliente.forma: pessoa
balanceador_de_carga.forma: retangulo
app1.forma: hexagono
app2.forma: hexagono
redis.forma: cilindro
postgres.forma: cilindro
redis.estilo.preenchimento: "#fee2e2"
postgres.estilo.preenchimento: "#dcfce7"Como isso é renderizado na nossa ferramenta online D2
Quando você cola o script acima no VPasCode, o motor processa automaticamente as relações, a direcionalidade e o estilo personalizado das formas:
- Oclienteé estilizado como um ícone distinto de pessoa iniciando requisições HTTPS para umbalanceador_de_carga.
- O tráfego é dividido claramente entre dois nós de aplicação hexagonais (app1 e app2).
- Ambos os nós de aplicação consultam de forma segura camadas de cache de backend (redis, estilizado com uma tonalidade suave de vermelho) e bancos de dados relacionais (postgres, estilizado com uma tonalidade suave de verde).
Mais Exemplos de Diagramas D2
Formas Básicas
servidor -> cliente: HTTP
servidor -> bd: consulta
cliente: {
forma: pessoa
estilo.preenchimento: "#cfe2ff"
}
bd: {
forma: cilindro
estilo.preenchimento: "#d1e7dd"
}
estilo.preenchimento.servidor: "#fff3cd"
Contêineres
rede: {
web: {
forma: hexágono
estilo.preenchimento: "#e7f1ff"
}
api: {
forma: retângulo
estilo.preenchimento: "#fff3cd"
}
bd.principal: {
forma: cilindro
estilo.preenchimento: "#d1e7dd"
}
bd.cache: {
forma: cilindro
estilo.preenchimento: "#f8d7da"
}
web -> api: REST
api -> bd.principal: SQL
api -> bd.cache: consulta
}Estilizado
vars: {
config-d2: {
esboço: verdadeiro
engine-layout: elk
}
}
aws: {
vpc: {
web: {
forma: retângulo
estilo: {
preenchimento: "#fef3c7"
traço: "#d97706"
largura-traço: 2
fonte: mono
}
}
api: {
forma: retângulo
estilo.preenchimento: "#dbeafe"
}
bd: {
forma: cilindro
estilo.preenchimento: "#dcfce7"
}
}
}
usuário -> aws.vpc.web: HTTPS {
estilo.animado: verdadeiro
}
aws.vpc.web -> aws.vpc.api: HTTP
aws.vpc.api -> aws.vpc.bd: SQL {
estilo.traço-pontilhado: 5
}Sequência
forma: diagrama_sequencia
usuário -> api: GET /usuários
api -> bd: SELECT *
bd -> api: linhas
api -> usuário: 200 OK
usuário -> api: POST /usuários
api -> bd: INSERT
bd -> api: linha
api -> usuário: 201 CriadoNotas: Você pode querer criar um Diagrama de Sequência com PlantUML. Confira como fazer isso em:
Guia Completo sobre Diagramas de Sequência do PlantUML: Sintaxe, Exemplos e Melhores Práticas
O que é o VPasCode?
Se você é novo na nossa plataforma, Visual Paradigm VPasCodeé uma solução unificada, baseada em navegador, de diagramas como código, criada para equipes técnicas modernas. Ela elimina a complicação das ferramentas manuais de arrastar e soltar, permitindo que você defina arquiteturas e modelos de dados inteiramente por meio de código.
Além do D2, o VPasCode suporta uma grande variedade de formatos populares de diagramação e linguagens estruturadas, incluindo PlantUML, Mermaid, Graphviz, ECharts, SQL, YAML, JSON, e linguagens de programação principais como Java, Python, Rust, e TypeScript. Edição de código principal, visualização em tempo real e exportação de imagens são totalmente gratuitas.
Comece a Criar Hoje
Aprimore sua documentação técnica e modelagem arquitetônica hoje. Experimente a velocidade e a conveniência dos novos recursos D2 iniciando o aplicativo agora mesmo no Editor VPasCode.