Sequenzdiagramm erstellen
Ordnen Sie, wer-ruft-was und in welcher Reihenfolge. Schreiben Sie ein paar Zeilen Mermaid und erhalten Sie ein sauberes Sequenzdiagramm Ihrer API-Aufrufe, Auth-Handshakes oder Nachrichtenflusses — lokal dargestellt, nie hochgeladen.
Ein Schritt pro Zeile. Zwei Leerzeichen einrücken, um unter der Zeile darüber zu verzweigen.
Sequenzdiagramme machen Timing offensichtlich
Ein Sequenzdiagramm wird von oben nach unten als Zeit gelesen und von links nach rechts als Teilnehmer, daher ist es die klarste Art, eine Interaktion zu dokumentieren: ein OAuth-Login, ein Webhook-Callback, eine Microservice-Aufrurkette oder eine racebedingte Wiederholung. Durchgehende Pfeile sind Anfragen, gestrichelte Pfeile sind Antworten, und Hinweise rufen die kniffligen Bits auf.
Da jede Nachricht eine Textzeile ist, bleibt das Diagramm mit der Realität synchronisiert — aktualisieren Sie die Zeile, neu rendern, fertig. Es gehört direkt in die API-Dokumentation oder die Design-RFC.
Für Design-Dokumente und PRs gebaut
Fügen Sie den Mermaid-Block direkt in einen GitHub-Pull-Request oder ein Design-Dokument ein und Reviewer sehen den Flow inline dargestellt. Oder exportieren Sie eine SVG für ein Wiki und ein PNG für eine Folie. Alles wird auf Ihrem Gerät generiert, daher verlässt auch ein nicht freigegebener interner Flow niemals Ihren Computer.
Sequenzdiagramm-Beispiel: Login per OAuth
Ein Sequenzdiagramm zeigt, wer wann welche Nachricht sendet. Das obige Beispiel stellt einen OAuth-Login dar: Der Nutzer klickt auf „Anmelden“, die App leitet zum Auth-Server weiter, der Server zeigt den Zustimmungsdialog, und nach der Bestätigung tauscht die App den Code gegen ein Token. Von oben nach unten gelesen ist die zeitliche Reihenfolge sofort klar — ideal für Authentifizierung, API-Aufrufe und Webhook-Callbacks.
Die Schreibweise ist einfach: mit „sequenceDiagram“ beginnen, Teilnehmer per „participant“ deklarieren und dann je Zeile eine Nachricht wie „A->>B: Nachricht“ hinzufügen. Ein durchgezogener Pfeil (->>) ist ein Aufruf, ein gestrichelter (-->>) die Antwort. Auch ein UML-Sequenzdiagramm entsteht so in Sekunden, und das Diagramm wird live in Ihrem Browser gerendert.
Diagrammtypen
Häufig gestellte Fragen
Wie erstelle ich ein Sequenzdiagramm aus Text?
Zum Sequenzdiagramm erstellen: Beginnen Sie mit "sequenceDiagram", deklarieren Sie Ihre Teilnehmer, dann fügen Sie eine Nachricht pro Zeile hinzu, wie "A->>B: request". Dieses UML-Sequenzdiagramm-Format wird live dargestellt und Sie können es als SVG oder PNG exportieren.
Was ist der Unterschied zwischen einem durchgehenden und einem gestrichelten Pfeil?
Ein durchgehender Pfeil ("->>") ist ein Anruf oder eine Anfrage; ein gestrichelter Pfeil ("-->>") ist die Antwortnachricht oder die Rückgabemitteilung. Das konsistente Verwenden macht Anfrage-/Antwort-Paare offensichtlich.
Kann ich Alternativen, Schleifen und Hinweise zeigen?
Ja. Verwenden Sie "alt … else … end" für Verzweigungen, "loop label … end" für wiederholte Schritte und "Note over A,B: text" für Anmerkungen. Siehe die Zusammenfassung oben.
Wird mein Sequenzdiagramm hochgeladen?
Nein. Es wird lokal im Browser mit Mermaid dargestellt, daher verlässt der Diagrammtext — einschließlich interner API-Details — niemals Ihr Gerät.
Kann ich die Nachrichten automatisch nummerieren?
Ja — fügen Sie die Zeile "autonumber" direkt nach "sequenceDiagram" hinzu und jede Nachricht erhält eine laufende Nummer, was praktisch ist für Verweise auf Schritte in einer Dokumentation.
Gibt es ein Beispiel für ein UML-Sequenzdiagramm?
Ja. Laden Sie oben ein Beispiel (etwa den OAuth-Login oder einen REST-API-Aufruf) und passen Sie Teilnehmer und Nachrichten an Ihren Fall an. Es ist ein vollwertiges UML-Sequenzdiagramm: „participant“ für die Akteure, „->>“ für Aufrufe, „-->>“ für Antworten, „alt/loop“ für Verzweigungen und Schleifen. Export als SVG/PNG oder als Markdown fürs GitHub-README.