Noções Básicas da Sintaxe D2

O D2 é uma ferramenta moderna baseada em texto para criar diagramas claros e legíveis. Significa “Diagramação Declarativa”. No VPasCode, o D2 permite que desenvolvedores de software e arquitetos de soluções transformem texto simples de código em modelos visuais limpos, sem precisar desenhar formas manualmente.

1. Formas Básicas e Conexões

Para criar formas, basta digitar seus nomes. Para conectar formas, use uma seta (-> para uma direção ou <-> para duas direções).

# Conexão Simples
Usuário -> Servidor Web: Solicitação HTTP
Servidor Web -> Banco de Dados: Buscar Dados
Banco de Dados -> Servidor Web: Retornar Resultados
Servidor Web <-> Cache: Sincronização Leitura/Escrita

2. Tipos de Formas e Rótulos Personalizados

Por padrão, as formas aparecem como caixas padrão. Você pode facilmente alterar o tipo de ícone de uma forma ou definir um rótulo personalizado usando a propriedade shape propriedade.

# Definindo Tipos de Formas
Cliente: {
  shape: pessoa
}

Serviços em Nuvem: {
  shape: nuvem
}

Banco de Dados Principal: {
  shape: cilindro
  label: "Banco de Dados Principal (PostgreSQL)"
}

Cliente -> Serviços em Nuvem -> Banco de Dados Principal

3. Definições de Classe

O D2 suporta nativamente o design de estruturas orientadas a objetos usando a forma class forma.

ContaCliente: {
  shape: class

  accountId: String
  emailAddress: String

  isActive(): Boolean
}

4. Contêineres Aninhados (Agrupamento)

O D2 torna fácil agrupar itens juntos dentro de contêineres usando chaves padrão (“{}). Você também pode vincular elementos entre grupos diferentes usando a notação ponto.

# Agrupamento com Contêineres
Aplicativo Frontend: {
  UI React -> Gerenciador de Estado
}

Infraestrutura Backend: {
  Gateway de API -> Microserviço de Autenticação
  Gateway de API -> Microserviço de Pedidos
}

# Conexão entre grupos
Aplicativo Frontend.Gerenciador de Estado -> Infraestrutura Backend.Gateway de API: Chamada REST

5. Estilo e Cores

Cores de fundo personalizadas, cores de traço e estilos de fonte podem ser personalizados diretamente dentro do bloco usando a palavra-chavestylepalavra-chave.

Serviço A: {
  style: {
    fill: "#e0e7ff"
    stroke: "#4338ca"
    border-radius: 8
  }
}

Serviço B: {
  style: {
    fill: "#fef3c7"
    stroke: "#d97706"
  }
}

Serviço A -> Serviço B: Enviar Mensagem

6. Folha de Dicas de Sintaxe Rápida