Skip to main content
Glama

Zustand · 数字化规划

Zustand 将公司流程可视化为可点击的状态图。编辑器保留了既定的桌面和移动工作流程:

  • 左侧属性

  • 右侧应用预览

  • 底部模板停靠区

  • 画布支持单选和多选、双击、拖拽、平移、滚轮缩放和矩形选择

  • 触控支持双击、长按拖拽、平移和捏合缩放

  • 用于模板、画布、编辑和应用的移动视图

公开的产品契约包含五个可自由使用的基础预设和九个直接录制预设。画布、抽屉和输入系统与此无关。

产品核心

  1. 状态和转换映射真实流程。

  2. App-Flow 始终渲染当前编辑器模型,并允许点击浏览该流程——无论状态是录制的、导入的还是手动修改的。

  3. 录制通过浏览器扩展在普通的 Chrome/Edge 标签页中进行。如果未安装扩展,录制器会直接显示内置的下载和安装说明。

  4. 录制器仅将清理后的原始操作(包含网站映射、点击/输入目标和时间)作为重放真相存储。自上次操作以来的所有指针和滚动移动都作为带时间戳的路径保留在下一个点击/输入/按键状态中;仅移动不会产生额外状态。如果录制在滚动后立即结束,则仅将该最后且否则会丢失的结束保存为滚动状态。每个操作状态还会生成一个真实的网站部分 GIF 作为证据;不保存 DOM 副本或检查点。

  5. 每个原始操作都作为 recorded_input 直接存储在生成的状态中;状态和转换在录制期间在同一编辑器模型中增长。重新加载后,此蓝图本身即为重放源。

  6. 完成自动接管录制。在应用预览中,播放独立启动录制的状态流,并遵循编辑器中的状态 ID;无需手动点击。

五个基础元素是标题、按钮、文本框、下拉框和复选框。录制的状态直接从同一全局原始操作表示为网站启动点击输入文本受保护输入更改选择设置复选框选择选项按键滚动。预设类型从 recorded_actionrecorded_input 派生,不存储为第二真相。

Related MCP server: Signavio MCP Server

录制网站

正常流程有意保持简短:

  1. 输入 URL 并选择录制。如果未安装扩展,则不会打开目标标签页:录制器直接显示内置的下载和安装说明。

  2. 安装后选择重新检查,然后开始录制。网站随后会在普通浏览器标签页中打开。

  3. 正常操作网站。每个真实的浏览器操作都会实时写入画布,作为精简的状态转换,包含时间、目标定位器以及(如果存在)光标或滚动路径。

  4. 编辑器中的播放网站重放会打开同一网站,并按其时间执行存储的原始操作。

导出的状态蓝图通过编辑器中的加载状态导入。该文件已包含状态数据中的确定性原始操作;之后,播放网站重放在重新加载后也可用。较旧的 website-flow.json 包仍可作为兼容导入。

如果已存在内容图表,Zustand 会在开始前询问一次是否允许录制替换它。显式取消可以恢复之前的模型。

这样,目标网站会看到真实的用户浏览器及其现有的 Cookie/登录上下文;没有服务器端机器人浏览器、没有录制器会话、也没有服务器端重放。

契约

  • state-blueprint-definition, schemaVersion: 2:具有规范 model 的编辑器项目

  • flow/1:小型公开产品契约

  • website-recording/1:可移植的录制包

website-recording/1 仅包含清理后的原始操作 clickinputkey 以及作为结束回退的 scroll,以及 URL/时间元数据。如果已捕获,则带时间戳的光标路径、绝对 scrollPath 以及限制在 01 之间的目标位置 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 版本仅被记录,并在下次定时器运行时重新检查。保留十个不可变发布用于回滚;部署标记仅在运行时和契约检查成功后才会推进。

前端发布包含 index.htmlstate.htmlrecorder.htmlrelease-version.js 以及 browser-recorder-extension.zipINSTALL-BROWSER-RECORDER.md;清单按此顺序列出这六个文件。

相关文件

  • state.html – 可视化编辑器和生成的应用预览

  • recorder.html – 扩展录制器、确定性原始操作捕获和实时同步

  • scripts/write-pages-release.mjs – 构建不可变的前端发布

  • server/server.js – 用于健康、契约和安全图片导入的小型运行时

  • server/product-contract.jsserver/preset-catalog.js – 最小契约、五个基础元素和九个符合契约的直接录制预设

  • server/deploy.shserver/auto-deploy.sh – 绿色发布部署和回滚

  • tests/local-browser-recorder.spec.js – 录制器集成和确定性原始操作契约

  • scripts/production-smoke.mjs – 生产发布检查

Related MCP Connectors

Related MCP Servers

  • F
    license
    Not graded
    quality
    D
    maintenance
    Enables creation, management, and execution of n8n workflows through a secure HTTP API. Provides tools to build workflows with schema validation, activate/deactivate them, and execute automation tasks programmatically.
    -
  • A
    license
    B
    quality
    C
    maintenance
    Enables AI assistants to interact with SAP Signavio Process Manager through its API, supporting operations like managing process models, folders, dictionary entries, and searching across business process content.
    23
    6 npm
    9
    ISC
  • F
    license
    B
    quality
    A
    maintenance
    Enables programmatic CAD modeling with Onshape's REST API, offering 45 tools for parametric sketches, feature management, assemblies, analysis, variables, and exports.
    48
    137
    -
  • F
    license
    Not graded
    quality
    F
    maintenance
    Enables AI-driven graphical diagram creation and manipulation using natural language, with support for BPMN workflows, analysis, and manual editing via the Model Context Protocol.
    1
    -