Diagramy D2

Poniżej znajdują się gotowe do użycia przykłady typowych diagramów oprogramowania stworzonych za pomocą D2 w VPasCode. Możesz skopiować te fragmenty kodu bezpośrednio do edytora Live VPasCode, aby natychmiast uzyskać czyste wizualne diagramy.

Uwaga: Możesz ustawić kierunek układu za pomocą direction: right lub direction: downna początku bloku kodu D2.

1. Diagram architektury systemu

Wielowarstwowa architektura internetowa w chmurze z zagnieżdżonymi serwerami i składnikami przechowywania danych.

D2

Edytuj D2 w 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: Prośba o stronę
Web Application.CDN -> Web Application.Load Balancer: Przekieruj ruch
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: Sprawdź cache
Web Application.App Servers.Server 1 -> Web Application.Data Tier.PostgreSQL Database: Zapytanie o dane

Edit D2 in VPasCode

Edytuj D2 w VPasCode

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

2. Schemat bazy danych (diagram tabeli SQL)

D2 oferuje wbudowaną obsługę renderowania tabel SQL i relacji encji w sposób czytelny za pomocą sql_table kształtu.

D2

Edytuj D2 w 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-do-Mnóg
orders.id -> order_items.order_id: 1-do-Mnóg

Edit D2 in VPasCode

Edytuj D2 w VPasCode

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

3. Automatyczna linia wdrażania (CI/CD)

Zaprojektuj kroki wdrażania oprogramowania od zatwierdzenia kodu po wersję produkcyjną w trybie online.

D2

Edytuj D2 w VPasCode

D2 Edit D2 in VPasCode

direction: right

Developer -> GitHub: 1. Wypchnij kod

GitHub Pipelines: {
  Krok budowy -> Krok testowy -> Obraz Docker
}

GitHub -> GitHub Pipelines: 2. Wyzwij działanie
GitHub Pipelines.Docker Image -> Docker Registry: 3. Zapisz budowę

Docker Registry -> Serwer produkcyjny: 4. Wdróż kontener

Edit D2 in VPasCode

Edytuj D2 w VPasCode

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