Sequenzdiagramme

Ein Sequenzdiagramm ist ein Interaktionsdiagramm, das zeigt, wie Prozesse miteinander arbeiten und in welcher Reihenfolge.

Mermaid kann Sequenzdiagramme rendern.

Code:

NOTE

Eine Anmerkung zu Knoten: Das Wort "end" könnte das Diagramm möglicherweise aufgrund der Art und Weise, wie die Mermaid-Sprache geschrieben ist, beschädigen. Wenn unvermeidbar, muss man Klammern (), Anführungszeichen "" oder Klammern {}, [], verwenden, um das Wort "end" einzuschließen. z. B.: (end), [end], {end}.

Syntax

Teilnehmer

Die Teilnehmer können implizit definiert werden, wie im ersten Beispiel auf dieser Seite. Die Teilnehmer oder Akteure werden in der Reihenfolge ihres Auftretens im Diagramm-Quelltext gerendert. Manchmal möchte man die Teilnehmer in einer anderen Reihenfolge anzeigen, als sie in der ersten Nachricht erscheinen. Es ist möglich, die Reihenfolge des Auftretens des Akteurs wie folgt anzugeben:

Code:

Akteure

Wenn Sie speziell das Aktorsymbol anstelle eines Rechtecks mit Text verwenden möchten, können Sie dies mit Actor-Anweisungen wie unten tun.

Code:

Aliase

Der Akteur kann eine bequeme Kennung und eine beschreibende Bezeichnung haben.

Code:

Akteurserstellung und -zerstörung (v10.3.0+)

Es ist möglich, Akteure durch Nachrichten zu erstellen und zu zerstören. Fügen Sie dazu eine create- oder destroy-Direktive vor die Nachricht hinzu.

create participant B
A --> B: Hello

Create-Direktiven unterstützen die Unterscheidung zwischen Actor/Participant und Aliase. Der Sender oder der Empfänger einer Nachricht kann zerstört werden, aber nur der Empfänger kann erstellt werden.

Code:

Nicht behebbare Fehler bei der Erstellung/Löschung von Actor/Participant

Wenn beim Erstellen oder Löschen eines Akteurs/Teilnehmers ein Fehler des folgenden Typs auftritt:

Der zerstörte Teilnehmer Teilnehmername hat keine zugeordnete Zerstörungsnachricht nach seiner Deklaration. Bitte überprüfen Sie das Sequenzdiagramm.

Und das Beheben des Diagrammcodes behebt diesen Fehler nicht und das Rendern aller anderen Diagramme führt zum gleichen Fehler, dann müssen Sie die Mermaid-Version auf (v10.7.0+) aktualisieren.

Gruppierung / Box

Die Akteure(n) können in vertikale Boxen gruppiert werden. Sie können eine Farbe (wenn nicht, wird sie transparent sein) und/oder eine beschreibende Bezeichnung mit der folgenden Notation definieren:

box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
box rgba(33,66,99,0.5)
... actors ...
end

NOTE

Wenn Ihr Gruppenname eine Farbe ist, können Sie die Farbe auf transparent setzen:

box transparent Aqua
... actors ...
end

Code:

Nachrichten

Nachrichten können entweder durchgezogen oder mit einer gepunkteten Linie angezeigt werden.

[Actor][Arrow][Actor]:Message text

Es gibt derzeit zehn Arten von Pfeilen:

Typ	Beschreibung
->	Durchgezogene Linie ohne Pfeilspitze
-->	Gepunktete Linie ohne Pfeilspitze
->>	Durchgezogene Linie mit Pfeilspitze
-->>	Gepunktete Linie mit Pfeilspitze
<<->>	Durchgezogene Linie mit bidirektionalen Pfeilspitzen (v11.0.0+)
<<-->>	Gepunktete Linie mit bidirektionalen Pfeilspitzen (v11.0.0+)
-x	Durchgezogene Linie mit einem Kreuz am Ende
--x	Gepunktete Linie mit einem Kreuz am Ende
-)	Durchgezogene Linie mit einem offenen Pfeil am Ende (asynchron)
--)	Gepunktete Linie mit einem offenen Pfeil am Ende (asynchron)

Aktivierungen

Es ist möglich, einen Akteur zu aktivieren und zu deaktivieren. (De-)Aktivierung kann dedizierte Deklarationen sein:

Code:

Es gibt auch eine Kurzschreibweise, indem man dem Nachrichtenpfeil ein +/--Suffix anhängt:

Code:

Aktivierungen können für denselben Akteur gestapelt werden:

Code:

Notizen

Es ist möglich, Notizen zu einem Sequenzdiagramm hinzuzufügen. Dies geschieht durch die Notation Note [ right of | left of | over ] [Actor]: Text in Notizeninhalt

Siehe das Beispiel unten:

Code:

