Diagram sekwencji
Mermaid może renderować diagramy sekwencji. Diagram sekwencji to diagram interakcji, który pokazuje, jak poszczególne procesy wzajemnie na siebie oddziałują oraz kolejność tych operacji.
Kopiuj
Osadź
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Uwaga dotycząca węzłów: ze względu na sposób, w jaki napisano język Mermaid, słowo "end" psuje cały graf. Jeśli musisz użyć "end", musisz ująć słowo "end" w nawiasy okrągłe (), podwójne cudzysłowy "", nawiasy klamrowe {} lub nawiasy kwadratowe [], tj.: (end), [end], {end}.
Składnia
Uczestnik
Uczestnicy są wyświetlani w kolejności ich występowania w tekście źródłowym diagramu. Czasami możesz chcieć wyświetlić uczestników w innej kolejności niż w pierwszej wiadomości; kolejność wystąpienia uczestników można określić w następujący sposób:
Kopiuj
Osadź
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
Jeśli chcesz użyć symbolu roli zamiast prostokąta z tekstem, możesz to zrobić za pomocą instrukcji roli, jak pokazano poniżej.
Kopiuj
Osadź
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alias
Możesz zdefiniować alias, używając as po deklaracji uczestnika
Kopiuj
Osadź
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Tworzenie i niszczenie uczestników
Uczestników można tworzyć i niszczyć za pomocą wiadomości. Dlatego dodaj instrukcję tworzenia lub niszczenia przed wiadomością.
Kopiuj
Osadź
participant B
A --> B: Hello
Instrukcja tworzenia obsługuje rozróżnienie między uczestnikiem a aliasem. Nadawca lub odbiorca wiadomości może zostać zniszczony, ale odbiorca może zostać tylko utworzony.
Kopiuj
Osadź
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
Grupowanie/ramka
Uczestnicy mogą być grupowani w pionowych ramkach. Możesz zdefiniować kolor za pomocą symbolu (jeśli nie zostanie zdefiniowany, będzie przezroczysty).
Kopiuj
Osadź
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
Jeśli nazwa Twojej grupy jest kolorowa, możesz wymusić ten kolor jako przezroczysty:
Kopiuj
Osadź
box transparent Aqua
... actors ...
end
Kopiuj
Osadź
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?
Wiadomość
Wiadomości mogą być wyświetlane linią ciągłą lub linią kreskowaną.
Linie mogą być ciągłe lub kreskowane i mogą kończyć się różnymi typami strzałek, krzyżyków lub strzałek otwartych.
Kopiuj
Osadź
[Actor][Arrow][Actor]:Message text
Dziesięć standardowych typów strzałek
| Typ | Opis |
|---|---|
| -> | Linia ciągła bez strzałki |
| --> | Linia kreskowana bez strzałki |
| ->> | Linia ciągła ze strzałką |
| -->> | Linia kreskowana ze strzałką |
| <<->> | Linia ciągła z dwukierunkową strzałką |
| <<-->> | Linia kreskowana z dwukierunkową strzałką |
| -x | Linia ciągła z krzyżykiem na końcu |
| --x | Linia kreskowana z krzyżykiem na końcu |
| -) | Linia ciągła z pustą strzałką na końcu (asynchroniczna) |
| --) | Linia kreskowana z pustą strzałką na końcu (asynchroniczna) |
Aktywacja
Możesz aktywować i dezaktywować rolę; dezaktywacja lub aktywacja może być osobną deklaracją:
Kopiuj
Osadź
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
Istnieje również skrócona notacja polegająca na dodaniu + lub - po strzałce wiadomości.
Kopiuj
Osadź
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
Aktywacje tej samej roli mogą się nakładać:
Kopiuj
Osadź
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!
Komentarz
Możesz dodać komentarz do diagramu sekwencji. Można to zrobić za pomocą następujących symboli: Note[right of] lub [left of] lub [over][uczestnik]: treść komentarza
Kopiuj
Osadź
sequenceDiagram
participant John
Note right of John: Text in note
Możesz także utworzyć komentarz obejmujący dwóch uczestników:
Kopiuj
Osadź
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Znak nowej linii
Możesz dodać znak nowej linii w komentarzach i wiadomościach:
Kopiuj
Osadź
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
Znak nowej linii w nazwie roli wymaga zdefiniowania aliasu:
Kopiuj
Osadź
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
Pętla
W diagramie sekwencji pętlę można wyrazić za pomocą następujących symboli.
Kopiuj
Osadź
loop Loop text
... statements ...
end
Zobacz poniższy przykład:
Kopiuj
Osadź
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Alternatywa
W diagramie sekwencji ścieżkę alternatywną można wyrazić za pomocą symbolu.
Kopiuj
Osadź
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Kopiuj
Osadź
opt Describing text...
statements
end
Zobacz poniższy przykład:
Kopiuj
Osadź
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
Równoległość
Działania zachodzące równolegle można przedstawić za pomocą następujących symboli.
Kopiuj
Osadź
par Action 1
statements
and Action 2
statements
and Action N
statements
end
Zobacz poniższy przykład:
Kopiuj
Osadź
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!
Można także zagnieżdżać bloki równoległe.
Kopiuj
Osadź
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
Sekcja krytyczna
Możesz warunkowo obsłużyć różne sytuacje, aby pokazać działania, które muszą zostać wykonane automatycznie.
Odbywa się to za pomocą następujących symboli:
Kopiuj
Osadź
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
Zobacz poniższy przykład:
Kopiuj
Osadź
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
Możliwe jest również, że nie ma żadnych opcji.
Kopiuj
Osadź
critical Establish a connection to the DB
Service-->DB: connect
end
Ten blok krytyczny można również zagnieżdżać, co odpowiada instrukcji par widocznej powyżej.
Przerwanie
W przepływie można wskazać zatrzymanie sekwencji, co jest zwykle używane do modelowania wyjątków.
Odbywa się to za pomocą następujących symboli:
Kopiuj
Osadź
break [something happened]
... statements ...
end
Zobacz poniższy przykład:
Kopiuj
Osadź
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
Wyróżnienie tła
Możesz ustawić kolorowy prostokąt tła, aby wyróżnić przepływ; odbywa się to za pomocą następujących symboli:
Kopiuj
Osadź
rect COLOR
... content ...
end
Kolory są definiowane za pomocą składni rgb i rgba.
Kopiuj
Osadź
rect rgb(0, 255, 0)
... content ...
end
Kopiuj
Osadź
rect rgba(0, 0, 255, .1)
... content ...
end
Zobacz poniższy przykład:
Kopiuj
Osadź
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.
Komentarz
W diagramie sekwencji można wprowadzać komentarze, które edytor zignoruje. Komentarz musi zajmować osobną linię i zaczynać się od podwójnego znaku procentu %%. Każdy tekst od początku komentarza do następnego znaku nowej linii będzie traktowany jako komentarz, w tym dowolna składnia diagramu.
Kopiuj
Osadź
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Kodowanie encji do ucieczki znaków
Możesz uciec znaki za pomocą następującej składni.
Kopiuj
Osadź
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
Podane liczby są dziesiętne, więc (#) można zakodować jako (#35;); obsługiwane jest również używanie nazw znaków HTML.
Ponieważ średnik może zastąpić znak nowej linii przy definiowaniu znaczników, gdy w tekście wiadomości znajduje się średnik, musisz użyć (#59;).
Numeracja
Do każdej strzałki w diagramie sekwencji można dołączyć numer sekwencyjny. Jak pokazano poniżej:
Kopiuj
Osadź
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!
Menu uczestnika
Uczestnik może zawierać menu podręczne z listą spersonalizowanych łączy do stron zewnętrznych. Na przykład, jeśli rola reprezentuje usługę sieciową, przydatne łącza mogą obejmować łącze do pulpitu monitorowania kondycji usługi, repozytorium zawierające kod tej usługi lub stronę wiki opisującą tę usługę.
Można to skonfigurować, dodając jedną lub więcej linii łączy w następującym formacie:
Kopiuj
Osadź
link <actor>: <link-label> @ <link-url>
Kopiuj
Osadź
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!
Zaawansowana składnia menu
Istnieje zaawansowana składnia oparta na formacie JSON. Jeśli dobrze znasz format JSON, możesz jej również użyć.
Można to skonfigurować, dodając linię łącza w następującym formacie:
Kopiuj
Osadź
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Kopiuj
Osadź
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!
