D2-Diagramme

Verwenden Sie D2, wenn ein Diagramm verschachtelte Container und Grenzen, ein Datenbankschema mit Primär- und Fremdschlüsseln oder ein Layout benötigt, das Sie durch Wechsel der Engine feinabstimmen können. Für schnelle Flussdiagramme eignet sich weiterhin Mermaid. Wechseln Sie zu D2, sobald die Struktur architektonisch wird. Sie schreiben D2 genauso wie Mermaid, in einem Fenced Code Block in Ihrem Markdown.

Grundlegende Verwendung

Verwenden Sie einen Fenced Code Block mit dem Sprachbezeichner d2:

```d2
a -> b -> c
```

Diagrammtypen

Architektur

Architekturdiagramme zeigen, wie Dienste miteinander verbunden sind. Verwenden Sie beschriftete Formen, um den Anfragepfad durch Ihr System darzustellen.

```d2
Client: Web Client
API: API Server
Database: { shape: cylinder }

Client -> API: request
API -> Database: query
```

Container

Container gruppieren zusammengehörige Knoten. Verschachteln Sie Formen innerhalb von { }, um Grenzen wie ein Cloud-Konto oder eine Bereitstellung abzubilden. Zeichnen Sie anschließend Verbindungen, die diese Grenzen überschreiten.

```d2
cloud: Cloud {
  api: API
  worker: Worker
}

queue: Message Queue

cloud.api -> queue: publish
queue -> cloud.worker: consume
```

Sequenzdiagramme

Sequenzdiagramme zeigen, wie Komponenten über die Zeit miteinander kommunizieren. Setzen Sie shape: sequence_diagram auf einem Container. Listen Sie Nachrichten in der richtigen Reihenfolge auf, um einen API- oder Authentifizierungsablauf zu dokumentieren.

```d2
flow: {
  shape: sequence_diagram

  Client -> Server: request
  Server -> Database: query
  Database -> Server: results
  Server -> Client: response
}
```

Klassendiagramme

Klassendiagramme dokumentieren die Struktur objektorientierter Systeme. Setzen Sie shape: class auf einem Knoten und listen Sie seine Felder und Methoden auf. Stellen Sie Mitglieder mit + für öffentlich, - für privat oder # für geschützt voran. Verbinden Sie Klassen, um ihre Beziehungen zu zeigen.

```d2
User: {
  shape: class
  +name: string
  +email: string
  +login(): void
  +logout(): void
}

Order: {
  shape: class
  +id: int
  +created: date
  +addItem(): void
  +checkout(): void
}

Item: {
  shape: class
  +name: string
  +price: float
}

User -> Order: places
Order -> Item: contains
```

Zustandsdiagramme

Zustandsdiagramme modellieren den Lebenszyklus eines Objekts oder Prozesses. D2 hat keine eigene Form für Zustandsdiagramme. Modellieren Sie Zustände als Ovale oder Kreise und zeichnen Sie dann beschriftete Übergänge zwischen ihnen.

```d2
Draft: { shape: oval }
Review: { shape: oval }
Published: { shape: oval }
Archived: { shape: oval }

Draft -> Review: submit
Review -> Published: approve
Review -> Draft: request changes
Published -> Archived: archive
```

SQL-Tabellen

SQL-Tabellenformen dokumentieren ein Datenbankschema mit Spalten und Typen. Markieren Sie eine Spalte mit { constraint: primary_key } oder { constraint: foreign_key }, um PK- und FK-Badges anzuzeigen. Verbinden Sie einen Fremdschlüssel mit der referenzierten Tabelle, um die Beziehung darzustellen.

```d2
users: {
  shape: sql_table
  id: int { constraint: primary_key }
  email: varchar
}

orders: {
  shape: sql_table
  id: int { constraint: primary_key }
  user_id: int { constraint: foreign_key }
  total: decimal
}

orders.user_id -> users.id
```

Formen

Setzen Sie eine shape auf einem beliebigen Knoten, um zu ändern, wie er gerendert wird:

Verbindungen

Verbindungen definieren Richtung und Beziehungen zwischen Knoten:

Auswahl einer Layout-Engine

D2 bringt mehrere Layout-Engines mit. Der Standard ist dagre. Wechseln Sie zu ELK für dichtere Graphen, indem Sie den nativen D2-Konfigurationsblock in der Diagrammquelle verwenden. Eine Komponenten-Prop zum Festlegen der Engine gibt es in dieser Version nicht.

```d2
vars: {
  d2-config: {
    layout-engine: elk
  }
}

ingress -> service -> database
```

Breite Diagramme scrollen horizontal innerhalb ihres Containers. Sie ragen niemals über die Seite hinaus.

Tipps zur Gestaltung

• Halten Sie jedes Diagramm klein: Teilen Sie ein großes System in fokussierte Ansichten auf.
• Beschriften Sie jede Verbindung mit ihrer Beziehung.
• Gruppieren Sie zusammengehörige Knoten in Containern, statt einen flachen Graphen zu zeichnen.
• Wechseln Sie für dichte Graphen mit vielen Verbindungen zur ELK-Layout-Engine.

D2 und Mermaid

D2 und Mermaid werden zur Build-Zeit gerendert. Wählen Sie nach Passung:

• Wählen Sie D2 für Architektur- und Infrastrukturdiagramme, SQL- und ER-Modelle, skizzenartige Visuals und wenn Sie zwischen Layout-Engines wählen möchten.
• Wählen Sie Mermaid für Flussdiagramme, Gantt-Diagramme und Git-Graphen. Die Sequenzsyntax von Mermaid hat mehr Funktionen als die von D2. D2-Sequenzdiagramme halten den Rest Ihres Diagramms in einer Sprache. Mermaid ist weit verbreitet.

Die Syntax und Beispiele für Mermaid finden Sie auf der Seite Mermaid-Diagramme.

Weitere Informationen

Die vollständige Syntax, einschließlich Styling, Klassen und Animation, finden Sie in der offiziellen D2-Dokumentation.

Wie geht es weiter?