Es ist auch möglich, Notizen zu erstellen, die sich über zwei Teilnehmer erstrecken:

Code:

Zeilenumbrüche

Zeilenumbrüche können zu Notizen und Nachrichten hinzugefügt werden:

Code:

Zeilenumbrüche in Akteursnamen erfordern Aliase:

Code:

Schleifen

Es ist möglich, Schleifen in einem Sequenzdiagramm auszudrücken. Dies geschieht durch die Notation

loop Schleifentext
... Anweisungen ...
end

Siehe das Beispiel unten:

Code:

Alt

Es ist möglich, alternative Pfade in einem Sequenzdiagramm auszudrücken. Dies geschieht durch die Notation

alt Beschreibender Text
... Anweisungen ...
else
... Anweisungen ...
end

oder wenn es sich um eine optionale Sequenz handelt (wenn ohne else).

opt Beschreibender Text
... Anweisungen ...
end

Siehe das Beispiel unten:

Code:

Parallel

Es ist möglich, Aktionen anzuzeigen, die parallel ablaufen.

Dies geschieht durch die Notation

par [Aktion 1]
... Anweisungen ...
and [Aktion 2]
... Anweisungen ...
and [Aktion N]
... Anweisungen ...
end

Siehe das Beispiel unten:

Code:

Es ist auch möglich, parallele Blöcke zu verschachteln.

Code:

Kritischer Bereich

Es ist möglich, Aktionen anzuzeigen, die automatisch mit bedingter Behandlung von Umständen erfolgen müssen.

Dies geschieht durch die Notation

critical [Aktion, die ausgeführt werden muss]
... Anweisungen ...
option [Umstand A]
... Anweisungen ...
option [Umstand B]
... Anweisungen ...
end

Siehe das Beispiel unten:

Code:

Es ist auch möglich, überhaupt keine Optionen zu haben

Code:

Dieser kritische Block kann auch verschachtelt werden, analog zur obigen par-Anweisung.

Break

Es ist möglich, einen Stopp der Sequenz innerhalb des Ablaufs anzuzeigen (normalerweise verwendet, um Ausnahmen zu modellieren).

Dies geschieht durch die Notation

break [etwas ist passiert]
... Anweisungen ...
end

Siehe das Beispiel unten:

Code:

Hintergrundmarkierung

Es ist möglich, Flüsse durch die Bereitstellung farbiger Hintergrundrechtecke hervorzuheben. Dies geschieht durch die Notation

rect FARBE
... Inhalt ...
end

Die Farben werden mit rgb- und rgba-Syntax definiert.

rect rgb(0, 255, 0)
... Inhalt ...
end

rect rgba(0, 0, 255, .1)
... Inhalt ...
end

Siehe die Beispiele unten:

Code:

Kommentare

Kommentare können in ein Sequenzdiagramm eingegeben werden, die vom Parser ignoriert werden. Kommentare müssen in einer eigenen Zeile stehen und müssen mit %% (doppelte Prozentzeichen) eingeleitet werden. Jeder Text nach dem Beginn des Kommentars bis zur nächsten neuen Zeile wird als Kommentar behandelt, einschließlich aller Diagrammsyntax

Entity-Codes zum Maskieren von Zeichen

Es ist möglich, Zeichen mit der hier gezeigten Syntax zu maskieren.

Code:

Die angegebenen Zahlen sind Basis 10, daher kann # als #35; kodiert werden. Es wird auch unterstützt, HTML-Zeichennamen zu verwenden.

Da Semikolons anstelle von Zeilenumbrüchen verwendet werden können, um das Markup zu definieren, müssen Sie #59; verwenden, um ein Semikolon in den Nachrichtentext aufzunehmen.

sequenceNumbers

Es ist möglich, eine Sequenznummer an jeden Pfeil in einem Sequenzdiagramm anzuhängen. Dies kann konfiguriert werden, wenn Mermaid der Website hinzugefügt wird, wie unten gezeigt:

<script>
  mermaid.initialize({ sequence: { showSequenceNumbers: true } });
</script>

Es kann auch über den Diagrammcode aktiviert werden, wie im Diagramm:

Code:

Akteursmenüs

Akteure können Popup-Menüs enthalten, die individualisierte Links zu externen Seiten enthalten. Wenn ein Akteur beispielsweise einen Webdienst darstellt, könnten nützliche Links einen Link zum Service-Health-Dashboard, zum Repo, das den Code für den Service enthält, oder eine Wiki-Seite enthalten, die den Service beschreibt.

Dies kann konfiguriert werden, indem eine oder mehrere Linkzeilen mit dem Format hinzugefügt werden:

link <actor>: <link-label> @ <link-url>

Erweiterte Menüsyntax

Es gibt eine erweiterte Syntax, die auf der JSON-Formatierung basiert. Wenn Sie mit dem JSON-Format vertraut sind, dann existiert auch dies.

