Zustand визуализирует бизнес-процессы как кликабельные диаграммы состояний. Редактор сохраняет устоявшийся рабочий процесс для настольных и мобильных устройств:
Свойства слева
Предпросмотр приложения справа
Панель шаблонов снизу
Холст с одиночным и множественным выбором, двойным щелчком, перетаскиванием, панорамированием, масштабированием колесом и прямоугольным выделением
Сенсорное управление с двойным касанием, удержанием для перетаскивания, панорамированием и масштабированием щипком
Мобильные представления для шаблонов, холста, редактирования и приложения
Публичный продуктовый контракт содержит пять свободно используемых базовых пресетов и девять прямых пресетов записи. Система холста, панелей и ввода от этого не зависит.
Состояния и переходы отражают реальный процесс.
Поток приложения всегда отображает текущую модель редактора и позволяет пройти именно этот процесс — независимо от того, были ли состояния записаны, импортированы или изменены вручную.
Запись выполняется через расширение браузера в обычной вкладке Chrome/Edge. Без установленного расширения рекордер сразу показывает встроенную загрузку и инструкцию по установке.
Рекордер сохраняет в качестве истины для воспроизведения только очищенные необработанные действия с привязкой к веб-сайту, целью клика/ввода и таймингом. Все движения указателя и прокрутки с момента предыдущего действия сохраняются как временные метки в следующем состоянии клика/ввода/клавиши; само по себе движение не создает дополнительных состояний. Если запись заканчивается сразу после прокрутки, сохраняется только этот последний, иначе потерянный финальный фрагмент как состояние прокрутки. Для каждого состояния действия дополнительно создается настоящее частичное GIF-изображение веб-сайта в качестве доказательства; копии DOM или контрольные точки не сохраняются.
Каждое необработанное действие сохраняется как recorded_input непосредственно в созданном состоянии; состояния и переходы растут во время записи в той же модели редактора. После перезагрузки этот чертеж сам является источником воспроизведения.
Готово автоматически принимает запись. В предпросмотре приложения Воспроизвести запускает записанный поток состояний самостоятельно и следует идентификаторам состояний в редакторе; ручной клик не требуется.
Пять базовых элементов: заголовок, кнопка, текстовое поле, выпадающий список и флажок. Записанные состояния отображаются из того же глобального необработанного действия непосредственно как Старт веб-сайта, Клик, Ввод текста, Защищенный ввод, Изменение выбора, Установка флажка, Выбор опции, Нажатие клавиши или Прокрутка. Тип пресета выводится из recorded_action и recorded_input и не сохраняется как вторая истина.
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 относятся к следующему выполненному действию. Глобальное состояние действия дополнительно несет recording_evidence как GIF реального видимого фрагмента веб-сайта; это визуальное доказательство никогда не становится входными данными для воспроизведения. Прямое представление пресета выводится из этого необработанного действия и не создает ни идентификатора пресета в состоянии, ни второго дерева записи. Копии DOM/HTML, контрольные точки и отпечатки явно исключены.
При воспроизведении веб-сайта расширение проверяет URL и целевой локатор перед каждым действием. При небольших отклонениях URL/DOM оно ищет совместимую цель и продолжает процесс; если отдельный шаг больше не выполним, он только видимо помечается и пропускается. Целевая вкладка остается видимой для диагностики и предлагает Вернуться в редактор.
Первый шаг запускается после готовности браузера не позднее чем через 1,5 секунды дополнительного простоя. Время запуска/загрузки вкладки, включенное в запись, не ожидается второй раз. Более поздние паузы пользователя сохраняются и заметно объявляются в оверлее воспроизведения; паузы движения фиксируют положение курсора или прокрутки, а не создают длинную замедленную поездку.
Подробности: docs/state-contract.md.
Предварительное условие: 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 предоставляет только:
Health релиза
Продуктовый контракт
Ограниченный импорт публичных URL изображений
Нет серверного браузера записи, нет сессий записи и нет серверного воспроизведения.
Контракт доставки Pages загружает редактор, приложение и рекордер из неизменяемого пути /releases/release-N/. Уже загруженные неизменяемые релизы запускаются без зависимости от среды выполнения; при временном сбое резолвера точка входа использует статический маркер Pages и не блокирует приложение. Конвейер сначала тестирует исходный коммит, затем создает монотонный коммит release-N и ожидает производственной конвергенции.
Автоматическое развертывание сервера проверяет полный опубликованный пакет, прежде чем изменять здоровый checkout. Неполные или задержанные версии Pages только регистрируются и проверяются снова при следующем запуске таймера. Десять неизменяемых релизов сохраняются для откатов; маркер развертывания переключается только после успешной проверки среды выполнения и контракта.
Релиз фронтенда содержит index.html, state.html, recorder.html, release-version.js, а также browser-recorder-extension.zip и INSTALL-BROWSER-RECORDER.md; манифест перечисляет эти шесть файлов в этом порядке.
state.html – визуальный редактор и сгенерированный предпросмотр приложения
recorder.html – рекордер расширения, детерминированный сбор необработанных действий и живая синхронизация
scripts/write-pages-release.mjs – собирает неизменяемый релиз фронтенда
server/server.js – небольшая среда выполнения для health, контракта и безопасного импорта изображений
server/product-contract.js и server/preset-catalog.js – минимальный контракт, пять базовых и девять прямых пресетов записи, соответствующих контракту
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.
