Dayagram ng pagkakasunod-sunod
Maaaring mag-render ang Mermaid ng sequence diagram. Ang sequence diagram ay isang interaction diagram, ipinapakita nito kung paano nag-interact ang bawat proseso at ang pagkakasunod-sunod ng operasyon.
Kopyahin
Embed
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Tandaan tungkol sa node: dahil sa paraan ng pagkakasulat ng Mermaid language, ang salitang "end" ay sisirain ang buong graph. Kung kailangang gamitin ang "end", kailangan mong gamitin ang parenthesis (), double quotes "", curly braces {}, o square brackets [] upang i-wrap ang salitang "end", ibig sabihin: (end), [end], {end}.
Syntax
Participant
Ang mga participant ay ipapakita ayon sa pagkakasunod-sunod ng kanilang paglitaw sa source text ng chart. Minsan, maaaring gusto mong ipakita ang mga participant sa pagkakasunod-sunod na naiiba sa kanilang paglitaw sa unang mensahe, maaari mong tukuyin ang appearance order ng participant sa pamamagitan ng sumusunod na paraan:
Kopyahin
Embed
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
Kung gusto mong gumamit ng actor symbol, sa halip na rectangle na may teksto, maaari mong gawin ito sa pamamagitan ng paggamit ng actor statement, tulad ng ipinapakita sa ibaba.
Kopyahin
Embed
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alias
Maaari kang gumamit ng as pagkatapos ng participant declaration upang tukuyin ang alias
Kopyahin
Embed
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Paglikha at pagkasira ng participant
Maaaring gumawa at magwasak ng participant sa pamamagitan ng mensahe. Kaya, magdagdag ng create o destroy directive bago ang mensahe.
Kopyahin
Embed
participant B
A --> B: Hello
Sinusuportahan ng create directive ang pagkakaiba sa pagitan ng participant at alias. Ang sender o receiver ng mensahe ay maaaring sirain, ngunit ang receiver ay maaari lamang gawin.
Kopyahin
Embed
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
Group/box
Ang mga participant ay maaaring igrupo sa vertical na kahon. Maaari kang magtukoy ng kulay gamit ang simbolo (kung hindi tinukoy, magiging transparent ito).
Kopyahin
Embed
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
Kung ang pangalan ng iyong grupo ay may kulay, maaari mong pilitin ang kulay na iyon na maging transparent:
Kopyahin
Embed
box transparent Aqua
... actors ...
end
Kopyahin
Embed
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?
Mensahe
Ang mensahe ay maaaring ipakita bilang solid line o dashed line.
Ang linya ay maaaring solid o dashed, at sinusuportahan ang pagtatapos sa iba't ibang uri ng palaso, cross, o open arrow.
Kopyahin
Embed
[Actor][Arrow][Actor]:Message text
Sampung standard na uri ng palaso
| Uri | Paglalarawan |
|---|---|
| -> | Solid line na walang palaso |
| --> | Dashed line na walang palaso |
| ->> | Solid line na may palaso |
| -->> | Dashed line na may palaso |
| <<->> | Solid line na may bidirectional na palaso |
| <<-->> | Dashed line na may bidirectional na palaso |
| -x | Solid line na may cross sa dulo |
| --x | Dashed line na may cross sa dulo |
| -) | Solid line na may hollow arrow sa dulo (async) |
| --) | Dashed line na may hollow arrow sa dulo (async) |
Activation
Maaari mong i-activate at i-deactivate ang isang actor, ang deactivation o activation ay maaaring isang dedikadong declaration:
Kopyahin
Embed
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
Mayroon ding shortcut notation, ibig sabihin, magdagdag ng + o - pagkatapos ng message arrow.
Kopyahin
Embed
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
Ang activation ng parehong actor ay maaaring magpatong:
Kopyahin
Embed
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!
Komento
Maaari kang magdagdag ng komento sa sequence diagram. Maaari itong gawin sa pamamagitan ng sumusunod na simbolo: Note[right of] o [left of] o [over][participant]: nilalaman ng komento
Kopyahin
Embed
sequenceDiagram
participant John
Note right of John: Text in note
Maaari ka ring gumawa ng komento na sumasaklaw sa dalawang participant:
Kopyahin
Embed
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Line break
Maaari kang magdagdag ng line break sa mga komento at mensahe:
Kopyahin
Embed
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
Ang line break sa pangalan ng actor ay nangangailangan ng pagtukoy ng alias:
Kopyahin
Embed
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
Loop
Sa sequence diagram, maaaring ipahayag ang loop sa pamamagitan ng sumusunod na simbolo.
Kopyahin
Embed
loop Loop text
... statements ...
end
Tingnan ang halimbawa sa ibaba:
Kopyahin
Embed
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Alternative
Sa sequence diagram, maaaring ipahayag ang alternative path sa pamamagitan ng simbolo.
Kopyahin
Embed
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Kopyahin
Embed
opt Describing text...
statements
end
Tingnan ang halimbawa sa ibaba:
Kopyahin
Embed
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
Maaaring katawanin ang mga aksyong nangyayari nang parallel sa pamamagitan ng sumusunod na simbolo.
Kopyahin
Embed
par Action 1
statements
and Action 2
statements
and Action N
statements
end
Tingnan ang halimbawa sa ibaba:
Kopyahin
Embed
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!
Maaari ka ring mag-nest ng parallel block.
Kopyahin
Embed
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
Critical region
Maaari mong ipakita ang mga operasyong dapat awtomatikong isagawa sa pamamagitan ng pagkondisyon sa iba't ibang sitwasyon.
Ito ay ginagawa sa pamamagitan ng sumusunod na simbolo:
Kopyahin
Embed
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
Tingnan ang halimbawa sa ibaba:
Kopyahin
Embed
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
Posible rin na walang anumang option.
Kopyahin
Embed
critical Establish a connection to the DB
Service-->DB: connect
end
Ang critical block na ito ay maaari ring i-nest, katumbas ng par statement na nakita sa itaas.
Break
Maaaring ipahiwatig ang paghinto ng sequence sa daloy, kadalasang ginagamit sa pagmomodelo ng mga exception.
Ito ay ginagawa sa pamamagitan ng sumusunod na simbolo:
Kopyahin
Embed
break [something happened]
... statements ...
end
Tingnan ang halimbawa sa ibaba:
Kopyahin
Embed
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
Background highlight
Maaari kang magtakda ng kulay na background rectangle upang i-highlight ang daloy, na ginagawa sa pamamagitan ng sumusunod na simbolo:
Kopyahin
Embed
rect COLOR
... content ...
end
Ang kulay ay tinutukoy gamit ang rgb at rgba syntax.
Kopyahin
Embed
rect rgb(0, 255, 0)
... content ...
end
Kopyahin
Embed
rect rgba(0, 0, 255, .1)
... content ...
end
Tingnan ang halimbawa sa ibaba:
Kopyahin
Embed
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.
Komento
Maaari kang maglagay ng komento sa sequence diagram, at hindi papansinin ng editor ang mga komentong ito. Ang komento ay kailangang sumakop sa isang buong linya, at dapat magsimula sa double percent sign %%. Anumang teksto mula sa simula ng komento hanggang sa susunod na line break ay ituturing na komento, kabilang ang anumang chart syntax.
Kopyahin
Embed
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Entity encoding para sa pag-escape ng karakter
Maaari mong i-escape ang mga karakter gamit ang sumusunod na syntax.
Kopyahin
Embed
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
Ang ibinigay na numero ay decimal, kaya ang (#) ay maaaring i-encode bilang (#35;), sinusuportahan din ang paggamit ng HTML character names.
Dahil ang semicolon ay maaaring palitan ang line break upang tukuyin ang markup, kapag nagsasama ng semicolon sa message text, kailangan mong gamitin ang (#59;).
Numbering
Maaari kang maglakip ng sequence number sa bawat arrow sa sequence diagram. Tulad ng ipinapakita sa ibaba:
Kopyahin
Embed
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 ng participant
Ang participant ay maaaring maglaman ng pop-up menu, na naglalaman ng mga personalized na link patungo sa external na pahina. Halimbawa, kung ang isang actor ay kumakatawan sa isang network service, ang mga kapaki-pakinabang na link ay maaaring kabilang ang link patungo sa health dashboard ng service, repository na naglalaman ng code ng service, o link ng wiki page na naglalarawan sa service.
Maaaring i-configure sa pamamagitan ng pagdaragdag ng isa o higit pang link line, ang format ay ang sumusunod:
Kopyahin
Embed
link <actor>: <link-label> @ <link-url>
Kopyahin
Embed
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!
Advanced na syntax ng menu
May isang advanced na syntax na umaasa sa JSON format. Kung bihasa ka sa JSON format, maaari mo rin itong gamitin.
Maaaring i-configure sa pamamagitan ng pagdaragdag ng link line sa sumusunod na format:
Kopyahin
Embed
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Kopyahin
Embed
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!