Dies kann konfiguriert werden, indem die Linkzeilen mit dem Format hinzugefügt werden:

links <actor>: <json-formatierter Linkname Link-URL-Paare>

Ein Beispiel ist unten dargestellt:

Code:

Styling

Das Styling eines Sequenzdiagramms erfolgt durch die Definition einer Reihe von CSS-Klassen. Während des Renderns werden diese Klassen aus der Datei unter src/themes/sequence.scss extrahiert.

Verwendete Klassen

Klasse	Beschreibung
actor	Styles für die Akteursbox.
actor-top	Styles für die Akteursfigur/Box oben im Diagramm.
actor-bottom	Styles für die Akteursfigur/Box unten im Diagramm.
text.actor	Styles für den Text aller Akteure.
text.actor-box	Styles für den Text der Akteursbox.
text.actor-man	Styles für den Text der Akteursfigur.
actor-line	Die vertikale Linie für einen Akteur.
messageLine0	Styles für die durchgezogene Nachrichtenlinie.
messageLine1	Styles für die gepunktete Nachrichtenlinie.
messageText	Definiert Styles für den Text auf den Nachrichtenpfeilen.
labelBox	Definiert Styles für die Beschriftung links in einer Schleife.
labelText	Styles für den Text in der Beschriftung für Schleifen.
loopText	Styles für den Text in der Schleifenbox.
loopLine	Definiert Styles für die Linien in der Schleifenbox.
note	Styles für die Notizbox.
noteText	Styles für den Text in den Notizboxen.

Beispiel-Stylesheet

body {
  background: white;
}

.actor {
  stroke: #ccccff;
  fill: #ececff;
}
text.actor {
  fill: black;
  stroke: none;
  font-family: Helvetica;
}

.actor-line {
  stroke: grey;
}

.messageLine0 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  marker-end: 'url(#arrowhead)';
  stroke: black;
}

.messageLine1 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  stroke: black;
}

#arrowhead {
  fill: black;
}

.messageText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px;
}

.labelBox {
  stroke: #ccccff;
  fill: #ececff;
}

.labelText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
}

.loopText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
}

.loopLine {
  stroke-width: 2;
  stroke-dasharray: '2 2';
  marker-end: 'url(#arrowhead)';
  stroke: #ccccff;
}

.note {
  stroke: #decc93;
  fill: #fff5ad;
}

.noteText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px;
}

Konfiguration

Es ist möglich, die Ränder für das Rendern des Sequenzdiagramms anzupassen.

Dies geschieht durch die Definition von mermaid.sequenceConfig oder über die CLI, um eine JSON-Datei mit der Konfiguration zu verwenden. Die Verwendung der CLI wird auf der Seite mermaidCLI beschrieben. mermaid.sequenceConfig kann auf eine JSON-Zeichenkette mit Konfigurationsparametern oder das entsprechende Objekt gesetzt werden.

mermaid.sequenceConfig = {
  diagramMarginX: 50,
  diagramMarginY: 10,
  boxTextMargin: 5,
  noteMargin: 10,
  messageMargin: 35,
  mirrorActors: true,
};

Mögliche Konfigurationsparameter:

Parameter	Beschreibung	Standardwert
mirrorActors	Aktiviert/Deaktiviert das Rendern von Akteuren sowohl unter als auch über dem Diagramm	false
bottomMarginAdj	Passt an, wie weit unten die Grafik endet. Breite Rahmen-Stile mit CSS können unerwünschtes Clipping erzeugen, weshalb dieser Konfigurationsparameter existiert.	1
actorFontSize	Legt die Schriftgröße für die Beschreibung des Akteurs fest	14
actorFontFamily	Legt die Schriftfamilie für die Beschreibung des Akteurs fest	"Open Sans", sans-serif
actorFontWeight	Legt die Schriftstärke für die Beschreibung des Akteurs fest	"Open Sans", sans-serif
noteFontSize	Legt die Schriftgröße für dem Akteur zugeordnete Notizen fest	14
noteFontFamily	Legt die Schriftfamilie für dem Akteur zugeordnete Notizen fest	"trebuchet ms", verdana, arial
noteFontWeight	Legt die Schriftstärke für dem Akteur zugeordnete Notizen fest	"trebuchet ms", verdana, arial
noteAlign	Legt die Textausrichtung für Text in dem Akteur zugeordneten Notizen fest	center
messageFontSize	Legt die Schriftgröße für Akteur<->Akteur-Nachrichten fest	16
messageFontFamily	Legt die Schriftfamilie für Akteur<->Akteur-Nachrichten fest	"trebuchet ms", verdana, arial
messageFontWeight	Legt die Schriftstärke für Akteur<->Akteur-Nachrichten fest	"trebuchet ms", verdana, arial