State Diagram
แสดงการเปลี่ยนสถานะในระบบหรือแอปพลิเคชัน เหมาะสำหรับการสร้างแบบจำลองสถานะวงจรชีวิตและเวิร์กโฟลว์
State Diagram คืออะไร?
State Diagram หรือที่เรียกว่า State Machine Diagram แสดงภาพสถานะต่าง ๆ ที่วัตถุหรือระบบสามารถอยู่ได้และวิธีการเปลี่ยนสถานะเพื่อตอบสนองต่อเหตุการณ์ จำเป็นสำหรับการสร้างแบบจำลองพฤติกรรมวงจรชีวิต เวิร์กโฟลว์ และตรรกะเงื่อนไขที่ซับซ้อน แต่ละสถานะแสดงถึงเงื่อนไขที่มีเสถียรภาพ ในขณะที่การเปลี่ยนแปลงแสดงทริกเกอร์ที่ทำให้เกิดการเปลี่ยนสถานะ
แก้ไขและดูตัวอย่าง
สร้าง State Diagram ด้วยไวยากรณ์ Mermaid และดูการเปลี่ยนแปลงทันที
Example
State diagram example
A Mermaid state diagram for a diagram moving from draft to preview, edit, and export.
Mermaid code
stateDiagram-v2
[*] --> Draft
Draft --> Preview: render
Preview --> Editing: update code
Preview --> Exported: download PNG
Editing --> Preview: render again
Exported --> [*]กรณีการใช้งานทั่วไป
การจัดการสถานะแอปพลิเคชัน
สร้างแบบจำลองสถานะ UI ขั้นตอนการตรวจสอบฟอร์ม และโหมดแอปพลิเคชัน จำเป็นสำหรับการออกแบบ State Machine ในเฟรมเวิร์กฝั่งหน้าบ้าน เช่น React หรือ Vue
การสร้างแบบจำลองเวิร์กโฟลว์
ออกแบบเวิร์กโฟลว์การอนุมัติ สถานะการประมวลผลคำสั่ง และการจัดการวงจรชีวิตตั๋ว จัดทำแผนผังการเปลี่ยนสถานะและเงื่อนไขการ์ดสำหรับกระบวนการทางธุรกิจ
การออกแบบโปรโตคอล
แสดงภาพสถานะโปรโตคอลเครือข่าย วงจรชีวิตการเชื่อมต่อ และ State Machine ของการสื่อสาร สำคัญสำหรับระบบฝังตัวและการเขียนโปรแกรมอุปกรณ์ IoT
การพัฒนาเกม
สร้างแบบจำลองสถานะตัวละคร โหมดเกม และความก้าวหน้าของด่าน ออกแบบ Finite State Machine สำหรับพฤติกรรม AI และกลไกเกม
ฟีเจอร์หลัก
ประเภทสถานะ
รองรับสถานะอย่างง่าย สถานะประกอบ และสถานะพิเศษ เช่น สถานะเริ่มต้น สถานะสิ้นสุด และ Choice Pseudostate
การ์ดการเปลี่ยนสถานะ
กำหนดการเปลี่ยนสถานะแบบมีเงื่อนไขด้วยเงื่อนไขการ์ดและการกระทำที่ดำเนินการระหว่างการเปลี่ยนสถานะ
สถานะซ้อน
สร้าง State Machine แบบลำดับชั้นด้วยสถานะแม่และสถานะลูกสำหรับการสร้างแบบจำลองพฤติกรรมที่ซับซ้อน
สถานะพร้อมกัน
สร้างแบบจำลอง State Machine แบบคู่ขนานและพื้นที่ตั้งฉากสำหรับระบบที่มีพฤติกรรมพร้อมกัน
แนวทางปฏิบัติที่ดี
เริ่มต้นง่าย ๆ
เริ่มต้นด้วยสถานะระดับสูงและค่อย ๆ ปรับปรุง ใช้สถานะประกอบเพื่อซ่อนความซับซ้อนจนกว่าจะต้องการ
ตั้งชื่อสถานะเป็นเงื่อนไข
ใช้คำคุณศัพท์หรือกริยาช่องที่สอง (เช่น 'Active', 'Suspended', 'Completed') แทนกริยา
จัดทำเอกสารการเปลี่ยนสถานะ
ติดป้ายกำกับการเปลี่ยนสถานะทั้งหมดด้วยเหตุการณ์ เงื่อนไขการ์ด และการกระทำ ลูกศรทุกอันควรเล่าเรื่องที่ชัดเจน
หลีกเลี่ยงสถานะล้นเกิน
หากคุณมีสถานะมากเกินไป ให้มองหารูปแบบเพื่อรวมสถานะหรือใช้ตัวแปรสถานะแทน
สำรวจไดอะแกรมประเภทอื่น
Flowchart
แสดงภาพกระบวนการ เวิร์กโฟลว์ และอัลกอริทึมด้วยโหนดและลูกศรทิศทาง เหมาะสำหรับกระบวนการทางธุรกิจและแผนผังการตัดสินใจ
Sequence Diagram
บันทึกการโต้ตอบระหว่างผู้กระทำหรือระบบต่าง ๆ ตามลำดับเวลา เหมาะสำหรับเอกสาร API และการออกแบบระบบ
Class Diagram
สร้างแบบจำลองระบบเชิงวัตถุด้วยคลาส แอตทริบิวต์ และความสัมพันธ์ จำเป็นสำหรับการวางแผนสถาปัตยกรรมซอฟต์แวร์
Gantt Chart
วางแผนและติดตามไทม์ไลน์โครงการด้วยงานและการพึ่งพา เหมาะสำหรับการจัดการโครงการและการจัดตารางเวลา
ER Diagram
ออกแบบสคีมาฐานข้อมูลด้วยเอนทิตีและความสัมพันธ์ เหมาะสำหรับการสร้างแบบจำลองและเอกสารฐานข้อมูล
User Journey
จัดทำแผนที่ประสบการณ์ผู้ใช้และการโต้ตอบข้ามจุดสัมผัส เหมาะสำหรับการออกแบบ UX และการจัดทำแผนที่การเดินทางของลูกค้า
Git Graph
แสดงภาพกลยุทธ์การแตกสาขาของ Git และประวัติคอมมิต ช่วยอธิบายเวิร์กโฟลว์การควบคุมเวอร์ชัน
แผนที่ความคิด
จัดระเบียบไอเดีย ระดมความคิด และสร้างโครงสร้างภาพแบบลำดับชั้น เหมาะสำหรับการวางแผนและจัดทำแผนที่ความรู้
แผนภูมิวงกลม
แสดงการกระจายข้อมูลตามสัดส่วนด้วยแผนภูมิวงกลม เหมาะสำหรับแสดงเปอร์เซ็นต์และการวิเคราะห์ส่วนแบ่งตลาด
ไทม์ไลน์
แสดงภาพเหตุการณ์และเหตุการณ์สำคัญตามลำดับเวลา เหมาะสำหรับประวัติโครงการและแผนงาน
บอร์ด Kanban
จัดระเบียบงานเป็นคอลัมน์ที่แสดงขั้นตอนเวิร์กโฟลว์ เหมาะสำหรับการจัดการโครงการแบบ Agile และการติดตามงาน
แผนภูมิสี่ส่วน
วางรายการบนตารางสองแกนเพื่อเปรียบเทียบและจัดลำดับความสำคัญ เหมาะสำหรับการจัดลำดับความสำคัญฟีเจอร์และการวิเคราะห์เชิงกลยุทธ์
ไดอะแกรม Sankey
แสดงภาพปริมาณการไหลระหว่างโหนดด้วยลูกศรตามสัดส่วน เหมาะสำหรับการไหลของพลังงาน การจัดสรรงบประมาณ และช่องทางการแปลง
แผนภูมิ XY
สร้างแผนภูมิแท่งและแผนภูมิเส้นด้วยแกนที่กำหนดเอง เหมาะสำหรับการแสดงภาพข้อมูลและการวิเคราะห์แนวโน้ม
ไดอะแกรมบล็อก
สร้างเลย์เอาต์ที่มีโครงสร้างด้วยบล็อกจัดเรียงในคอลัมน์และแถว เหมาะสำหรับสถาปัตยกรรมระบบและภาพรวมส่วนประกอบ
ไดอะแกรมสถาปัตยกรรม
ออกแบบสถาปัตยกรรมคลาวด์และระบบด้วยไอคอนบริการและการเชื่อมต่อ เหมาะสำหรับเอกสารโครงสร้างพื้นฐาน
ไดอะแกรมแพ็กเก็ต
แสดงภาพโครงสร้างแพ็กเก็ตโปรโตคอลเครือข่ายด้วยเลย์เอาต์ฟิลด์ระดับบิต จำเป็นสำหรับเอกสารโปรโตคอลเครือข่าย