sequential-workflow-designer

环境要求

• 一个可运行 TypeScript 的前端 Web 工程
• 现代浏览器或移动设备（设计器兼容两者）
• 项目中能引入 JS/TS 与 CSS 文件
• 可选：Angular、React 或 Svelte 工程（官方提供对应示例）

安装与启动步骤

1. 1准备前端工程

   该设计器是纯 TypeScript 编写的纯前端组件，需放进一个可运行 TS 的 Web 应用中，无需任何后端服务。

2. 2安装依赖包

   README 安装章节只说明把 JS/TS 和 CSS 文件加入项目，包名取自 Usage 示例的 import 语句。

   npm install sequential-workflow-designer

   复制

3. 3准备画布容器

   在页面中放置一个容器元素，示例使用 id 为 placeholder 的节点作为设计器挂载点。

   const placeholder = document.getElementById('placeholder');

   复制

4. 4定义工作流模型

   按 README 结构准备 definition：properties 放根属性，sequence 数组放步骤列表，整体可序列化为 JSON。

   const definition = {
     properties: {
       myProperty: 'my-value'
     },
     sequence: []
   };

   复制

5. 5编写配置对象

   configuration 中所有字段均为可选；theme 默认 light，isReadonly 默认 false，undoStackSize 默认 0 即禁用撤销。

   const configuration = {
     theme: 'light',
     isReadonly: false,
     undoStackSize: 10
   };

   复制

6. 6创建设计器实例

   导入 Designer 并调用 Designer.create 把定义与配置挂载到容器上，页面即出现流程画布。

   import { Designer } from 'sequential-workflow-designer';
   
   const designer = Designer.create(placeholder, definition, configuration);

   复制

7. 7监听定义变更

   订阅 onDefinitionChanged 事件，在用户拖拽、新增或删除步骤时拿到最新定义并自行保存。

   designer.onDefinitionChanged.subscribe(event => {
     // ...
   });

   复制

关键配置

如何确认成功

页面出现流程图设计器画布，拖拽或增删步骤时 onDefinitionChanged 回调被触发，即表示接入成功。

常见问题

注意事项

• README 未给出具体的 CSS 文件路径和包管理器命令，安装细节请以官方文档 nocode-js.com 为准。
• 设计器零外部依赖、使用 SVG 渲染，不会引入额外的运行时依赖。
• 流程定义以 JSON 存储，可自由对接任意后端与执行引擎。
• 更多用法可参考仓库 examples 目录与在线示例页面。