从零开始的 SPAC 编程构建 BPM 设计器实战

ooderAgent 耗时 4 个月完成整体架构95% AI 代码率BPM 设计器重构耗时 1 周100% AI 代码率。这不是教程而是 ooder 团队真实的技能架构升级记录。1. 缘起为什么需要重构2. 对话架构如何设计3. 实战NLP 插件如何构建4. 难点插件迁移的挑战5. 成果1 周的奇迹摘要ooderAgent 项目历时 4 个月完成整体架构构建AI 代码接管率达到 95% 以上。作为 ooderAgent 技能架构的核心组件BPM 设计器需要在 1 周内完成从传统 Swing 应用到 H5 Web 应用的完全重构AI 代码接管率 100%。本次重构的核心驱动力是 ooderAgent 的技能架构需求设计器必须支持 skills 能力架构融合 LLM 能力支持 NLP 模式流程建模。原来的 BPD流程定义工具已经是一个成熟的产品拥有完善的交互设计、多达 100 的插件包括高级插件、动态插件支持。本文记录了如何在 1 周内完成这个看似不可能的任务重点分享了大量插件的动态迁移、NLP 插件的全新构建等核心挑战与解决方案。所有代码采用 MIT 开源底层支撑包通过 Maven 中央仓库统一发布。1. 缘起为什么需要重构ooderAgent 的技能架构需求ooderAgent 是一个从底层协议开始从零构建的 AI 原生平台。在 4 个月的开发周期中我们建立了一套完整的 skills 能力架构ooderAgent 技能架构 ├── _base/ # 基础层 ├── _system/ # 系统层30 技能 ├── _drivers/ # 驱动层BPM、VFS、LLM 等 ├── _business/ # 业务层 ├── capabilities/ # 能力层 └── scenes/ # 场景层重构的核心原因技能架构要求BPM 设计器必须作为 skill-bpm 融入 ooderAgent 生态LLM 能力融合需要原生支持 LLM 能力而非外挂式集成NLP 模式流程建模支持自然语言创建、修改、优化流程动态插件支持继承原有 100 插件的能力支持热插拔原有 BPD 的成熟度原来的 BPD流程定义工具可不是什么 demo✅ 完善的交互设计✅ 100 个插件基础插件、高级插件、动态插件✅ 成熟的 XPDL 解析和序列化能力✅ 完整的流程版本管理✅ 权限控制机制✅ 时限配置、表单配置、服务配置等高级功能挑战不是从零开始而是在成熟产品基础上的架构升级。我们的目标很简单但也很困难1 周时间完成从 Swing 到 H5 的完全重构100% AI 代码率完全由 AI 生成代码技能架构兼容完美融入 ooderAgent 生态NLP 插件全新构建基于 llm-chat 的流程 NLP 插件不是在 IDE 里使用而是全新构建2. 对话架构如何设计第一次对话项目启动第一天我在 trae sole 里输入了问题trae sole 对话界面 - 第一次架构设计讨论我ooderAgent 需要 BPM 设计器支持 skills 架构融合 LLM 能力支持 NLP 模式流程建模。原有 BPD 有 100 插件如何设计架构trae sole建议采用 skills 架构 插件化设计技能层作为 skill-bpm 融入 ooderAgent 生态前端层H5 Canvas 插件化面板核心层保留 XPDL 能力新增 SPAC 标准NLP 层基于 llm-chat 构建流程 NLP 插件插件层迁移原有 100 插件支持动态加载关键点使用 SPAC 模式让 AI 理解业务NLP 插件独立于 IDE基于 llm-chat 构建动态插件迁移是最大挑战技术栈选型层级技术为什么选它技能框架ooderAgent skills融入生态支持动态加载前端框架原生 JavaScript (ES6)轻量、高性能、无框架依赖图形引擎Canvas 2D流程图绘制性能优异数据管理Store 模式单向数据流状态清晰数据适配Adapter 模式XPDL - SPAC 转换插件系统Plugin 架构继承原有 100 插件NLP 能力skill-llm-chat基于 llm-chat 构建 NLP 插件后端服务Java Spring Boot兼容现有 BPM 引擎100% 的代码由 AI 生成这个技术栈功不可没。1 周迁移计划Day 1架构搭建 核心模型 ├── 创建 skill-bpm 项目结构 ├── 实现 ProcessDef、ActivityDef、RouteDef 核心模型 └── 建立 SPAC 标准定义 Day 2-3插件迁移最艰难的部分 ├── 迁移基础插件20 个 ├── 迁移高级插件30 个 └── 迁移动态插件50 个 Day 4NLP 插件构建 ├── 基于 llm-chat 构建流程 NLP 插件 ├── 实现自然语言创建流程 └── 实现自然语言修改流程 Day 5集成测试 优化 ├── 功能测试 ├── 性能优化 └── 文档编写3. 实战NLP 插件如何构建这是本次重构的重头戏也是最大的创新点。NLP 插件的定位重要这个 NLP 插件不是在 IDE 里使用而是全新构建基于 ooderAgent llm-chat 的流程专用插件。基于 llm-chat 的架构class BPMNLPPlugin { constructor(llmChatService) { this.llmChat llmChatService; this.contextBuilder new BPMContextBuilder(); this.actionExecutor new BPMActionExecutor(); } // 处理自然语言请求 async handleNaturalLanguage(message, context) { // 构建 BPM 专用上下文 const bpmContext this.contextBuilder.build({ processId: context.processId, activityId: context.activityId, currentUser: context.currentUser, capabilities: [BPM_NLP] }); // 调用 llm-chat const response await this.llmChat.chat({ message: message, context: bpmContext, skillId: skill-bpm, actions: [ create_process, create_activity, update_activity, delete_activity, create_route, update_route, validate_process ] }); // 执行动作 return await this.actionExecutor.execute(response.actions); } }上下文构建策略NLP 插件的核心是让 LLM 理解 BPM 的专业术语和流程结构class BPMContextBuilder { build(options) { return { // 流程上下文 process: { id: options.processId, name: options.processName, type: BPMN2.0, version: options.version || 1 }, // 活动上下文 activities: options.activities?.map(a ({ id: a.activityId, name: a.name, type: a.activityType, category: a.category, position: a.position, properties: a.properties })), // 路由上下文 routes: options.routes?.map(r ({ id: r.routeId, from: r.from, to: r.to, condition: r.condition, type: r.routeType })), // 能力上下文 capabilities: { type: BPM_NLP, supported: [ 流程创建, 活动管理, 路由配置, 权限设置, 时限配置, 表单配置, 服务集成, 流程验证 ] }, // 用户上下文 user: { id: options.currentUser, role: options.userRole, permissions: options.permissions } }; } }NLP 插件对话界面 - 自然语言创建流程实战对话示例示例 1自然语言创建流程用户创建一个请假审批流程NLP 插件好的已为您创建请假审批流程【流程结构】开始 → 提交申请 → 部门经理审批 → HR 备案 → 结束【已配置插件】✓ 表单插件请假申请表单✓ Agent 插件审批 Agent支持 EMAIL、NOTIFICATION✓ 时限插件24 小时内处理✓ 权限插件部门经理审批权限✓ 服务插件HR 系统对接流程已创建请查看设计器。示例 2自然语言修改流程用户如果请假超过 3 天需要总经理审批NLP 插件已为您添加总经理审批环节【修改内容】添加活动总经理审批添加路由条件部门经理审批 → 总经理审批${leaveDays 3}部门经理审批 → HR 备案${leaveDays 3}配置总经理审批插件✓ Agent 插件高级审批 Agent✓ 权限插件总经理角色权限✓ 通知插件邮件 短信通知【新流程结构】开始 → 提交申请 → 部门经理审批├─(3 天)→ 总经理审批 ─┐└─(≤3 天)→ HR 备案 ──┘→ 结束修改已完成请查看设计器。4. 难点插件迁移的挑战挑战 1:100 插件的动态迁移问题原有 BPD 有 100 个插件包括基础插件、高级插件、动态插件如何快速迁移解决分类迁移 自动化生成。插件分类迁移策略 基础插件20 个 ├── 基本信息插件 ├── 时限配置插件 ├── 权限配置插件 └── 表单配置插件 迁移方式AI 自动生成人工验证 高级插件30 个 ├── 服务集成插件 ├── 监听器插件 ├── 公式配置插件 └── 组织机构插件 迁移方式保留核心逻辑重构 UI 动态插件50 个 ├── 自定义字段插件 ├── 业务规则插件 ├── 第三方集成插件 └── 行业专用插件 迁移方式提供标准接口插件开发者自行迁移挑战 2动态插件的运行时加载问题动态插件需要在运行时加载如何保证加载顺序和依赖管理解决插件注册表 依赖注入。class PluginRegistry { constructor() { this.plugins new Map(); this.dependencies new Map(); } // 注册插件 register(pluginId, pluginClass, dependencies []) { this.plugins.set(pluginId, pluginClass); this.dependencies.set(pluginId, dependencies); } // 加载插件支持依赖解析 async load(pluginId) { const deps this.dependencies.get(pluginId) || []; // 先加载依赖 for (const depId of deps) { if (!this.plugins.has(depId)) { throw new Error(Missing dependency: ${depId}); } } const pluginClass this.plugins.get(pluginId); const plugin new pluginClass(); // 注入依赖 for (const depId of deps) { const depPlugin await this.load(depId); plugin[depId] depPlugin; } return plugin; } }挑战 3:NLP 插件与传统插件的协同问题NLP 插件如何与传统插件协同工作解决统一的插件接口 事件总线。class PluginEventBus { constructor() { this.listeners new Map(); } // 订阅事件 subscribe(eventType, callback) { if (!this.listeners.has(eventType)) { this.listeners.set(eventType, []); } this.listeners.get(eventType).push(callback); } // 发布事件 async publish(eventType, data) { const callbacks this.listeners.get(eventType) || []; for (const callback of callbacks) { await callback(data); } } }挑战 4性能优化问题100 插件同时加载如何保证性能解决懒加载 虚拟 DOM。// 懒加载策略 class LazyPluginLoader { constructor() { this.loadedPlugins new Map(); this.loadingPromises new Map(); } async load(pluginId, pluginFactory) { // 已加载的插件直接返回 if (this.loadedPlugins.has(pluginId)) { return this.loadedPlugins.get(pluginId); } // 正在加载的插件等待完成 if (this.loadingPromises.has(pluginId)) { return this.loadingPromises.get(pluginId); } // 开始加载 const promise (async () { const plugin await pluginFactory(); this.loadedPlugins.set(pluginId, plugin); this.loadingPromises.delete(pluginId); return plugin; })(); this.loadingPromises.set(pluginId, promise); return promise; } } // 虚拟 DOM 优化渲染 class VirtualDOMRenderer { constructor(container) { this.container container; this.vdom null; } render(plugins) { const newVdom this.createVdom(plugins); if (!this.vdom) { // 首次渲染 this.container.innerHTML this.toHTML(newVdom); } else { // 差异更新 const patches this.diff(this.vdom, newVdom); this.patch(this.container, patches); } this.vdom newVdom; } createVdom(plugins) { return { tag: div, children: plugins.map(p ({ tag: div, props: { className: p.className }, children: [p.content] })) }; } }5. 成果1 周的奇迹1 周的成绩单开发周期1 周7 天AI 代码接管率100%迁移插件数量100 个基础插件20 个高级插件30 个动态插件50 个NLP 插件1 个基于 llm-chat 全新构建代码行数约 15,000 行技能兼容完美融入 ooderAgent 生态核心成果技能架构兼容作为 skill-bpm 完美融入 ooderAgent 生态插件系统迁移100 插件全部迁移完成支持动态加载NLP 插件构建基于 llm-chat 全新构建流程 NLP 插件LLM 能力融合原生支持 LLM 能力而非外挂式集成性能优化懒加载 虚拟 DOM保证 100 插件流畅运行技术亮点SPAC 模式让 AI 理解 BPM 业务逻辑的标准模式动态插件架构支持运行时加载和热插拔NLP 插件基于 llm-chat 的流程专用 NLP 插件事件总线NLP 插件与传统插件的协同机制性能优化懒加载 虚拟 DOM保证流畅体验最终 BPM 设计器界面 - 100 插件全部加载开源承诺所有代码采用MIT 开源协议商业友好企业可以自由使用社区共建欢迎所有开发者参与透明可信所有实现细节公开可见所有底层支撑包已统一发布至Maven 中央仓库搜索net.ooder即可引入使用。写在最后1 周100 插件迁移100% AI 代码率NLP 插件全新构建。这看起来不可能的任务我们完成了。靠的不是加班而是正确的架构skills 架构 插件化设计AI 的加持100% AI 代码生成经验的积累ooderAgent 4 个月的技术沉淀团队的协作人类架构师 AI 编码者的默契配合BPM 设计器的重构只是 ooderAgent 技能架构的一个缩影。在 ooderAgent 的生态中还有更多这样的技能在不断生长。这不是结束而是开始。欢迎加入这场变革。开源协议MITMaven 中央仓库搜索net.ooder技术交流欢迎提交 Issue 和 Pull Request“The best way to predict the future is to create it.”“预测未来的最好方式就是创造未来。”作者ooder 团队 | 时间2026 年 | 地点中国