Stately

キャンバスそのものが製品だ。状態を置き、遷移を引き、イベント名をその場で直す。ガード、アクション、説明は横のパネルで扱う。Design は組み立て用、Simulate はイベントを 1 つずつたどる用だ。どちらも最初にコードを要求しない。だからデザイナーがエンジニアと同じファイルを触れる。

2 文ほどでフローを説明すれば、状態、イベント、遷移を持つマシンを組み上げる。既存のマシンを選び、再試行の分岐を足すといった変更を頼むこともできる。指示は履歴に残り、生成のたびに自動でバージョンが保存され、後から開き直せる。実験的機能で、月ごとの回数に上限があり、フローを変更するときはマシン定義が OpenAI に送られる。

シミュレーションはスライドショーではない。マシン用の React UI を生成するので、レビューする人は本物のボタンを押し、本物の遷移を起こせる。Pro なら編集中のマシンをそのまま動かすライブシミュレーションも使える。図の読み違いが続くチームにとって、決済の途中でキャンセルしたら何が起きるかを見せる最短の方法だ。

どのマシンも JavaScript か TypeScript として書き出せ、Stately が保守するオープンソースの XState 上で動く。囲い込みはない。Node のスクリプトでも、React アプリでも、バックエンドの worker でも動く。有料プランでは GitHub か CLI でリポジトリと同期でき、図とコードの変更が双方向に流れる。

Pro アカウントはテストパスを生成できる。マシンが通り得る経路を並べるので、テスターは何を試すべきか分かる。バージョン履歴は復元できるスナップショットを残し、エディタはフローを markdown のストーリー、Mermaid 図、JSON として書き出す。Figma のフレームを置けば、図はデザインの文脈ごと持ち運べる。

プロジェクトは関連するマシンをまとめ、誰に見せるかを決める。公開は Discover ページに並び、限定公開はリンクで開き、非公開はチーム内に留まる。ロールは所有者、管理者、編集者、閲覧者の 4 つ。Enterprise ではシングルサインオン、監査ログ、独自ホスティング、自社アプリへの埋め込みが加わる。