關於 Stately
About
Stately 是什麼
Stately 是開在瀏覽器裡的工具，用來畫狀態機與狀態圖，也就是描述應用程式如何從一個狀態走到下一個狀態的圖。這家公司同時維護 XState，一套把這些圖當成真實程式碼執行的開源 JavaScript 函式庫。Stately Studio 是圍繞這套函式庫的付費產品：編輯器、模擬器，加上匯出與同步功能。它最早是 XState 視覺化工具，如今成了團隊共用的狀態圖工具。
它要解決的是走鐘。設計檔案裡的圖說一套，程式碼寫另一套，往往等到 bug 回報才有人發現。Stately 讓一份狀態機當唯一來源，往兩個方向投射：團隊看得懂的圖，以及應用程式跑得動的 TypeScript。改了圖，匯出的程式碼也跟著改。
三個限制決定誰用得上。你得對狀態機有點概念，事件、守門條件、巢狀狀態是這工具每天的詞彙。免費版停在兩個公開專案與三台狀態機。AI 生成標示為實驗功能，產出請當成有人審過的第一版草稿。
開始使用
- 開啟 state.new，直接進到 Stately Studio 編輯器，不必安裝。要儲存時再登入。
- 建立流程。把狀態拖到畫布上，在中間加上事件，用平常的詞替轉移命名。也可以寫一段描述，讓 AI 流程生成器先畫一版。
- 切到 Simulate 模式，用滑鼠點過每個事件。你會看到哪些轉移被觸發，以及狀態機卡在哪裡。
- 把狀態機匯出成 JavaScript 或 TypeScript，或連接 GitHub 讓檔案與儲存庫同步。
- 用 Team 方案邀同事進來，把專案可見性設為私人，再指派編輯者或檢視者角色。
產品資訊
快速了解 Stately 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 前端開發者：React 狀態機是核心用法，Vue 或 Svelte 也一樣，因為匯出的程式碼在任何 JavaScript 環境都能跑在 XState 上。先摸熟事件與轉移，操作才會順。
- 產品經理與設計師：不必寫程式就能把結帳或註冊流程畫出來，再以圖的形式交付。免費版限制了能保留多少專案。
- QA 工程師：生成的測試路徑會把流程變成一張待測清單。這項功能放在 Pro 方案。
- 需要共用流程的平台團隊：團隊專案有擁有者、管理員、編輯者與檢視者角色，讓同一張圖成為共同基準。要建立自己的團隊得用 Team 方案。
任務
- 為多步驟註冊或付款建模：巢狀狀態能處理重試、取消與錯誤分支，簡單流程圖表達不了這些。
- 從文字生成狀態機：AI 流程生成器會給你一批可編輯的狀態與轉移，而不是空白畫布。它發明的每個守門條件都要自己看過。
- 記錄後端工作流程：同一個編輯器也能畫伺服器端流程，匯出的狀態機可以在 Node 裡執行。
- 稽核既有的狀態程式碼：Stately 能視覺化 Redux 與 Zustand 的邏輯，老 reducer 於是可以變成一張看得懂的圖。
情境
- 在衝刺規劃裡爭論邊界情況：圖先一步定案，不必等到有人動手寫 reducer。
- 需要給利害關係人看的審查：Pro 能生成 React 介面並即時執行狀態機，比任何截圖都清楚。
- 重構舊功能前的整理：版本紀錄與匯出的 markdown 留下每個階段的邏輯樣貌。
主要功能
拖放編輯器與 Design、Simulate 兩種模式
畫布就是產品本身。你把狀態放上去、拉出轉移、直接改事件名稱，側邊面板處理守門條件、動作與描述。Design 用來建構，Simulate 用來一個事件一個事件走。兩種模式都不要求先寫程式，設計師因此能和工程師改同一份檔案。
以 AI 生成
用兩句話描述流程，Stately 就長出一台有狀態、事件與轉移的狀態機。你也可以選一台現成的機器再要求修改，例如加上重試分支。每次指令都留在歷史裡，每次生成也自動存成一個版本，隨時能重開。這項功能是實驗性質，每月額度有限，而且修改流程時狀態機定義會送到 OpenAI。
可執行的原型與即時模擬
模擬不是放投影片。Stately 能為狀態機生成 React 介面，審查的人按的是真按鈕，觸發的是真轉移。Pro 帳號還有即時模擬，邊改邊跑。團隊老是把圖讀錯時，這是最快讓人看懂「付款到一半按取消」會發生什麼的方式。
XState 匯出與程式碼同步
每一台狀態機都能匯出成 JavaScript 或 TypeScript，跑在 Stately 維護的開源函式庫 XState 上。沒有綁死這回事：程式碼在 Node 腳本、React 應用或後端 worker 都能用。付費方案可以連接 GitHub 或用 CLI 讓狀態機與儲存庫同步，圖與程式碼的修改雙向流動。
測試路徑、版本與活文件
Pro 帳號能生成測試路徑，列出狀態機可能走的路線，讓測試者知道該試什麼。版本紀錄保留可還原的快照，編輯器則能把流程匯出成 markdown 故事、Mermaid 圖或 JSON。加上 Figma 畫框，圖還能帶著設計脈絡一起走。
專案、團隊與存取控制
專案把相關的狀態機收在一起，也決定誰看得到。公開專案會出現在 Discover 頁面，未列出專案靠連結開啟，私人專案留在團隊裡。角色分擁有者、管理員、編輯者與檢視者。Enterprise 再加上單一登入、稽核紀錄、自訂主機，以及把 Stately 嵌進自家應用的選項。
優缺點
優點
- 圖與程式碼來自同一份來源，匯出後跑在開源 XState 上，想走人也不必重寫應用。
- AI 生成解決空白畫布的問題，指令歷史加上自動版本讓草稿比對很省事。
- 免費版就包含程式碼匯出與 VS Code 擴充套件，拿一個真實功能來試流程已經夠用。
- Simulate 模式在進程式碼審查前就抓出死路與到不了的狀態。
- Enterprise 涵蓋 SSO、稽核與自訂主機，對受監管的團隊有實際意義。
缺點
- 免費版停在兩個公開專案與三台狀態機，每個 fork 都算進額度。私人工作要 Pro，每月 39 美元，年付每月 33 美元。
- AI 生成是實驗功能且有額度。修改既有流程時，狀態機定義會離開你的帳號送到 OpenAI，某些資安團隊會有疑問。
- 工具預設你懂狀態圖。產品經理拖得動方塊，但巢狀與平行狀態得花一兩次摸索。
- 程式化存取走 GitHub 同步與 CLI。想要 REST API 讀專案資料的團隊，簽下去之前先跟 Stately 確認。
常見問題
免費。免費版給兩個公開專案，包含 Drafts 專案，以及三台狀態機。編輯器、公開狀態機的模擬、程式碼匯出與 VS Code 擴充套件都包含在內。Pro 每月 39 美元，年付則每月 33 美元，取消專案與狀態機上限，並加上私人專案與 AI 功能。
相關內容
探索與 Stately 相關的工具、技能與文章。
Stately 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。