D2-Diagramme

Unten finden Sie fertige Beispiele für gängige Software-Diagramme, die mit D2 in VPasCode erstellt wurden. Sie können diese Code-Schnipsel direkt in den VPasCode Live Editor kopieren, um sofort saubere visuelle Diagramme zu generieren.

Hinweis: Sie können die Layout-Richtung mit Hilfe von direction: right oder direction: down am Anfang Ihres D2-Codeblocks festlegen.

1. Systemarchitektur-Diagramm

Eine mehrschichtige Cloud-Webarchitektur mit verschachtelten Servern und Speicherkomponenten.

D2

D2 in VPasCode bearbeiten

D2 Edit D2 in VPasCode

direction: right

Benutzer: {
  shape: person
}

Webanwendung: {
  CDN: {
    shape: cloud
  }
  
  Lastenausgleich
  
  App-Server: {
    Server 1
    Server 2
  }
  
  Datenebene: {
    PostgreSQL-Datenbank: {
      shape: zylinder
    }
    Redis-Cache: {
      shape: zylinder
    }
  }
}

Benutzer -> Webanwendung.CDN: Seite anfordern
Webanwendung.CDN -> Webanwendung.Lastenausgleich: Verkehr umleiten
Webanwendung.Lastenausgleich -> Webanwendung.App-Server.Server 1
Webanwendung.Lastenausgleich -> Webanwendung.App-Server.Server 2

Webanwendung.App-Server.Server 1 -> Webanwendung.Datenebene.Redis-Cache: Cache prüfen
Webanwendung.App-Server.Server 1 -> Webanwendung.Datenebene.PostgreSQL-Datenbank: Daten abfragen

Edit D2 in VPasCode

D2 in VPasCode bearbeiten

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

2. Datenbank-Schema (SQL-Tabellen-Diagramm)

D2 verfügt über integrierte Unterstützung zur sauberen Darstellung von SQL-Tabellen und Entitätsbeziehungen mithilfe der sql_table Form.

D2

D2 in VPasCode bearbeiten

D2 Edit D2 in VPasCode

benutzer: {
  shape: sql_table
  id: int {constraint: primary_key}
  username: varchar
  email: varchar
  created_at: timestamp
}

bestellungen: {
  shape: sql_table
  id: int {constraint: primary_key}
  user_id: int {constraint: foreign_key}
  gesamtbetrag: decimal
  status: varchar
}

bestellpositionen: {
  shape: sql_table
  id: int {constraint: primary_key}
  order_id: int {constraint: foreign_key}
  produktname: varchar
  menge: int
}

benutzer.id -> bestellungen.user_id: 1-zu-Viele
bestellungen.id -> bestellpositionen.order_id: 1-zu-Viele

Edit D2 in VPasCode

D2 in VPasCode bearbeiten

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

3. Automatisierter Bereitstellungspipeline (CI/CD)

Zeichnen Sie die Schritte der Software-Bereitstellung von der Code-Abgabe bis zur Live-Produktionsfreigabe auf.

D2

D2 in VPasCode bearbeiten

D2 Edit D2 in VPasCode

direction: right

Entwickler -> GitHub: 1. Code hochladen

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

GitHub -> GitHub-Pipelines: 2. Aktion auslösen
GitHub-Pipelines.Docker-Image -> Docker-Registry: 3. Build speichern

Docker-Registry -> Produktions-Server: 4. Container bereitstellen

Edit D2 in VPasCode

D2 in VPasCode bearbeiten

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