Zustand visualiza los flujos de trabajo de la empresa como diagramas de estados clicables. El editor conserva el flujo de trabajo establecido para escritorio y móvil:
Propiedades a la izquierda
Vista previa de la aplicación a la derecha
Panel de plantillas abajo
Lienzo con selección simple y múltiple, doble clic, arrastre, paneo, zoom con rueda y selección rectangular
Táctil con doble toque, mantener para arrastrar, paneo y zoom con pellizco
Vistas móviles para plantillas, lienzo, edición y aplicación
El contrato público de producto contiene los cinco presets básicos de uso libre y nueve presets de captura directa. El sistema de lienzo, panel lateral y entrada es independiente de ello.
Los estados y transiciones representan un proceso real.
Flujo de la aplicación renderiza siempre el modelo actual del editor y permite recorrer exactamente ese proceso con clics, independientemente de si los estados fueron capturados, importados o modificados manualmente.
Captura se ejecuta a través de la extensión del navegador en una pestaña normal de Chrome/Edge. Sin la extensión instalada, el grabador muestra directamente la descarga integrada y las instrucciones de instalación.
El grabador guarda como verdad de reproducción únicamente acciones brutas depuradas con asignación de sitio web, objetivo de clic/entrada y sincronización. Todos los movimientos de puntero y desplazamiento desde la acción anterior se conservan como rutas con marca de tiempo en el siguiente estado de clic/entrada/tecla; el movimiento por sí solo no genera estados adicionales. Si la captura termina justo después de un desplazamiento, solo se guarda ese último cierre, que de otro modo se perdería, como estado de desplazamiento. Junto a cada estado de acción se genera además un GIF parcial real del sitio web como evidencia; no se guardan copias del DOM ni puntos de control.
Cada acción bruta se guarda como recorded_input directamente en el estado generado; los estados y transiciones crecen durante la captura en el mismo modelo del editor. Tras una recarga, este blueprint es en sí mismo la fuente de reproducción.
Listo asume la captura automáticamente. En la vista previa de la aplicación, Reproducir inicia el flujo de estados grabado de forma autónoma y sigue los IDs de estado del editor; no es necesario hacer clic manualmente.
Los cinco básicos son título, botón, campo de texto, desplegable y casilla de verificación. Los estados capturados se representan directamente desde la misma acción bruta global como Inicio de sitio web, Clic, Escribir texto, Entrada protegida, Cambiar selección, Marcar casilla, Elegir opción, Pulsar tecla o Desplazarse. El tipo de preset se deriva de recorded_action y recorded_input y no se guarda como segunda verdad.
Related MCP server: Signavio MCP Server
El flujo normal es deliberadamente corto:
Introducir la URL y elegir Capturar. Si la extensión no está instalada, no se abre ninguna pestaña de destino: el grabador muestra directamente la descarga integrada y las instrucciones de instalación.
Tras la instalación, elegir Comprobar de nuevo y luego Iniciar captura. El sitio web se abre entonces en una pestaña normal del navegador.
Usar el sitio web con normalidad. Cada acción real del navegador se escribe en vivo en el lienzo como una transición de estado ligera, con sincronización, localizador de destino y, si está disponible, ruta de cursor o desplazamiento.
Reproducir sitio web en el editor abre el mismo sitio web y ejecuta las acciones brutas guardadas con su sincronización.
Un blueprint de estado exportado se importa en el editor mediante Cargar estado. El archivo ya contiene las acciones brutas deterministas en los datos de estado; después, Reproducir sitio web vuelve a estar disponible incluso tras una recarga. Los paquetes antiguos website-flow.json siguen siendo compatibles como importación.
Si ya existe un gráfico con contenido, Zustand pregunta una vez antes de comenzar si la captura puede reemplazarlo. Una cancelación explícita puede restaurar el modelo anterior.
Así, el sitio web de destino ve el navegador real del usuario con su contexto existente de cookies/inicio de sesión; no hay navegador bot en el servidor, ni sesiones de grabación, ni reproducción en el servidor.
state-blueprint-definition, schemaVersion: 2: proyecto de editor con un model canónico
flow/1: pequeño contrato público de producto
website-recording/1: paquete de captura transportable
website-recording/1 contiene solo las acciones brutas depuradas click, input, key y, como respaldo final, scroll, así como metadatos de URL/sincronización. Si se capturan, la ruta del cursor con marca de tiempo, el scrollPath absoluto y la posición de destino relativeX/relativeY limitada a 0–1 pertenecen a la siguiente acción ejecutada. El estado de acción global lleva además su recording_evidence como GIF del fragmento visible real del sitio web; esta evidencia visual nunca se convierte en entrada de reproducción. La representación directa del preset se deriva de esta acción bruta y no genera ni un ID de preset en el estado ni un segundo árbol de captura. Las copias de DOM/HTML, puntos de control y huellas digitales están explícitamente excluidas.
En la reproducción del sitio web, la extensión comprueba antes de cada acción la URL y el localizador de destino. En caso de pequeñas desviaciones de URL/DOM, busca un objetivo compatible y continúa el flujo; si un solo paso ya no se puede ejecutar, solo ese se marca visiblemente y se omite. La pestaña de destino permanece visible para el diagnóstico y ofrece Volver al editor.
El primer paso comienza después de la puerta de listo del navegador, como máximo después de 1,5 segundos adicionales de inactividad. El tiempo de inicio/carga de la pestaña incluido en la captura no se vuelve a esperar. Las pausas posteriores del usuario se conservan y se anuncian visiblemente en la superposición de reproducción; las pausas de movimiento mantienen la posición del cursor o del desplazamiento, en lugar de crear un largo recorrido en cámara lenta.
Detalles: docs/state-contract.md.
Requisito: Node.js 24.
npm ci
npm run build:index
npm run test:serverPara las pruebas del navegador, Playwright se usa exclusivamente como herramienta de desarrollo/CI:
npx playwright install chromium
npm run test:browserIniciar runtime y editor localmente:
npm run server:start
node tests/serve-state.mjsEditor: http://127.0.0.1:8124/state.html
Runtime: http://127.0.0.1:8788/healthz
GitHub Pages entrega editor, aplicación y grabador. realtime.digitalisierungsplanung.de entrega solo:
Salud de la versión
Contrato de producto
Importación limitada de URLs de imágenes públicas
No hay navegador de grabación en el servidor, ni sesiones de grabación, ni reproducción en el servidor.
El contrato de entrega de Pages carga editor, aplicación y grabador desde la ruta inmutable /releases/release-N/. Las versiones inmutables ya cargadas se inician sin dependencia del runtime; en caso de una falla temporal del resolutor, la entrada usa el marcador estático de Pages y no bloquea la aplicación. La canalización prueba primero el commit fuente, luego genera un commit monótono release-N y espera la convergencia de producción.
El despliegue automático del servidor verifica el paquete publicado completo antes de modificar el checkout saludable. Las versiones de Pages incompletas o retrasadas solo se registran y se vuelven a comprobar en la siguiente ejecución del temporizador. Se conservan diez versiones inmutables para rollbacks; el marcador de despliegue solo avanza después de una verificación exitosa del runtime y del contrato.
Una versión de frontend contiene index.html, state.html, recorder.html, release-version.js, así como browser-recorder-extension.zip e INSTALL-BROWSER-RECORDER.md; el manifiesto enumera estos seis archivos en este orden.
state.html – editor visual y vista previa generada de la aplicación
recorder.html – grabador de extensión, captura determinista de acciones brutas y sincronización en vivo
scripts/write-pages-release.mjs – construye la versión de frontend inmutable
server/server.js – pequeño runtime para salud, contrato e importación segura de imágenes
server/product-contract.js y server/preset-catalog.js – contrato mínimo, cinco básicos y nueve presets de captura directa conformes al contrato
server/deploy.sh y server/auto-deploy.sh – despliegue de versión verde y rollback
tests/local-browser-recorder.spec.js – integración del grabador y contrato determinista de acciones brutas
scripts/production-smoke.mjs – verificación de liberación en producción
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.
