什麼是狀態圖？
狀態圖，也稱為狀態機圖，視覺化物件或系統可能處於的不同狀態以及如何回應事件在狀態之間轉換。它們對於建模生命週期行為、工作流和複雜條件邏輯至關重要。每個狀態代表一個穩定的條件，而轉換顯示導致狀態變化的觸發器。
編輯與預覽
使用 Mermaid 語法創建 狀態圖，即時查看效果。
常見使用場景
應用狀態管理
建模 UI 狀態、表單驗證流程和應用程式模式。對於在 React 或 Vue 等前端框架中設計狀態機至關重要。
工作流建模
設計審批工作流、訂單處理狀態和工單生命週期管理。為業務流程映射狀態轉換和守衛條件。
協定設計
視覺化網路協定狀態、連線生命週期和通訊狀態機。對於嵌入式系統和物聯網裝置程式設計至關重要。
遊戲開發
建模角色狀態、遊戲模式和關卡進度。為 AI 行為和遊戲機制設計有限狀態機。
核心功能
狀態類型
支援簡單狀態、複合狀態以及初始、最終和選擇偽狀態等特殊狀態。
轉換守衛
使用守衛條件和在狀態變化期間執行的操作定義條件轉換。
巢狀狀態
創建具有父狀態和子狀態的分層狀態機，用於建模複雜行為。
並發狀態
為具有並發行為的系統建模並行狀態機和正交區域。
最佳實踐
從簡單開始
從高階狀態開始，逐步細化。使用複合狀態在需要之前隱藏複雜性。
將狀態命名為條件
使用形容詞或過去分詞（例如「活動」、「暫停」、「已完成」）而不是動詞。
記錄轉換
用事件、守衛條件和操作標記所有轉換。每個箭頭都應該講述一個清晰的故事。
避免狀態爆炸
如果有太多狀態，尋找模式來組合它們或使用狀態變數。
探索其他圖表類型
流程圖
使用節點和方向箭頭視覺化流程、工作流程和演算法。非常適合商業流程和決策樹。
時序圖
記錄不同角色或系統之間隨時間的互動。適用於 API 文件和系統設計。
類別圖
以類別、屬性和關係建模物件導向系統。軟體架構規劃不可或缺的工具。
甘特圖
規劃和追蹤專案時程及任務依賴關係。非常適合專案管理和排程。
ER 圖
設計包含實體和關係的資料庫架構。適用於資料庫建模和文件。
使用者旅程
繪製使用者在各接觸點的體驗和互動。非常適合 UX 設計和顧客旅程分析。
Git 圖
視覺化 Git 分支策略和提交歷史。有助於說明版本控制工作流程。
心智圖
組織創意、腦力激盪和建立層次化視覺結構。適合規劃和知識管理。
圓餅圖
以圓形圖表展示資料比例分布。適合顯示百分比和市場份額分析。
時間線
沿時間軸視覺化事件和里程碑。適合專案歷史和路線圖展示。
看板
將任務按工作流階段組織到欄中。適合敏捷專案管理和任務追蹤。
四象限圖
在雙軸網格上繪製項目進行比較和優先順序排定。適合功能優先順序和策略分析。
桑基圖
用比例箭頭視覺化節點間的流量。適合能源流、預算分配和轉化漏斗。
XY 圖表
建立帶有可自訂座標軸的長條圖和折線圖。適合資料視覺化和趨勢分析。
區塊圖
用行列排列的區塊建構結構化佈局。適合系統架構和元件概覽。
架構圖
使用服務圖示和連線設計雲端和系統架構。適合基礎設施文件。
封包圖
視覺化網路協定封包結構和位元級欄位佈局。適合網路協定文件。