DevToy

Mermaid-Diagramme

Mermaid-Sequenzdiagramme für API- und Serviceaufrufe

API-Anfragen, Antworten, Schleifen, Alternativen und Fehler in lesbaren Mermaid-Sequenzdiagrammen modellieren.

Veröffentlicht 11. Juli 2026 · Aktualisiert 11. Juli 2026

Sequenzdiagramme erklären die Reihenfolge von Interaktionen. Sie passen besser als Flussdiagramme, wenn die Frage lautet: „Wer sendet wem was und wann?“ Typische Fälle sind Browser-API-Aufrufe, Anmeldung, Webhooks, Warteschlangen und Wiederholungen zwischen Services.

Teilnehmer mit nützlichen Namen deklarieren

sequenceDiagram
  actor User as Benutzer
  participant Web as Webanwendung
  participant API as Bestell-API
  participant DB as Datenbank
  User->>Web: Bestellung absenden
  Web->>API: POST /orders
  API->>DB: Bestellung einfügen
  DB-->>API: Bestell-ID
  API-->>Web: 201 Created
  Web-->>User: Bestätigung anzeigen

Aliase halten Nachrichten kompakt und zeigen klare Namen. Verwenden Sie Akteure für Menschenrollen und Teilnehmer für Software. Ordnen Sie sie entlang des wichtigsten Ablaufs.

Aufrufe und Antworten unterscheiden

Durchgezogene Pfeile stehen meist für Anfragen, gestrichelte für Antworten. Das ist eine Konvention und garantiert keine synchrone Ausführung. Wenn blockierende und asynchrone Arbeit unterschieden werden muss, schreiben Sie es in Beschriftung oder Begleittext.

Alternativen ohne doppelte Diagramme zeigen

sequenceDiagram
  Client->>API: GET /profile
  alt Token ist gültig
    API-->>Client: 200 Profil
  else Token abgelaufen
    API-->>Client: 401 Unauthorized
  end

alt beschreibt Alternativen, opt einen optionalen Zweig und loop Wiederholungen. Blocktexte sollten die Bedingung nennen, nicht eine interne Funktion.

Zeit und Verantwortung ehrlich darstellen

Die vertikale Achse ist keine genaue Zeitskala. Ergänzen Sie gemessene Werte, wenn Latenz relevant ist. Modellieren Sie Interaktionen über bedeutende Grenzen und nicht jeden internen Funktionsaufruf.

Testen Sie das Beispiel im Mermaid-Diagrammeditor und exportieren Sie SVG für scharfe Darstellung bei jeder Größe.

Verwandte Anleitungen