Sequenzdiagramm
Mermaid kann Sequenzdiagramme rendern. Ein Sequenzdiagramm ist ein Interaktionsdiagramm, das zeigt, wie verschiedene Prozesse miteinander interagieren und in welcher Reihenfolge die Operationen ablaufen.
Kopieren
Einbetten
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Hinweis zu Knoten: Aufgrund der Art und Weise, wie die Mermaid-Sprache geschrieben wird, zerstört das Wort "end" das gesamte Diagramm. Wenn du "end" unbedingt verwenden musst, musst du das Wort "end" in runde Klammern (), doppelte Anführungszeichen "", geschweifte Klammern {} oder eckige Klammern [] setzen, also: (end), [end], {end}.
Syntax
Teilnehmer
Teilnehmer werden in der Reihenfolge angezeigt, in der sie im Quelltext des Diagramms erscheinen. Manchmal möchtest du die Teilnehmer möglicherweise in einer anderen Reihenfolge als der in der ersten Nachricht angezeigten anzeigen. Mit den folgenden Methoden kannst du die Reihenfolge des Auftretens der Teilnehmer festlegen:
Kopieren
Einbetten
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
Wenn du anstelle eines Rechtecks mit Text ein Rollensymbol verwenden möchtest, kannst du dies mit der actor-Anweisung erreichen, wie unten gezeigt.
Kopieren
Einbetten
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alias
Du kannst nach der Teilnehmerdeklaration as verwenden, um einen Alias zu definieren
Kopieren
Einbetten
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Erstellen und Zerstören von Teilnehmern
Teilnehmer können durch Nachrichten erstellt und zerstört werden. Füge daher vor der Nachricht die create- oder destroy-Anweisung hinzu.
Kopieren
Einbetten
participant B
A --> B: Hello
Bei der create-Anweisung wird zwischen Teilnehmern und Aliasen unterschieden. Der Sender oder Empfänger einer Nachricht kann zerstört werden, aber der Empfänger kann nur erstellt werden.
Kopieren
Einbetten
sequenceDiagram
Alice->>Bob: Hello Bob, how are you ?
Bob->>Alice: Fine, thank you. And you?
create participant Carl
Alice->>Carl: Hi Carl!
create actor D as Donald
Carl->>D: Hi!
destroy Carl
Alice-xCarl: We are too many
destroy Bob
Bob->>Alice: I agree
Gruppierung/Rahmen
Teilnehmer können gruppiert in vertikalen Kästen angeordnet werden. Du kannst mit einem Symbol eine Farbe definieren (wenn keine definiert ist, ist sie transparent).
Kopieren
Einbetten
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
Wenn dein Gruppenname gefärbt ist, kannst du diese Farbe auf transparent erzwingen:
Kopieren
Einbetten
box transparent Aqua
... actors ...
end
Kopieren
Einbetten
sequenceDiagram
box Orange Alice & John
participant A
participant J
end
box Another Group
participant B
participant C
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charley?
B->>C: Hello Charley, how are you?
Nachricht
Eine Nachricht kann als durchgezogene Linie oder als gestrichelte Linie dargestellt werden.
Die Linie kann durchgezogen oder gestrichelt sein und kann mit verschiedenen Arten von Pfeilen, Kreuzen oder offenen Pfeilspitzen enden.
Kopieren
Einbetten
[Actor][Arrow][Actor]:Message text
Zehn Standard-Pfeiltypen
| Typ | Beschreibung |
|---|---|
| -> | Durchgezogene Linie ohne Pfeil |
| --> | Gestrichelte Linie ohne Pfeil |
| ->> | Durchgezogene Linie mit Pfeil |
| -->> | Gestrichelte Linie mit Pfeil |
| <<->> | Durchgezogene Linie mit doppeltem Pfeil |
| <<-->> | Gestrichelte Linie mit doppeltem Pfeil |
| -x | Durchgezogene Linie mit Kreuz am Ende |
| --x | Gestrichelte Linie mit Kreuz am Ende |
| -) | Durchgezogene Linie mit offener Pfeilspitze am Ende (asynchron) |
| --) | Gestrichelte Linie mit offener Pfeilspitze am Ende (asynchron) |
Aktivierung
Eine Rolle kann aktiviert und deaktiviert werden; die Deaktivierung oder Aktivierung kann eine eigene Deklaration sein:
Kopieren
Einbetten
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
Es gibt auch eine Kurznotation, bei der ein + oder - nach dem Nachrichtenpfeil hinzugefügt wird.
Kopieren
Einbetten
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
Die Aktivierungen derselben Rolle können sich überlagern:
Kopieren
Einbetten
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
Kommentar
Zum Sequenzdiagramm können Kommentare hinzugefügt werden. Dies erfolgt mit folgenden Symbolen: Note[right of] oder [left of] oder [over][Teilnehmer]: Kommentarinhalt
Kopieren
Einbetten
sequenceDiagram
participant John
Note right of John: Text in note
Du kannst auch einen Kommentar erstellen, der zwei Teilnehmer abdeckt:
Kopieren
Einbetten
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Zeilenumbruch
In Kommentaren und Nachrichten können Zeilenumbrüche hinzugefügt werden:
Kopieren
Einbetten
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
Für einen Zeilenumbruch im Rollennamen muss ein Alias definiert werden:
Kopieren
Einbetten
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<n/>But now in two lines
Schleife
Im Sequenzdiagramm kann eine Schleife mit folgendem Symbol ausgedrückt werden.
Kopieren
Einbetten
loop Loop text
... statements ...
end
Siehe das Beispiel unten:
Kopieren
Einbetten
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Alternative
Im Sequenzdiagramm kann ein alternativer Pfad durch ein Symbol ausgedrückt werden.
Kopieren
Einbetten
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Kopieren
Einbetten
opt Describing text...
statements
end
Siehe das Beispiel unten:
Kopieren
Einbetten
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
Parallel
Parallel ablaufende Aktionen können mit folgendem Symbol dargestellt werden.
Kopieren
Einbetten
par Action 1
statements
and Action 2
statements
and Action N
statements
end
Siehe das Beispiel unten:
Kopieren
Einbetten
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
Parallele Blöcke können auch verschachtelt werden.
Kopieren
Einbetten
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
Kritischer Abschnitt
Durch die Konditionierung verschiedener Situationen können Aktionen dargestellt werden, die automatisch ausgeführt werden müssen.
Dies erfolgt mit folgendem Symbol:
Kopieren
Einbetten
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
Siehe das Beispiel unten:
Kopieren
Einbetten
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
option Network timeout
Service-->Service: Log error
option Credentials rejected
Service-->Service: Log different error
end
Es ist auch möglich, dass überhaupt keine Option vorhanden ist.
Kopieren
Einbetten
critical Establish a connection to the DB
Service-->DB: connect
end
Dieser kritische Block kann ebenfalls verschachtelt werden, was der oben gezeigten par-Anweisung entspricht.
Unterbrechung
Im Ablauf kann der Stopp einer Sequenz angegeben werden, was üblicherweise zur Modellierung von Ausnahmesituationen verwendet wird.
Dies erfolgt mit folgendem Symbol:
Kopieren
Einbetten
break [something happened]
... statements ...
end
Siehe das Beispiel unten:
Kopieren
Einbetten
sequenceDiagram
Consumer-->API: Book something
API-->BookingService: Start booking process
break when the booking process fails
API-->Consumer: show failure
end
API-->BillingService: Start billing process
Hintergrundhervorhebung
Ein farbiges Hintergrundrechteck kann festgelegt werden, um den Ablauf hervorzuheben. Dies erfolgt mit folgendem Symbol:
Kopieren
Einbetten
rect COLOR
... content ...
end
Farben werden mit der rgb- und rgba-Syntax definiert.
Kopieren
Einbetten
rect rgb(0, 255, 0)
... content ...
end
Kopieren
Einbetten
rect rgba(0, 0, 255, .1)
... content ...
end
Siehe das Beispiel unten:
Kopieren
Einbetten
sequenceDiagram
participant Alice
participant John
rect rgb(191, 178, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(142, 182, 89)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
Kommentar
Im Sequenzdiagramm können Kommentare eingegeben werden, die der Editor ignoriert. Ein Kommentar muss eine eigene Zeile einnehmen und mit einem doppelten Prozentzeichen %% beginnen. Jeder Text vom Kommentarbeginn bis zum nächsten Zeilenumbruch wird als Kommentar betrachtet, einschließlich jeglicher Diagrammsyntax.
Kopieren
Einbetten
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Entity-Kodierung zum Escapen von Zeichen
Zeichen können mit der folgenden Syntax escaped werden.
Kopieren
Einbetten
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
Die angegebenen Zahlen sind dezimal, daher kann (#) als (#35;) kodiert werden. Die Verwendung von HTML-Zeichennamen wird ebenfalls unterstützt.
Da das Semikolon anstelle eines Zeilenumbruchs zur Definition von Markierungen verwendet werden kann, musst du (#59;) verwenden, wenn du ein Semikolon im Nachrichtentext einfügst.
Nummerierung
An jeden Pfeil im Sequenzdiagramm kann eine Sequenznummer angehängt werden. Wie unten gezeigt:
Kopieren
Einbetten
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Teilnehmermenü
Teilnehmer können ein Popup-Menü enthalten, das personalisierte Links zu externen Seiten auflistet. Wenn eine Rolle beispielsweise einen Webdienst repräsentiert, könnten nützliche Links einen Link zum Health-Dashboard des Dienstes, ein Repository mit dem Code des Dienstes oder einen Link zu einer Wiki-Seite enthalten, die den Dienst beschreibt.
Es kann konfiguriert werden, indem eine oder mehrere Linkzeilen im folgenden Format hinzugefügt werden:
Kopieren
Einbetten
link <actor>: <link-label> @ <link-url>
Kopieren
Einbetten
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Erweiterte Menü-Syntax
Es gibt eine erweiterte Syntax, die auf dem JSON-Format basiert. Wenn du mit dem JSON-Format vertraut bist, kannst du diese ebenfalls verwenden.
Es kann konfiguriert werden, indem Linkzeilen im folgenden Format hinzugefügt werden:
Kopieren
Einbetten
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Kopieren
Einbetten
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
