Zustand · Digitalisierungsplanung

Zustand visualizes company processes as clickable state charts. The editor preserves the established desktop and mobile workflow:

• Properties on the left

• App preview on the right

• Templates dock at the bottom

• Canvas with single and multi-selection, double-click, drag, pan, wheel zoom, and rectangle select

• Touch with double-tap, hold-to-drag, pan, and pinch zoom

• Mobile views for templates, canvas, editing, and app

The public product contract contains the five freely usable basic presets and nine direct recording presets. The canvas, drawer, and input system remains independent of this.

Product core

1. States and transitions represent a real process.

2. App flow always renders the current editor model and lets you click through exactly this process – regardless of whether states were recorded, imported, or manually changed.

3. Recording runs via the browser extension in a normal Chrome/Edge tab. Without an installed extension, the recorder directly shows the integrated download and installation instructions.

4. The recorder stores only cleaned raw actions with website assignment, click/input target, and timing as the replay truth. All pointer and scroll movements since the previous action are retained as timestamped paths in the next click/input/key state; movement alone does not create additional states. If the recording ends directly after a scroll, only this final, otherwise lost completion is saved as a scroll state. In addition, a real website partial GIF is created as evidence for each action state; DOM copies or checkpoints are not stored.

5. Each raw action is stored directly in the generated state as recorded_input; states and transitions grow in the same editor model during recording. After a reload, this blueprint itself is the replay source.

6. Done automatically adopts the recording. In the app preview, Play starts the recorded state flow independently and follows the state IDs in the editor; no manual clicking is needed.

The five basics are heading, button, text field, dropdown, and checkbox. Recorded states are directly represented from the same global raw action as Website start, Click, Enter text, Protected input, Change selection, Set checkbox, Choose option, Press key, or Scroll. The preset type is derived from recorded_action and recorded_input and is not stored as a second truth.

Related MCP server: Signavio MCP Server

Record website

The normal flow is deliberately short:

1. Enter the URL and choose Record. If the extension is not installed, no target tab opens: the recorder directly shows the integrated download and installation instructions.

2. After installation, choose Check again and then Start recording. The website then opens in a normal browser tab.

3. Use the website normally. Every real browser action is written live to the canvas as a slim state transition with timing, target locator, and – if available – cursor or scroll path.

4. Play website replay in the editor opens the same website and executes the stored raw actions with their timing.

An exported state blueprint is imported in the editor via Load state. The file already contains the deterministic raw actions in the state data; afterwards, Play website replay is available again even after a reload. Older website-flow.json packages remain possible as a compatible import.

If a content chart already exists, Zustand asks once before starting whether the recording may replace it. An explicit cancellation can restore the previous model.

This way, the target website sees the real user browser with its existing cookie/login context; there is no server-side bot browser, no recorder sessions, and no server-side replay.

Contracts

• state-blueprint-definition, schemaVersion: 2: editor project with a canonical model

• flow/1: small public product contract

• website-recording/1: portable recording package

website-recording/1 contains only the cleaned raw actions click, input, key, and scroll as a closing fallback, as well as URL/timing metadata. If captured, the timestamped cursor path, the absolute scrollPath, and the target position relativeX/relativeY limited to 0 to 1 belong to the next executed action. The global action state additionally carries its recording_evidence as a GIF of the real visible website section; this visual evidence never becomes replay input. The direct preset representation is derived from this raw action and creates neither a preset ID in the state nor a second recording tree. DOM/HTML copies, checkpoints, and fingerprints are explicitly excluded.

During website replay, the extension checks URL and target locator before each action. For minor URL/DOM deviations, it searches for a compatible target and continues the flow; if a single step can no longer be executed, only that step is visibly marked and skipped. The target tab remains visible for diagnosis and offers Back to editor.

The first step starts after the browser-ready gate at the latest after 1.5 seconds of additional idle time. The tab start/load time included in the recording is not waited through a second time. Later user pauses are preserved and visibly announced in the replay overlay; movement pauses hold the cursor or scroll position instead of creating a long slow-motion journey.

Details: docs/state-contract.md.

Develop locally

Prerequisite: Node.js 24.

npm ci
npm run build:index
npm run test:server

For browser tests, Playwright is used exclusively as a development/CI tool:

npx playwright install chromium
npm run test:browser

Start runtime and editor locally:

npm run server:start
node tests/serve-state.mjs

• Editor: http://127.0.0.1:8124/state.html

• Runtime: http://127.0.0.1:8788/healthz

Production

GitHub Pages delivers editor, app, and recorder. realtime.digitalisierungsplanung.de delivers only:

• Release health

• Product Contract

• Limited import of public image URLs

There is no server-side recorder browser, no recorder sessions, and no server replay.

The Pages delivery contract loads editor, app, and recorder from the immutable path /releases/release-N/. Already loaded immutable releases start without runtime dependency; in the event of a temporary resolver failure, the entry point uses the static Pages marker and does not block the app. The pipeline first tests the source commit, then creates a monotonic release-N commit and waits for production convergence.

The server auto-deploy checks the complete published bundle before modifying the healthy checkout. Incomplete or delayed Pages versions are only logged and checked again on the next timer run. Ten immutable releases are kept for rollbacks; the deployment marker is only advanced after successful runtime and contract checks.

A frontend release contains index.html, state.html, recorder.html, release-version.js, as well as browser-recorder-extension.zip and INSTALL-BROWSER-RECORDER.md; the manifest lists these six files in this order.

• digitalisierungsplanung.de

• Runtime-Health

• Product Contract

Relevant files

• state.html – visual editor and generated app preview

• recorder.html – extension recorder, deterministic raw action capture, and live sync

• scripts/write-pages-release.mjs – builds the immutable frontend release

• server/server.js – small runtime for health, contract, and secure image import

• server/product-contract.js and server/preset-catalog.js – minimal contract, five basics, and nine direct contract-compliant recording presets

• server/deploy.sh and server/auto-deploy.sh – green release deploy and rollback

• tests/local-browser-recorder.spec.js – recorder integration and deterministic raw action contract

• scripts/production-smoke.mjs – production release check