Zustand는 회사 프로세스를 클릭 가능한 상태 차트로 시각화합니다. 편집기는 기존의 데스크톱 및 모바일 작업 흐름을 유지합니다:
왼쪽에 속성
오른쪽에 앱 미리보기
아래에 템플릿 도크
단일 및 다중 선택, 더블클릭, 드래그, 팬, 휠 줌 및 사각형 선택이 가능한 캔버스
더블탭, 길게 눌러 드래그, 팬 및 핀치 줌을 지원하는 터치
템플릿, 캔버스, 편집 및 앱을 위한 모바일 보기
공개 제품 계약에는 자유롭게 사용할 수 있는 5가지 기본 프리셋과 9가지 직접 녹화 프리셋이 포함되어 있습니다. 캔버스, 드로어 및 입력 시스템은 이와 독립적입니다.
상태와 전환은 실제 프로세스를 나타냅니다.
앱 흐름은 항상 현재 편집기 모델을 렌더링하고 정확히 그 프로세스를 클릭하여 진행할 수 있게 합니다 – 상태가 녹화되었는지, 가져왔는지, 수동으로 변경되었는지와 무관합니다.
녹화는 브라우저 확장 프로그램을 통해 일반 Chrome/Edge 탭에서 실행됩니다. 확장 프로그램이 설치되지 않은 경우, 레코더는 통합 다운로드 및 설치 안내를 직접 표시합니다.
레코더는 재생 진실로 정제된 원시 동작만을 웹사이트 매핑, 클릭/입력 대상 및 타이밍과 함께 저장합니다. 이전 동작 이후의 모든 포인터 및 스크롤 이동은 다음 클릭/입력/키 상태에 타임스탬프가 찍힌 경로로 유지됩니다. 이동만으로는 추가 상태가 생성되지 않습니다. 녹화가 스크롤 직후에 끝나면, 그 마지막으로 손실될 종료만 스크롤 상태로 저장됩니다. 각 동작 상태 옆에는 실제 웹사이트 부분 GIF가 증거로 생성됩니다. DOM 복사본이나 체크포인트는 저장되지 않습니다.
각 원시 동작은 생성된 상태에 recorded_input으로 직접 저장됩니다. 상태와 전환은 녹화 중에 동일한 편집기 모델에서 성장합니다. 다시 로드한 후 이 블루프린트 자체가 재생 소스입니다.
완료는 녹화를 자동으로 인계받습니다. 앱 미리보기에서 재생은 녹화된 상태 흐름을 독립적으로 시작하고 편집기의 상태 ID를 따릅니다. 수동 클릭은 필요하지 않습니다.
다섯 가지 기본 요소는 제목, 버튼, 텍스트 필드, 드롭다운 및 체크박스입니다. 녹화된 상태는 동일한 전역 원시 동작에서 직접 웹사이트 시작, 클릭, 텍스트 입력, 보호된 입력, 선택 변경, 체크박스 설정, 옵션 선택, 키 누르기 또는 스크롤로 표시됩니다. 프리셋 유형은 recorded_action 및 recorded_input에서 파생되며 두 번째 진실로 저장되지 않습니다.
Related MCP server: Signavio MCP Server
일반적인 흐름은 의도적으로 짧습니다:
URL을 입력하고 녹화를 선택합니다. 확장 프로그램이 설치되지 않은 경우 대상 탭이 열리지 않습니다. 레코더는 통합 다운로드 및 설치 안내를 직접 표시합니다.
설치 후 다시 확인을 선택한 다음 녹화 시작을 선택합니다. 웹사이트는 일반 브라우저 탭에서 열립니다.
웹사이트를 정상적으로 사용합니다. 각 실제 브라우저 동작은 타이밍, 대상 로케이터 및 가능한 경우 커서 또는 스크롤 경로와 함께 슬림한 상태 전환으로 캔버스에 실시간으로 기록됩니다.
편집기의 웹사이트 재생 재생은 동일한 웹사이트를 열고 저장된 원시 동작을 타이밍에 따라 실행합니다.
내보낸 상태 블루프린트는 편집기에서 상태 로드를 통해 가져옵니다. 파일에는 결정적 원시 동작이 이미 상태 데이터에 포함되어 있습니다. 그 후 웹사이트 재생 재생은 다시 로드한 후에도 다시 사용할 수 있습니다. 이전 website-flow.json 패키지는 호환 가능한 가져오기로 유지됩니다.
이미 콘텐츠 차트가 있는 경우 Zustand는 녹화를 시작하기 전에 한 번 교체해도 되는지 묻습니다. 명시적 취소는 이전 모델을 복원할 수 있습니다.
따라서 대상 웹사이트는 기존 쿠키/로그인 컨텍스트가 있는 실제 사용자 브라우저를 봅니다. 서버 측 봇 브라우저, 레코더 세션 또는 서버 측 재생이 없습니다.
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로 전달합니다. 이 시각적 증거는 재생 입력으로 사용되지 않습니다. 직접 프리셋 표시는 이 원시 동작에서 파생되며 상태에 프리셋 ID나 두 번째 녹화 트리를 생성하지 않습니다. 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는 다음만 제공합니다:
릴리스 상태
제품 계약
공개 이미지 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가 포함됩니다. 매니페스트는 이 여섯 파일을 이 순서로 나열합니다.
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.
