Stately logo

Statelyは、アプリや業務ロジックをstate machines、statecharts、actorsで設計できるビジュアルソフトウェアモデリングプラットフォーム。XStateを使った設計、シミュレーション、書き出し、実装に対応します。

Stately preview

Statelyとは

Statelyは、アプリや業務ロジックをstate machines、statecharts、actorsへと変換するためのビジュアルソフトウェアモデリングプラットフォームです。ドラッグ&ドロップエディターとXStateを組み合わせることで、チームはロジックを視覚的に設計し、コードで実行できます。

このサイトでは、設計、開発、テスト、ドキュメント全体にわたるロジックの共通の信頼できる情報源としてStatelyを位置づけています。ユーザーはノーコードでフローを作成し、シミュレーションし、コードやReactアプリを生成し、図と実装の整合性を長期的に保てます。

機能

共有ロジックをモデリングするためのビジュアルエディター

コード、図、ドキュメント、テスト生成を1つのワークスペースにまとめるドラッグ&ドロップエディターでロジックを構築できます。

シミュレーションモード

エディター内でstate machinesを直接シミュレーションできます。トリガーされたイベント、イベントログ、そしてマシンにエラーがない場合のイベントなし・遅延イベントの自動処理も含まれます。

コードとドキュメントのエクスポート

state machinesをJavaScript、TypeScript、JSON、Mermaid、Markdown、Storiesとして書き出し、プロジェクトをCodeSandboxまたはStackBlitzに送信できます。

AI支援生成

AIを使ってstate machines、React UI、コードを生成できます。料金プランごとに生成できる範囲が異なります。

バージョン管理とコードベース同期

バージョン管理で作業履歴を残し、上位プランでは非公開または未掲載プロジェクトを共有でき、GitHub Syncでコードベースとの整合性を保てます。

開発者向け統合

JavaScriptおよびTypeScriptアプリでXStateと併用でき、React、Vue、Svelteに対応し、エディターのワークフロー向けにVS Code拡張機能も用意されています。

一般的なユースケース

  • アプリとワークフローロジックのプロトタイピング

    ノーコードでフローを作成し、シミュレーションして状態変化を確認したうえで、実装前に反復できます。

  • チームレビューと要件整理

    ビジュアルエディターを使って、製品、デザイン、エンジニアリングの各チームで動作のあり方をそろえ、その後、図を信頼できる情報源として共有します。

  • AI支援の足場作成とコード引き渡し

    図からstate machines、Reactアプリ、コードを生成して、開発作業への引き渡しを加速します。

  • ドキュメントと仕様のエクスポート

    図やマシン定義をJavaScript、TypeScript、Mermaid、Markdown、Storiesなどの形式に書き出し、ドキュメントや納品に活用します。

  • 既存コードベースでの継続的な実装

    XState、GitHub Sync、React、Vue、Svelte、その他のJavaScriptアプリ向けフレームワーク対応を使って、モデルを既存のコードベースに接続します。

Pros and Cons

Pros

  • ビジュアルモデリング、コード書き出し、シミュレーションを1つのワークフローにまとめています。
  • オープンソースで、JavaScriptとTypeScriptをサポートするXStateと連携します。
  • React、Vue、Svelte、その他のJavaScriptランタイムを含む複数のフレームワークと環境をサポートします。
  • AI生成、Reactアプリ生成、テスト生成、GitHub Syncオプションが含まれます。
  • 公開プロジェクト向けの無料Communityプランがあります。

Cons

  • 共同作業や出力に関する一部の機能は有料プラン限定で、非公開プロジェクト、バージョン履歴、ライブシミュレーションモード、特定のエクスポート形式などが含まれます。
  • ドキュメントと料金ページはstate-machineベースのワークフローを強く前面に出しているため、汎用の図作成ツールを探しているチームには、製品がより特化的に感じられる場合があります。

FAQ

Stately Studioは何に使われますか?

Stately Studioは、アプリや業務ロジックをstate machines、statecharts、actorsとして構築するためのビジュアルソフトウェアモデリングプラットフォームです。ドキュメントではXStateと組み合わせるビジュアルエディターとして説明されていますが、まず概念を学ぶ段階ではXStateなしでも使用できます。

Stately Studioにはどのような機能がありますか?

ソースページには、ドラッグ&ドロップのビジュアルエディター、シミュレーションモード、コード書き出し、バージョン履歴、AI生成、GitHub Sync、Figma埋め込み、VS Code拡張機能が示されています。Reactアプリの生成やテスト生成にも対応しています。

Statelyには無料プランと有料プランがありますか?

料金ページには、公開プロジェクト向けの無料Communityプラン、非公開および未掲載プロジェクト向けのProfessionalプラン、チームで共有するプロジェクト向けのTeamプラン、カスタムオプション付きのEnterpriseプランが掲載されています。コンサルティングやワークショップ向けのサービス問い合わせ窓口もあります。

Statelyから何をエクスポートできますか?

エクスポートのドキュメントによると、マシンコードをJSON、JavaScript、TypeScript、Mermaid、Markdown beta、Stories betaで書き出せるほか、CodeSandboxやStackBlitzにもエクスポートできます。一部の書き出し形式と機能は上位プラン限定です。

既存のコードベースやツールと一緒にStatelyを使えますか?

ドキュメントでは、Stately StudioはXStateと組み合わせると最も強力だが、Stately Studioなしでコードベース内でXStateを使うこともできると説明されています。ホームページではReact、Vue、Svelte、その他のフレームワーク向けの統合が利用可能とされており、ドキュメントにはVS Code拡張機能も記載されています。

Quick Facts

カテゴリ
Developer Tool
主要製品
Visual software modeling platform
コアモデル
State machines, statecharts, and actors
主な利用者
Product, design, and engineering teams
対応プラットフォーム
Web app, XState, and VS Code extension
ソースドメイン
stately.ai

Stately の分析

Stately· 月間訪問数 7.8万· 世界ランキング #403,723

トラフィックデータは参考情報としてご利用ください。

月間訪問数
7.8万
世界ランキング
#403,723
カテゴリ順位
#6,017
直帰率
39.2%
平均滞在時間
02:45
訪問あたりのページ数
3.53

トラフィック推移

7.8万5.2万2.6万04月: 71,8884月5月: 70,7885月6月: 78,1536月
月間訪問数 - 3
4月71888
5月70788
6月78153

トラフィックソース

  • 直接流入37.2%
  • 検索14.0%
  • 参照元38.5%
  • ソーシャル8.98%
  • メール0.90%
  • アフィリエイト0.00%

主な地域

  • アメリカ合衆国35.3%
  • ポーランド11.1%
  • イギリス10.1%
  • ベトナム5.20%
  • カナダ4.14%
  • その他34.2%