D2-Syntax-Grundlagen

D2 ist ein modernes, textbasiertes Werkzeug zum Erstellen klarer, lesbarer Diagramme. Es steht für „deklaratives Zeichnen“. In VPasCode ermöglicht D2 Softwareentwicklern und Lösungsarchitekten, einfachen Code-Text in saubere visuelle Modelle umzuwandeln, ohne Formen manuell zeichnen zu müssen.

1. Grundformen und Verbindungen

Um Formen zu erstellen, geben Sie einfach deren Namen ein. Um Formen zu verbinden, verwenden Sie einen Pfeil (-> für eine Richtung oder <-> für zwei Richtungen).

# Einfache Verbindung
Benutzer -> Web-Server: HTTP-Anfrage
Web-Server -> Datenbank: Daten abrufen
Datenbank -> Web-Server: Ergebnisse zurückgeben
Web-Server <-> Cache: Lese-/Schreib-Synchronisation

2. Formtypen und benutzerdefinierte Beschriftungen

Standardmäßig erscheinen Formen als Standardfelder. Sie können den Symboltyp einer Form leicht ändern oder eine benutzerdefinierte Beschriftung mithilfe der Eigenschaft shape festlegen.

# Formtypen definieren
Kunde: {
  shape: person
}

Cloud-Dienste: {
  shape: cloud
}

Haupt-Datenbank: {
  shape: zylinder
  label: "Primäre Datenbank (PostgreSQL)"
}

Kunde -> Cloud-Dienste -> Haupt-Datenbank

3. Klassendefinitionen

D2 unterstützt natively die objektorientierte Strukturgestaltung mit der classForm.

Kundenkonto: {
  shape: class

  accountId: String
  emailAddress: String

  isActive(): Boolean
}

4. Verschachtelte Container (Gruppierung)

D2 macht es einfach, Elemente innerhalb von Containern mithilfe von Standard-Klammern (“{}). Sie können auch Elemente über verschiedene Gruppen hinweg mithilfe der Punkt-Notation verbinden.

# Gruppierung mit Containern
Frontend-Anwendung: {
  React-Oberfläche -> Zustands-Manager
}

Backend-Infrastruktur: {
  API-Gateway -> Auth-Mikroservice
  API-Gateway -> Bestell-Mikroservice
}

# Verbindung über Gruppen hinweg
Frontend-Anwendung.Zustands-Manager -> Backend-Infrastruktur.API-Gateway: REST-Aufruf

5. Styling & Farben

Benutzerdefinierte Hintergrundfarben, Strichfarben und Schriftstile können direkt innerhalb des Blocks mithilfe des Schlüsselworts styleSchlüsselwort angepasst werden.

Dienst A: {
  style: {
    füllen: "#e0e7ff"
    strich: "#4338ca"
    eckenradius: 8
  }
}

Dienst B: {
  style: {
    füllen: "#fef3c7"
    strich: "#d97706"
  }
}

Dienst A -> Dienst B: Nachricht senden

6. Schnellreferenz für die Syntax