← Mermaid Diagram Editor

Mermaid Sequenzdiagramm Generator

Erstelle Sequenzdiagramme mit Mermaid Syntax. Teilnehmer, Nachrichten, Aktivierungsbalken, Schleifen und alternative Blöcke. Live Vorschau.

100% clientseitig. Deine Daten verlassen niemals deinen Browser.

Vorlagen:

Editor wird geladen...

Diagrammvorschau erscheint hier...

Verwandte Werkzeuge

.md
Markdown Vorschau: Markdown in HTML Konvertieren

Konvertiere Markdown in Echtzeit in HTML. Mit GFM Unterstützung für Tabellen, Aufgabenlisten, Codeblöcke und durchgestrichenen Text. Kopiere HTML Ausgabe mit einem Klick.

 </>
SQL / CSS / HTML Formatierer

Formatiere und minifiziere SQL-Abfragen, CSS-Stylesheets und HTML-Markup mit Syntaxhervorhebung. Rücke Code im Browser ein, verschönere oder komprimiere ihn.

Mermaid Sequenzdiagramm Syntax

Sequenzdiagramme zeigen, wie Komponenten über die Zeit interagieren. Jede vertikale Linie ist ein Teilnehmer (Dienst, Benutzer, System) und die horizontalen Pfeile sind zwischen ihnen ausgetauschte Nachrichten. Sie sind die Standardmethode zur Dokumentation von API Abläufen, Authentifizierungs-Handshakes und Interaktionen in verteilten Systemen.

Teilnehmer

Deklariere Teilnehmer, um ihre Reihenfolge von links nach rechts zu steuern:

sequenceDiagram
    participant Browser
    participant API
    participant Datenbank

Ohne explizite participant Deklarationen erstellt Mermaid sie in der Reihenfolge, in der sie zum ersten Mal erscheinen. Verwende actor anstelle von participant, um ein Strichmännchen-Symbol zu rendern (nützlich für menschliche Benutzer).

Nachrichtentypen

SyntaxBedeutungRendert als
A->>B: textSynchroner Aufruf (durchgezogene Linie, gefüllter Pfeil)Anfrage
A-->>B: textAsync/Rückgabe (gepunktete Linie, gefüllter Pfeil)Antwort
A->B: textSynchron (durchgezogene Linie, offener Pfeil)Einfache Nachricht
A-->B: textAsync (gepunktete Linie, offener Pfeil)Einfache Rückgabe
A-xB: textVerlorene Nachricht (durchgezogen, Kreuz)Fehler
A--xB: textVerloren async (gepunktet, Kreuz)Timeout

Die Konvention: durchgezogene Linien für Anfragen, gepunktete Linien für Antworten. ->> (gefüllter Pfeil) ist am gebräuchlichsten.

Aktivierungsbalken

Zeige, wann ein Teilnehmer aktiv verarbeitet:

sequenceDiagram
    Client->>+API: Request
    API->>+DB: Query
    DB-->>-API: Result
    API-->>-Client: Response

Das + nach ->> aktiviert das Ziel. Das - deaktiviert es. Aktivierungsbalken stapeln sich, wenn ein Teilnehmer mehrfach aktiviert wird. Alternativ verwende explizites activate API und deactivate API.

Kontrollfluss

Bedingungen

alt Erfolg
    API-->>Client: 200 OK
else Nicht Gefunden
    API-->>Client: 404 Not Found
else Serverfehler
    API-->>Client: 500 Internal Server Error
end

Schleifen

loop Max 3 Versuche
    Client->>API: Request
    API-->>Client: Antwort
end

Parallele Ausführung

par Gleichzeitige Anfragen
    ServiceA->>ServiceB: Task 1
    and
    ServiceA->>ServiceC: Task 2
end

Optionale Blöcke

opt Caching aktiviert
    API->>Cache: Prüfe Cache
    Cache-->>API: Hit
end

Hintergrundbereiche

Heebe ganze Abschnitte des Diagramms farblich hervor:

sequenceDiagram
    rect rgb(200, 220, 255)
        Client->>API: Authentifizierung
        API->>Client: Token
    end
    rect rgb(220, 255, 220)
        Client->>API: Datenanfrage
        API->>Client: Daten
    end

Verwende den Mermaid Editor zum Erstellen aller Diagrammtypen, einschließlich Sequenzdiagramme.