Diagramas D2

Abaixo estão exemplos prontos para uso para diagramas de software comuns criados com D2 no VPasCode. Você pode copiar esses trechos de código diretamente para o Editor ao Vivo do VPasCode para gerar diagramas visuais limpos instantaneamente.

Observação: Você pode definir a direção do layout usando direction: right ou direction: down no topo do seu bloco de código D2.

1. Diagrama de Arquitetura de Sistema

Uma arquitetura web em nuvem com múltiplos níveis, com servidores e componentes de armazenamento aninhados.

D2


Edite D2 no VPasCode
D2 Edit D2 in VPasCode 
direction: right

User: {
  shape: person
}

Web Application: {
  CDN: {
    shape: cloud
  }
  
  Load Balancer
  
  App Servers: {
    Server 1
    Server 2
  }
  
  Data Tier: {
    PostgreSQL Database: {
      shape: cylinder
    }
    Redis Cache: {
      shape: cylinder
    }
  }
}

User -> Web Application.CDN: Solicita Página
Web Application.CDN -> Web Application.Load Balancer: Encaminha Tráfego
Web Application.Load Balancer -> Web Application.App Servers.Server 1
Web Application.Load Balancer -> Web Application.App Servers.Server 2

Web Application.App Servers.Server 1 -> Web Application.Data Tier.Redis Cache: Verifica Cache
Web Application.App Servers.Server 1 -> Web Application.Data Tier.PostgreSQL Database: Consulta Dados
Edit D2 in VPasCode



Edite D2 no VPasCode

D2 multi-tier cloud web system architecture featuring CDN, Load Balancer, App Servers, PostgreSQL, and Redis - Text to diagram editor - VPasCode

 

2. Esquema de Banco de Dados (Diagrama de Tabela SQL)

O D2 possui suporte embutido para renderizar tabelas SQL e relacionamentos de entidades de forma limpa usando o sql_table forma.

D2


Edite D2 no VPasCode
D2 Edit D2 in VPasCode 
users: {
  shape: sql_table
  id: int {constraint: primary_key}
  username: varchar
  email: varchar
  created_at: timestamp
}

orders: {
  shape: sql_table
  id: int {constraint: primary_key}
  user_id: int {constraint: foreign_key}
  total_amount: decimal
  status: varchar
}

order_items: {
  shape: sql_table
  id: int {constraint: primary_key}
  order_id: int {constraint: foreign_key}
  product_name: varchar
  quantity: int
}

users.id -> orders.user_id: 1-para-Muitos
orders.id -> order_items.order_id: 1-para-Muitos
Edit D2 in VPasCode



Edite D2 no VPasCode

D2 SQL table ERD diagram showing 1-to-Many entity relationships between users, orders, and order_items - Text to diagram editor - VPasCode

 

3. Pipeline de Implantação Automatizada (CI/CD)

Mapeie os passos de implantação de software desde o check-in de código até o lançamento em produção.

D2


Edite D2 no VPasCode
D2 Edit D2 in VPasCode 
direction: right

Developer -> GitHub: 1. Push Code

GitHub Pipelines: {
  Build Step -> Test Step -> Docker Image
}

GitHub -> GitHub Pipelines: 2. Ativar Ação
GitHub Pipelines.Docker Image -> Docker Registry: 3. Armazenar Build

Docker Registry -> Servidor de Produção: 4. Implantar Container
Edit D2 in VPasCode



Edite D2 no VPasCode

D2 CI/CD automated deployment workflow diagram mapping code push from GitHub to Docker Registry and Production Server - Text to diagram editor - VPasCode

 

Scroll to Top