แผนภาพลำดับ
Mermaid สามารถเรนเดอร์แผนภาพลำดับได้ แผนภาพลำดับเป็นแผนภาพการโต้ตอบที่แสดงว่ากระบวนการต่าง ๆ ทำงานร่วมกันอย่างไรและลำดับของการทำงาน
คัดลอก
ฝัง
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
คำอธิบายเกี่ยวกับโหนด: เนื่องจากวิธีการเขียนภาษา Mermaid คำว่า "end" จะทำให้กราฟทั้งหมดเสีย หากจำเป็นต้องใช้ "end" ต้องใช้วงเล็บเล็ก () เครื่องหมายอัญประกาศคู่ "" วงเล็บปีกกา {} หรือวงเล็บเหลี่ยม [] มาครอบคำว่า "end" นั่นคือ: (end), [end], {end}
ไวยากรณ์
ผู้เข้าร่วม
ผู้เข้าร่วมจะแสดงตามลำดับที่ปรากฏในข้อความต้นทางของแผนภาพ บางครั้งคุณอาจต้องการให้แสดงผู้เข้าร่วมในลำดับที่ต่างจากลำดับที่ปรากฏในข้อความแรก สามารถระบุลำดับการปรากฏของผู้เข้าร่วมได้ด้วยวิธีต่อไปนี้:
คัดลอก
ฝัง
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
หากคุณต้องการใช้สัญลักษณ์บทบาทแทนสี่เหลี่ยมที่มีข้อความ สามารถทำได้โดยใช้คำสั่ง actor ดังที่แสดงด้านล่าง
คัดลอก
ฝัง
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
นามแฝง
คุณสามารถใช้ as หลังการประกาศผู้เข้าร่วมเพื่อกำหนดนามแฝงได้
คัดลอก
ฝัง
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
การสร้างและการทำลายผู้เข้าร่วม
สามารถสร้างและทำลายผู้เข้าร่วมผ่านข้อความได้ ดังนั้นโปรดเพิ่มคำสั่งสร้างหรือทำลายไว้หน้าข้อความ
คัดลอก
ฝัง
participant B
A --> B: Hello
เมื่อสร้างคำสั่งรองรับการแยกแยะผู้เข้าร่วมกับนามแฝง ผู้ส่งหรือผู้รับของข้อความสามารถถูกทำลายได้ แต่ผู้รับสามารถถูกสร้างได้เท่านั้น
คัดลอก
ฝัง
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
การจัดกลุ่ม/กล่อง
ผู้เข้าร่วมสามารถจัดกลุ่มไว้ในกล่องแนวตั้งได้ คุณสามารถใช้สัญลักษณ์เพื่อกำหนดสี (หากไม่ได้กำหนด สีจะเป็นแบบโปร่งใส)
คัดลอก
ฝัง
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
หากชื่อกลุ่มของคุณมีสี คุณสามารถบังคับให้สีนั้นเป็นแบบโปร่งใสได้:
คัดลอก
ฝัง
box transparent Aqua
... actors ...
end
คัดลอก
ฝัง
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?
ข้อความ
ข้อความสามารถแสดงเป็นเส้นทึบหรือเส้นประได้
เส้นสามารถเป็นเส้นทึบหรือเส้นประ และรองรับการลงท้ายด้วยลูกศร กากบาท หรือลูกศรปลายเปิดประเภทต่าง ๆ
คัดลอก
ฝัง
[Actor][Arrow][Actor]:Message text
ประเภทลูกศรมาตรฐานสิบแบบ
| ประเภท | คำอธิบาย |
|---|---|
| -> | เส้นทึบไม่มีลูกศร |
| --> | เส้นประไม่มีลูกศร |
| ->> | เส้นทึบมีลูกศร |
| -->> | เส้นประมีลูกศร |
| <<->> | เส้นทึบลูกศรสองทิศทาง |
| <<-->> | เส้นประลูกศรสองทิศทาง |
| -x | เส้นทึบที่มีกากบาทที่ปลาย |
| --x | เส้นประที่มีกากบาทที่ปลาย |
| -) | เส้นทึบที่มีลูกศรโปร่งที่ปลาย (อะซิงโครนัส) |
| --) | เส้นประที่มีลูกศรโปร่งที่ปลาย (อะซิงโครนัส) |
การเปิดใช้งาน
สามารถเปิดใช้งานและปิดใช้งานบทบาทได้ การปิดใช้งานหรือเปิดใช้งานสามารถเป็นคำสั่งเฉพาะได้:
คัดลอก
ฝัง
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
ยังมีสัญกรณ์แบบลัด อีกทั้งการเพิ่ม + หรือ - ต่อท้ายลูกศรของข้อความ
คัดลอก
ฝัง
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
การเปิดใช้งานของบทบาทเดียวกันสามารถซ้อนทับกันได้:
คัดลอก
ฝัง
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!
ความคิดเห็น
สามารถเพิ่มความคิดเห็นลงในแผนภาพลำดับได้ สามารถทำได้ผ่านสัญลักษณ์ต่อไปนี้: Note[right of] หรือ [left of] หรือ [over][ผู้เข้าร่วม]: เนื้อหาความคิดเห็น
คัดลอก
ฝัง
sequenceDiagram
participant John
Note right of John: Text in note
ยังสามารถสร้างความคิดเห็นที่ครอบคลุมผู้เข้าร่วมสองคนได้:
คัดลอก
ฝัง
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
ตัวขึ้นบรรทัดใหม่
สามารถเพิ่มตัวขึ้นบรรทัดใหม่ในความคิดเห็นและข้อความได้:
คัดลอก
ฝัง
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
ตัวขึ้นบรรทัดใหม่ในชื่อบทบาทต้องกำหนดนามแฝง:
คัดลอก
ฝัง
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 Loop text
... statements ...
end
โปรดดูตัวอย่างด้านล่าง:
คัดลอก
ฝัง
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
ทางเลือก
ในแผนภาพลำดับ สามารถแสดงเส้นทางทางเลือกได้ผ่านสัญลักษณ์
คัดลอก
ฝัง
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
คัดลอก
ฝัง
opt Describing text...
statements
end
โปรดดูตัวอย่างด้านล่าง:
คัดลอก
ฝัง
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
ขนาน
สามารถแสดงการกระทำที่เกิดขึ้นพร้อมกันได้ผ่านสัญลักษณ์ต่อไปนี้
คัดลอก
ฝัง
par Action 1
statements
and Action 2
statements
and Action N
statements
end
โปรดดูตัวอย่างด้านล่าง:
คัดลอก
ฝัง
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!
ยังสามารถซ้อนบล็อกแบบขนานได้
คัดลอก
ฝัง
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 [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
โปรดดูตัวอย่างด้านล่าง:
คัดลอก
ฝัง
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
ก็เป็นไปได้ที่จะไม่มีตัวเลือกเลย
คัดลอก
ฝัง
critical Establish a connection to the DB
Service-->DB: connect
end
บล็อกวิกฤตนี้สามารถซ้อนกันได้เช่นกัน เทียบเท่ากับคำสั่ง par ที่เห็นด้านบน
การหยุดชะงัก
สามารถระบุการหยุดของลำดับในกระบวนการได้ มักใช้ในการจำลองสถานการณ์ผิดปกติ
ทำได้ผ่านสัญลักษณ์ต่อไปนี้:
คัดลอก
ฝัง
break [something happened]
... statements ...
end
โปรดดูตัวอย่างด้านล่าง:
คัดลอก
ฝัง
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
การไฮไลต์พื้นหลัง
สามารถตั้งค่าสี่เหลี่ยมพื้นหลังสีเพื่อไฮไลต์กระบวนการได้ โดยทำผ่านสัญลักษณ์ต่อไปนี้:
คัดลอก
ฝัง
rect COLOR
... content ...
end
สีถูกกำหนดโดยใช้ไวยากรณ์ rgb และ rgba
คัดลอก
ฝัง
rect rgb(0, 255, 0)
... content ...
end
คัดลอก
ฝัง
rect rgba(0, 0, 255, .1)
... content ...
end
โปรดดูตัวอย่างด้านล่าง:
คัดลอก
ฝัง
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.
ความคิดเห็น
สามารถป้อนความคิดเห็นในแผนภาพลำดับได้ และเอดิเตอร์จะไม่สนใจความคิดเห็นเหล่านี้ ความคิดเห็นต้องอยู่บนบรรทัดของตัวเอง และต้องขึ้นต้นด้วยเครื่องหมายเปอร์เซ็นต์คู่ %% ข้อความใด ๆ ตั้งแต่เริ่มความคิดเห็นจนถึงตัวขึ้นบรรทัดใหม่ถัดไปจะถือเป็นความคิดเห็น รวมถึงไวยากรณ์ของแผนภาพใด ๆ
คัดลอก
ฝัง
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
การเข้ารหัสเอนทิตีสำหรับการหลีกอักขระ
สามารถใช้ไวยากรณ์ต่อไปนี้ในการหลีกอักขระได้
คัดลอก
ฝัง
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
ตัวเลขที่ให้มาเป็นเลขฐานสิบ ดังนั้น (#) จึงเข้ารหัสเป็น (#35;) ได้ และยังรองรับการใช้ชื่ออักขระ HTML ด้วย
เนื่องจากเครื่องหมายอัฒภาคสามารถใช้แทนตัวขึ้นบรรทัดใหม่ในการกำหนดเครื่องหมายได้ เมื่อข้อความของข้อความมีเครื่องหมายอัฒภาค คุณจึงต้องใช้ (#59;)
การใส่หมายเลข
สามารถแนบหมายเลขลำดับให้กับลูกศรแต่ละอันในแผนภาพลำดับได้ ดังที่แสดงด้านล่าง:
คัดลอก
ฝัง
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!
เมนูของผู้เข้าร่วม
ผู้เข้าร่วมสามารถมีเมนูแบบป๊อปอัป ซึ่งมีลิงก์เฉพาะบุคคลที่ชี้ไปยังหน้าภายนอก ตัวอย่างเช่น หากบทบาทหนึ่งแทนบริการเครือข่าย ลิงก์ที่มีประโยชน์อาจรวมถึงลิงก์ที่ชี้ไปยังแดชบอร์ดสุขภาพของบริการ ที่เก็บโค้ดของบริการนั้น หรือลิงก์ไปยังหน้าวิกิที่อธิบายบริการนั้น
สามารถกำหนดค่าได้โดยเพิ่มบรรทัดลิงก์หนึ่งบรรทัดหรือมากกว่า ในรูปแบบดังนี้:
คัดลอก
ฝัง
link <actor>: <link-label> @ <link-url>
คัดลอก
ฝัง
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!
ไวยากรณ์เมนูขั้นสูง
มีไวยากรณ์ขั้นสูงที่พึ่งพารูปแบบ JSON หากคุณเชี่ยวชาญรูปแบบ JSON ก็สามารถใช้สิ่งนี้ได้เช่นกัน
สามารถกำหนดค่าได้โดยเพิ่มบรรทัดลิงก์ในรูปแบบต่อไปนี้:
คัดลอก
ฝัง
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
คัดลอก
ฝัง
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!
