什麼是狀態圖？
狀態圖，也稱為狀態機圖，視覺化物件或系統可能處於的不同狀態以及如何回應事件在狀態之間轉換。它們對於建模生命週期行為、工作流和複雜條件邏輯至關重要。每個狀態代表一個穩定的條件，而轉換顯示導致狀態變化的觸發器。
編輯與預覽
使用 Mermaid 語法創建 狀態圖，即時查看效果。
100%
常見使用場景
應用狀態管理
建模 UI 狀態、表單驗證流程和應用程式模式。對於在 React 或 Vue 等前端框架中設計狀態機至關重要。
工作流建模
設計審批工作流、訂單處理狀態和工單生命週期管理。為業務流程映射狀態轉換和守衛條件。
協定設計
視覺化網路協定狀態、連線生命週期和通訊狀態機。對於嵌入式系統和物聯網裝置程式設計至關重要。
遊戲開發
建模角色狀態、遊戲模式和關卡進度。為 AI 行為和遊戲機制設計有限狀態機。
核心功能
狀態類型
支援簡單狀態、複合狀態以及初始、最終和選擇偽狀態等特殊狀態。
轉換守衛
使用守衛條件和在狀態變化期間執行的操作定義條件轉換。
巢狀狀態
創建具有父狀態和子狀態的分層狀態機，用於建模複雜行為。
並發狀態
為具有並發行為的系統建模並行狀態機和正交區域。
最佳實踐
從簡單開始
從高階狀態開始，逐步細化。使用複合狀態在需要之前隱藏複雜性。
將狀態命名為條件
使用形容詞或過去分詞（例如「活動」、「暫停」、「已完成」）而不是動詞。
記錄轉換
用事件、守衛條件和操作標記所有轉換。每個箭頭都應該講述一個清晰的故事。
避免狀態爆炸
如果有太多狀態，尋找模式來組合它們或使用狀態變數。