Zolkit

Mermaid 狀態圖檢視器

在瀏覽器中渲染 Mermaid 狀態圖與狀態機。預覽轉換並匯出為 SVG 或 PNG。免費線上工具。

預覽

輸入 Mermaid 程式碼以預覽您的圖表

狀態圖透過顯示所有可能的狀態以及由事件觸發的狀態之間的轉換，來模擬系統的行為。它們對於設計有限狀態機、模擬 UI 元件的生命週期、記錄訂單工作流程以及指定嵌入式系統行為至關重要。 當開發人員詢問諸如「模擬付款訂單的狀態」、「顯示 React 元件的生命週期」或「設計交通號誌的狀態機」等問題時，Mermaid 的 `stateDiagram-v2` 語法經常由 AI 助理生成。將輸出貼到 Zolkit 中，可以立即顯示轉換是否完整、是否有任何狀態無法到達，以及主要流程和錯誤流程是否正確連接。 Zolkit 的狀態圖檢視器支援 `stateDiagram-v2` 的功能，包括初始和終止狀態（`[*]`）、轉換標籤、複合狀態（巢狀狀態圖）、使用 `--` 的並行狀態、選擇偽狀態和註釋。該檢視器可渲染真實應用程式中常見的簡單有限自動機和複雜的分層狀態機。

相關圖表

← Mermaid 圖表檢視器Mermaid 流程圖檢視器Mermaid 循序圖檢視器Mermaid 類別圖檢視器

免費線上 Mermaid 圖表檢視器與匯出工具

Zolkit 的 Mermaid 圖表檢視器可讓您貼上任何 Mermaid 程式碼，並立即看到渲染後的圖表 — 無需安裝、無需註冊、無需上傳伺服器。所有操作都在您的瀏覽器中進行，這是驗證 Claude、ChatGPT 或 Gemini 生成的 AI 圖表最快的方式。支援所有主要的 Mermaid 圖表類型：流程圖、時序圖、類別圖、ER 圖、甘特圖、狀態圖、心智圖、Git 圖、圓餅圖和時間軸。

即時預覽

輸入時自動渲染圖表，具有 300 毫秒的延遲，確保流暢體驗。

100% 私密

所有渲染都在您的瀏覽器中使用 mermaid.js 進行。您的程式碼絕不會傳送至任何伺服器。

匯出 SVG 與 PNG

將您的圖表下載為清晰的向量 SVG 或高解析度 2× PNG，適用於文件和簡報。

所有 Mermaid 圖表類型

支援流程圖、時序圖、類別圖、ER 圖、甘特圖、心智圖、Git 圖等。

適用於 AI 圖表

為 AI 時代而生 — 直接預覽由 Claude、ChatGPT、Gemini 或任何 LLM 生成的圖表。

永久免費

無需帳戶、無使用限制、無浮水印。Zolkit 的 Mermaid 檢視器永久免費。

如何預覽 Mermaid 圖表

  1. 1

    將您的 Mermaid 程式碼貼到左側的編輯器中 — 您可以從 AI 助理複製，或手動編寫。

  2. 2

    圖表會立即在右側的預覽面板中渲染。如果出現語法錯誤，將會顯示說明問題的訊息。

  3. 3

    點擊「匯出 SVG」或「匯出 PNG」即可下載您的圖表檔案，用於文件、簡報或分享。

常見問題

stateDiagram 和 stateDiagram-v2 有何區別？

`stateDiagram-v2` 是 Mermaid v10+ 中目前推薦的語法。它增加了對複合（巢狀）狀態、並行區域、選擇偽狀態、分叉和合併的支援，這些功能是原始 `stateDiagram` 所沒有的。v1 語法仍可向後相容，但所有新圖表都應使用 `stateDiagram-v2` 來存取完整的功能集。

如何在 Mermaid 中顯示巢狀（複合）狀態？

使用大括號的 `state` 區塊：`state Processing { [*] --> Validating \n Validating --> Charging \n Charging --> [*] }`。外部狀態 'Processing' 包含其自身的內部狀態機。複合狀態模擬複雜的工作流程，其中高層級狀態具有內部子流程，例如在「處理中」狀態下經歷多個子步驟的訂單。

如何為狀態轉換添加標籤？

在轉換箭頭後加上冒號：`Idle --> Loading : 使用者提交表單`。標籤記錄觸發轉換的事件或條件。標籤良好的轉換將狀態圖變成可執行的規格 — 開發人員可以直接將每個標籤對應到其實作中的函式呼叫、事件處理器或 API 回應。

什麼是並行狀態？何時應使用它們？

並行狀態（在複合狀態內使用 `--` 分隔符號）模擬系統中同時執行的部分。例如，音樂播放器可能有並行狀態用於播放（播放中/暫停）和顯示（全螢幕/正常）。當兩個獨立的行為共存，且每個行為都需要自己的狀態機時，應使用並行狀態，而不是將每個組合模擬為獨立的頂層狀態。