狀態圖
「狀態圖是一種在計算機科學和相關領域中用於描述系統行為的圖表類型。狀態圖要求所描述的系統由有限數量的狀態組成；有時確實是這種情況，而有時這是一個合理的抽象。」維基百科
Mermaid 可以渲染狀態圖。其語法盡量與 plantUml 中使用的語法一致，這樣可以讓使用者更容易在 mermaid 和 plantUml 之間共享圖表。
較舊的渲染器
在狀態圖中，系統以「狀態」來描述，以及一個「狀態」如何透過「轉換」變更為另一個「狀態」。上面的範例圖顯示了三種狀態：靜止、移動和碰撞。您從 靜止 狀態開始。從 靜止 狀態，您可以變更為 移動 狀態。從 移動 狀態，您可以變更回 靜止 狀態或 碰撞 狀態。從 靜止 到 碰撞 沒有轉換。（如果您靜止不動，您就不會碰撞。）
狀態
可以用多種方式宣告狀態。最簡單的方法是用一個 id 定義一個狀態
另一種方式是使用 state 關鍵字和如下所示的描述
另一種使用描述定義狀態的方法是定義狀態 id，後接冒號和描述
轉換
轉換是當一個狀態進入另一個狀態時的路徑/邊緣。這使用文字箭頭「-->」來表示。
當您定義兩個狀態之間的轉換，而這些狀態尚未定義時，未定義的狀態會以轉換中的 id 來定義。您稍後可以將描述新增至以此方式定義的狀態。
可以將文字新增至轉換以描述其表示的內容
開始和結束
有兩個特殊狀態表示圖表的開始和停止。這些是用 [*] 語法寫成的，並且轉換到它的方向將它定義為開始或停止狀態。
複合狀態
在狀態圖的實際應用中，您經常會得到多維圖，因為一個狀態可以有幾個內部狀態。在這個術語中，這些稱為複合狀態。
為了定義複合狀態，您需要使用 state 關鍵字，後接一個 id，以及 {} 之間的複合狀態主體。您可以在單獨的行上為複合狀態命名，就像簡單狀態一樣。請參閱以下範例
您可以執行多個圖層
您也可以在複合狀態之間定義轉換
您不能在屬於不同複合狀態的內部狀態之間定義轉換
選擇
有時您需要建立兩個或多個路徑之間的選擇模型，您可以使用 <<choice>> 來執行此操作。
分支
可以使用 <<fork>> <<join>> 在圖表中指定分支。
註解
有時沒有什麼比便利貼更好的了。狀態圖也是如此。
在這裡，您可以選擇將註解放在節點的右側或左側。
並行處理
如同在 plantUml 中一樣，您可以使用 -- 符號指定並行處理。
設定圖表方向
使用狀態圖時，您可以使用 direction 陳述式來設定圖表的渲染方向，如本範例所示。
註解
註解可以輸入在狀態圖表中，剖析器將會忽略這些註解。註解需要位於單獨的行上，並且必須以 %%（雙百分號）作為開頭。註解開始後到下一個換行符號之間的任何文字都將被視為註解，包括任何圖表語法
使用 classDefs 設定樣式
與其他圖表（如流程圖）一樣，您可以在圖表本身中定義樣式，並將該命名樣式應用於圖表中的一個或多個狀態。
以下是目前狀態圖 classDefs 的限制
- 無法應用於開始或結束狀態
- 無法應用於或在複合狀態內
這些正在開發中，將在未來的版本中提供。
您可以使用 classDef 關鍵字定義樣式，它是「類別定義」（其中「類別」是指類似 CSS 類別 的東西）的縮寫，後接樣式的名稱，然後是一個或多個屬性-值組。每個屬性-值組都是一個有效的 CSS 屬性名稱，後接冒號 (:)，然後是一個值。
以下是一個只有一組屬性-值組的 classDef 範例
classDef movement font-style:italic;其中
- 樣式的名稱是
movement - 唯一的屬性是
font-style，其值是italic
如果您想要有多個屬性-值組，那麼您可以在每個屬性-值組之間放置逗號 (,)。
以下是一個有三組屬性-值組的範例
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow其中
- 樣式的名稱是
badBadEvent - 第一個屬性是
fill，其值是#f00 - 第二個屬性是
color，其值是white - 第三個屬性是
font-weight，其值是bold - 第四個屬性是
stroke-width，其值是2px - 第五個屬性是
stroke，其值是yellow
將 classDef 樣式應用於狀態
有兩種方法可以將 classDef 樣式應用於狀態
- 使用
class關鍵字將 classDef 樣式應用於單一陳述式中的一個或多個狀態，或 - 使用
:::運算子將 classDef 樣式應用於在轉換陳述式中使用（例如，使用指向/來自另一個狀態的箭頭）的狀態
1. class 陳述式
class 陳述式會告訴 Mermaid 將命名的 classDef 應用於一個或多個類別。其形式為
class [one or more state names, separated by commas] [name of a style defined with classDef]以下是一個將 badBadEvent 樣式應用於名為 Crash 的狀態的範例
class Crash badBadEvent以下是一個將 movement 樣式應用於 Moving 和 Crash 這兩個狀態的範例
class Moving, Crash movement以下是一個顯示使用範例的圖表。請注意，Crash 狀態已應用兩個 classDef 樣式：movement 和 badBadEvent
2. 使用 ::: 運算子將樣式套用到狀態
您可以使用 ::: (三個冒號) 運算子將 classDef 樣式套用到狀態。語法如下：
[state]:::[style name]您可以在使用類別的語句中的圖表中使用此功能。這包括起始和結束狀態。例如：
狀態名稱中的空格
可以通過先使用 ID 定義狀態，然後稍後引用該 ID，將空格添加到狀態中。
在以下範例中，有一個 ID 為 yswsii 且描述為 Your state with spaces in it 的狀態。定義後，yswsii 用於第一個轉換中的圖表 ([*] --> yswsii) 以及轉換到 YetAnotherState (yswsii --> YetAnotherState)。(yswsii 已被設定樣式，使其與其他狀態不同。)