Zustand は、クリック可能なステートチャートとして企業プロセスを可視化します。エディタは、確立されたデスクトップおよびモバイルのワークフローを維持します。
左側にプロパティ
右側にアプリプレビュー
下部にテンプレートドック
キャンバスは、単一選択・複数選択、ダブルクリック、ドラッグ、パン、ホイールズーム、矩形選択に対応
タッチは、ダブルタップ、長押しドラッグ、パン、ピンチズームに対応
テンプレート、キャンバス、編集、アプリ用のモバイルビュー
公開プロダクト契約には、自由に使用できる5つの基本プリセットと、9つの直接録音プリセットが含まれています。キャンバス、ドロワー、入力システムはこれとは独立しています。
ステートとトランジションは、実際のプロセスを表します。
アプリフローは、常に現在のエディタモデルをレンダリングし、そのプロセスを正確にクリックして進めることができます。ステートが録音されたか、インポートされたか、手動で変更されたかは関係ありません。
録音は、ブラウザ拡張機能を介して通常のChrome/Edgeタブで実行されます。拡張機能がインストールされていない場合、レコーダーは統合されたダウンロードとインストール手順を直接表示します。
レコーダーは、リプレイの真実として、クリーンアップされた生のアクションのみを、ウェブサイトの割り当て、クリック/入力ターゲット、タイミングとともに保存します。前回のアクション以降のすべてのポインターおよびスクロール移動は、次のクリック/入力/キーステートにタイムスタンプ付きのパスとして保持されます。移動だけでは追加のステートは生成されません。録音がスクロールの直後に終了した場合、その最後の、そうでなければ失われる終了のみがスクロールステートとして保存されます。アクションステートごとに、実際のウェブサイト部分のGIFが証拠として生成されます。DOMコピーやチェックポイントは保存されません。
各生のアクションは、生成されたステートにrecorded_inputとして直接保存されます。ステートとトランジションは、録音中に同じエディタモデル内で成長します。リロード後、このブループリント自体がリプレイのソースになります。
完了は録音を自動的に引き継ぎます。アプリプレビューで再生を開始すると、録音されたステートフローが自動的に開始され、エディタ内のステートIDに従います。手動でのクリックは不要です。
5つの基本は、見出し、ボタン、テキストフィールド、ドロップダウン、チェックボックスです。録音されたステートは、同じグローバルな生のアクションから直接、ウェブサイト開始、クリック、テキスト入力、保護された入力、選択変更、チェックボックス設定、オプション選択、キー押下、またはスクロールとして表示されます。プリセットタイプはrecorded_actionとrecorded_inputから導出され、2番目の真実として保存されることはありません。
Related MCP server: Signavio MCP Server
通常のフローは意図的に短くしています。
URLを入力し、録音を選択します。拡張機能がインストールされていない場合、ターゲットタブは開きません。レコーダーは統合されたダウンロードとインストール手順を直接表示します。
インストール後、再確認を選択し、録音開始を選択します。ウェブサイトは通常のブラウザタブで開きます。
ウェブサイトを通常どおり操作します。実際のブラウザアクションは、タイミング、ターゲットロケーター、および可能な場合はカーソルまたはスクロールパスとともに、スリムなステートトランジションとしてキャンバスにライブで書き込まれます。
エディタでウェブサイトリプレイを再生すると、同じウェブサイトが開き、保存された生のアクションがタイミングどおりに実行されます。
エクスポートされたステートブループリントは、エディタでステートを読み込むを使用してインポートされます。ファイルには決定論的な生のアクションがすでにステートデータに含まれているため、リロード後もウェブサイトリプレイを再生が利用可能です。古いwebsite-flow.jsonパッケージは、互換性のあるインポートとして引き続き可能です。
既にコンテンツのあるチャートが存在する場合、Zustandは録音を開始する前に一度、それを置き換えてよいか確認します。明示的なキャンセルで以前のモデルを復元できます。
これにより、ターゲットウェブサイトは、既存のCookie/ログインコンテキストを持つ実際のユーザーブラウザを認識します。サーバー側のボットブラウザ、レコーダーセッション、サーバー側のリプレイはありません。
state-blueprint-definition、schemaVersion: 2: 正規のmodelを持つエディタプロジェクト
flow/1: 小さな公開プロダクト契約
website-recording/1: 移植可能な録音パッケージ
website-recording/1には、クリーンアップされた生のアクションclick、input、key、および終了フォールバックとしてのscrollと、URL/タイミングメタデータのみが含まれます。記録された場合、タイムスタンプ付きのカーソルパス、絶対scrollPath、および0から1に制限されたターゲット位置relativeX/relativeYは、次に実行されるアクションに属します。グローバルアクションステートには、実際の可視ウェブサイトセクションのGIFとしてrecording_evidenceも含まれます。この視覚的証拠はリプレイ入力になることはありません。直接プリセット表示はこの生のアクションから導出され、ステートにプリセットIDを生成したり、2番目の録音ツリーを生成したりしません。DOM/HTMLコピー、チェックポイント、フィンガープリントは明示的に除外されます。
ウェブサイトリプレイ中、拡張機能は各アクションの前にURLとターゲットロケーターをチェックします。小さなURL/DOMの逸脱がある場合、互換性のあるターゲットを検索してフローを続行します。単一のステップが実行できなくなった場合、そのステップのみが視覚的にマークされ、スキップされます。ターゲットタブは診断のために表示されたままになり、エディタに戻るを提供します。
最初のステップは、ブラウザレディゲートの後、追加のアイドル時間が最大1.5秒で開始されます。録音に含まれるタブの開始/読み込み時間は2回待機されません。後続のユーザーの一時停止は保持され、リプレイオーバーレイに表示されて通知されます。移動の一時停止は、長いスローモーションの移動を生成する代わりに、カーソルまたはスクロール位置を保持します。
前提条件: Node.js 24。
npm ci
npm run build:index
npm run test:serverブラウザテストには、Playwrightは開発/CIツールとしてのみ使用されます。
npx playwright install chromium
npm run test:browserランタイムとエディタをローカルで起動します。
npm run server:start
node tests/serve-state.mjsエディタ: http://127.0.0.1:8124/state.html
ランタイム: http://127.0.0.1:8788/healthz
GitHub Pagesは、エディタ、アプリ、レコーダーを提供します。realtime.digitalisierungsplanung.deは以下のみを提供します。
リリースヘルス
プロダクト契約
公開画像URLの制限付きインポート
サーバー側のレコーダーブラウザ、レコーダーセッション、サーバーリプレイはありません。
Pages配信契約は、エディタ、アプリ、レコーダーを不変のパス/releases/release-N/から読み込みます。すでに読み込まれた不変リリースは、ランタイム依存なしで起動します。一時的なリゾルバ障害が発生した場合、エントリポイントは静的Pagesマーカーを使用し、アプリをブロックしません。パイプラインは最初にソースコミットをテストし、次に単調なrelease-Nコミットを生成し、本番の収束を待ちます。
サーバーの自動デプロイは、健全なチェックアウトを変更する前に、完全に公開されたバンドルをチェックします。不完全または遅延したPagesバージョンはログに記録され、次のタイマー実行で再チェックされます。10個の不変リリースがロールバック用に保持されます。デプロイメントマーカーは、ランタイムと契約のチェックが成功した後にのみ進められます。
フロントエンドリリースには、index.html、state.html、recorder.html、release-version.js、browser-recorder-extension.zip、INSTALL-BROWSER-RECORDER.mdが含まれます。マニフェストは、これらの6つのファイルをこの順序で指定します。
state.html – ビジュアルエディタと生成されたアプリプレビュー
recorder.html – 拡張機能レコーダー、決定論的な生のアクションキャプチャ、ライブ同期
scripts/write-pages-release.mjs – 不変のフロントエンドリリースを構築
server/server.js – ヘルス、契約、安全な画像インポートのための小さなランタイム
server/product-contract.js と server/preset-catalog.js – 最小契約、5つの基本、9つの直接契約準拠の録音プリセット
server/deploy.sh と server/auto-deploy.sh – グリーンリリースデプロイとロールバック
tests/local-browser-recorder.spec.js – レコーダー統合と決定論的な生のアクション契約
scripts/production-smoke.mjs – 本番リリースチェック
This server cannot be deployed
AI-callable tools for API mocking, testing, monitoring, security, and automation.
Give your AI agents the tools to build, manage, and run automation workflows.
Composable APIs for document extraction, image transformation, and document & sheet generation.
Manage products, EU Digital Product Passports, operator parties, and GS1 EPCIS supply-chain events.
