Sequence Diagram
บันทึกการโต้ตอบระหว่างผู้กระทำหรือระบบต่าง ๆ ตามลำดับเวลา เหมาะสำหรับเอกสาร API และการออกแบบระบบ
Sequence Diagram คืออะไร?
Sequence Diagram คือ UML Interaction Diagram ที่แสดงวิธีการที่วัตถุหรือระบบสื่อสารกันตามลำดับเวลา แสดงลำดับเวลาของการแลกเปลี่ยนข้อความระหว่างผู้กระทำต่าง ๆ ทำให้มีคุณค่าอย่างยิ่งสำหรับการจัดทำเอกสาร API ขั้นตอนการทำงานของระบบ และกระบวนการหลายขั้นตอน ผู้เข้าร่วมแต่ละคนถูกแสดงด้วยเส้นชีวิตแนวตั้ง โดยมีลูกศรแนวนอนแสดงการแลกเปลี่ยนข้อความ
แก้ไขและดูตัวอย่าง
สร้าง Sequence Diagram ด้วยไวยากรณ์ Mermaid และดูการเปลี่ยนแปลงทันที
Example
Sequence diagram example
A Mermaid sequence diagram for documenting browser, editor, and renderer interactions.
Mermaid code
sequenceDiagram
participant User
participant WebApp as Mermaid Editor
participant Renderer
User->>WebApp: Paste diagram code
WebApp->>Renderer: Render Mermaid syntax
Renderer-->>WebApp: SVG preview
WebApp-->>User: Download PNGกรณีการใช้งานทั่วไป
เอกสาร API
จัดทำเอกสาร API Endpoint และขั้นตอนการโต้ตอบ แสดงภาพวงจรคำขอ-การตอบสนอง ขั้นตอนการรับรองความถูกต้อง การจัดการข้อผิดพลาด และการแลกเปลี่ยนข้อมูลระหว่างไคลเอนต์และเซิร์ฟเวอร์
สถาปัตยกรรมไมโครเซอร์วิส
จัดทำแผนผังรูปแบบการสื่อสารระหว่างไมโครเซอร์วิส คิวข้อความ และฐานข้อมูล จำเป็นสำหรับการเข้าใจพฤติกรรมระบบกระจายและการดีบักปัญหาการผสานรวม
การรับรองความถูกต้องและการอนุญาต
สร้างแบบจำลองกระบวนการรับรองความถูกต้องหลายขั้นตอน เช่น OAuth, SAML หรือขั้นตอน JWT Token แสดงลำดับของการเปลี่ยนเส้นทาง การแลกเปลี่ยนโทเค็น และขั้นตอนการตรวจสอบ
การผสานรวมระบบ
แสดงภาพวิธีที่ระบบต่าง ๆ โต้ตอบกันในสถานการณ์การผสานรวมที่ซับซ้อน จัดทำเอกสาร Webhook Callback สถาปัตยกรรมแบบ Event-Driven และการผสานรวมบริการของบุคคลที่สาม
ฟีเจอร์หลัก
การจัดการผู้เข้าร่วม
กำหนดผู้กระทำ ระบบ หรือบริการหลายตัวด้วยชื่อย่อและกล่องเปิดใช้งานเพื่อแสดงเมื่อส่วนประกอบกำลังประมวลผลอยู่
ประเภทข้อความ
รองรับการเรียกแบบซิงโครนัส ข้อความแบบอะซิงโครนัส ค่าส่งกลับ และการเรียกตัวเองด้วยสไตล์ลูกศรที่แตกต่างกันเพื่อความชัดเจน
โครงสร้างควบคุม
สร้างแบบจำลองวงจรวนซ้ำ สาขาเงื่อนไข (alt/else) บล็อกทางเลือก และการประมวลผลแบบคู่ขนานด้วยไวยากรณ์ที่เข้าใจง่าย
บันทึกและคำอธิบายประกอบ
เพิ่มบันทึกอธิบายที่จุดใด ๆ ในลำดับเพื่อให้บริบท ชี้แจงตรรกะทางธุรกิจ หรือจัดทำเอกสารกรณีพิเศษ
แนวทางปฏิบัติที่ดี
เน้นที่สถานการณ์เดียว
Sequence Diagram แต่ละอันควรแสดงกรณีการใช้งานหรือขั้นตอนการโต้ตอบเดียว สร้างไดอะแกรมแยกสำหรับสถานการณ์ที่แตกต่างกันแทนที่จะรวมทุกอย่าง
ใช้ชื่อที่มีความหมาย
ตั้งชื่อผู้เข้าร่วมให้ชัดเจนและอธิบายได้ ใช้ชื่อบริการจริงหรือชื่อตำแหน่งแทนป้ายกำกับทั่วไป เช่น 'ระบบ A' หรือ 'ส่วนประกอบ 1'
แสดงเส้นทางข้อผิดพลาด
อย่าเพียงจัดทำเอกสารเส้นทางที่สำเร็จเท่านั้น รวมขั้นตอนทางเลือกสำหรับเงื่อนไขข้อผิดพลาด การหมดเวลา และการจัดการข้อยกเว้น
รักษาเวลาจากบนลงล่าง
ปฏิบัติตามแบบแผนที่เวลาไหลจากบนลงล่าง การโต้ตอบก่อนหน้าควรปรากฏสูงกว่าในไดอะแกรมมากกว่าการโต้ตอบหลังหน้า
สำรวจไดอะแกรมประเภทอื่น
Flowchart
แสดงภาพกระบวนการ เวิร์กโฟลว์ และอัลกอริทึมด้วยโหนดและลูกศรทิศทาง เหมาะสำหรับกระบวนการทางธุรกิจและแผนผังการตัดสินใจ
Class Diagram
สร้างแบบจำลองระบบเชิงวัตถุด้วยคลาส แอตทริบิวต์ และความสัมพันธ์ จำเป็นสำหรับการวางแผนสถาปัตยกรรมซอฟต์แวร์
State Diagram
แสดงการเปลี่ยนสถานะในระบบหรือแอปพลิเคชัน เหมาะสำหรับการสร้างแบบจำลองสถานะวงจรชีวิตและเวิร์กโฟลว์
Gantt Chart
วางแผนและติดตามไทม์ไลน์โครงการด้วยงานและการพึ่งพา เหมาะสำหรับการจัดการโครงการและการจัดตารางเวลา
ER Diagram
ออกแบบสคีมาฐานข้อมูลด้วยเอนทิตีและความสัมพันธ์ เหมาะสำหรับการสร้างแบบจำลองและเอกสารฐานข้อมูล
User Journey
จัดทำแผนที่ประสบการณ์ผู้ใช้และการโต้ตอบข้ามจุดสัมผัส เหมาะสำหรับการออกแบบ UX และการจัดทำแผนที่การเดินทางของลูกค้า
Git Graph
แสดงภาพกลยุทธ์การแตกสาขาของ Git และประวัติคอมมิต ช่วยอธิบายเวิร์กโฟลว์การควบคุมเวอร์ชัน
แผนที่ความคิด
จัดระเบียบไอเดีย ระดมความคิด และสร้างโครงสร้างภาพแบบลำดับชั้น เหมาะสำหรับการวางแผนและจัดทำแผนที่ความรู้
แผนภูมิวงกลม
แสดงการกระจายข้อมูลตามสัดส่วนด้วยแผนภูมิวงกลม เหมาะสำหรับแสดงเปอร์เซ็นต์และการวิเคราะห์ส่วนแบ่งตลาด
ไทม์ไลน์
แสดงภาพเหตุการณ์และเหตุการณ์สำคัญตามลำดับเวลา เหมาะสำหรับประวัติโครงการและแผนงาน
บอร์ด Kanban
จัดระเบียบงานเป็นคอลัมน์ที่แสดงขั้นตอนเวิร์กโฟลว์ เหมาะสำหรับการจัดการโครงการแบบ Agile และการติดตามงาน
แผนภูมิสี่ส่วน
วางรายการบนตารางสองแกนเพื่อเปรียบเทียบและจัดลำดับความสำคัญ เหมาะสำหรับการจัดลำดับความสำคัญฟีเจอร์และการวิเคราะห์เชิงกลยุทธ์
ไดอะแกรม Sankey
แสดงภาพปริมาณการไหลระหว่างโหนดด้วยลูกศรตามสัดส่วน เหมาะสำหรับการไหลของพลังงาน การจัดสรรงบประมาณ และช่องทางการแปลง
แผนภูมิ XY
สร้างแผนภูมิแท่งและแผนภูมิเส้นด้วยแกนที่กำหนดเอง เหมาะสำหรับการแสดงภาพข้อมูลและการวิเคราะห์แนวโน้ม
ไดอะแกรมบล็อก
สร้างเลย์เอาต์ที่มีโครงสร้างด้วยบล็อกจัดเรียงในคอลัมน์และแถว เหมาะสำหรับสถาปัตยกรรมระบบและภาพรวมส่วนประกอบ
ไดอะแกรมสถาปัตยกรรม
ออกแบบสถาปัตยกรรมคลาวด์และระบบด้วยไอคอนบริการและการเชื่อมต่อ เหมาะสำหรับเอกสารโครงสร้างพื้นฐาน
ไดอะแกรมแพ็กเก็ต
แสดงภาพโครงสร้างแพ็กเก็ตโปรโตคอลเครือข่ายด้วยเลย์เอาต์ฟิลด์ระดับบิต จำเป็นสำหรับเอกสารโปรโตคอลเครือข่าย