LogicFlow 扩展包 logicflow/extension 完全指南安装、插件体系与源码架构解读【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow本文围绕 LogicFlow 官方扩展包 packages/extension/README.md 展开系统讲解logicflow/extension的安装方式、最小接入写法、插件能力全景与底层架构设计。读完你将掌握如何在一个已有logicflow/core项目中接入 BPMN、分组、泳道、小地图、快照等能力理解插件的LogicFlow.use注册机制并学会从源码层面定位与扩展官方插件。logicflow/extension是 LogicFlow 的官方扩展包它建立在logicflow/core之上聚合了 BPMN 支持、内置编辑器组件、辅助工具、可复用物料与更高层级的编辑插件。与 core 只负责画布 图元 事件的运行时不同extension 提供的都是可选能力——不安装它基础编辑器依然可以正常工作安装了它你可以按需挑选插件快速搭建出具备真实业务形态的流程图应用如 BPMN 工作流、泳道图、分组脑图等。一、扩展包是什么extension 在 LogicFlow 生态中的定位在 LogicFlow 的 monorepo 结构中logicflow/extension位于 packages/extension其职责边界在 packages/extension/ARCHITECTURE.md 中有明确定义这个包拥有什么BPMN 图元与 BPMN 数据适配器src/bpmn、src/bpmn-adapter、src/bpmn-elements、src/bpmn-elements-adapter内置编辑器 UI菜单menu、小地图mini-map、右键菜单context-menu、拖拽面板dnd-panel、选择辅助selection-select、高亮highlight等可选工具Label 文本、快照导出snapshot、流程路径flow-path、自动布局auto-layout、渐进连线proximity-connect等可复用物料与分组编辑能力泳道pool与动态分组dynamic-group。这个包不拥有什么基础编辑器的状态模型与注册原语属于 core工作流执行语义属于logicflow/engine框架适配层React/Vue 渲染由 node-registry 包负责。一句话概括extension 是叠加在 core 公开 API 之上的扩展层而不是第二个 core。所有扩展功能都应通过LogicFlow.use、lf.register等官方钩子组合进编辑器而不是侵入 core 的私有内部实现。二、安装显式安装 core 与 extension由于扩展包建立在logicflow/core之上使用方需要显式安装与其兼容的 core二者缺一不可。官方 README 给出了三种包管理器的安装命令npm install logicflow/core logicflow/extensionyarn add logicflow/core logicflow/extensionpnpm add logicflow/core logicflow/extension几点版本约定与构建产物说明依据 packages/extension/package.jsonlogicflow/core被声明为peerDependenciesworkspace:*发布后由使用方提供扩展包本身不重复打包 core包同时输出多种产物main指向lib/index.jsCommonJS、module指向es/index.jsESM、unpkg/jsdelivr指向dist/index.min.jsUMDtypes指向lib/index.d.ts打包脚本由rssrepo 级脚本统一编排build:esm用tsc --module esnext产出es/build:cjs用tsc --module commonjs产出lib/build:umd用 rollup 产出dist/。需要特别提醒的是使用组件类插件如 DndPanel、Control、MiniMap、Menu时需要引入样式文件。示例项目中普遍采用import logicflow/extension/es/index.css的写法例如 examples/feature-examples/src/pages/extensions/control/index.tsx 与 examples/feature-examples/src/pages/extensions/dnd-panel/index.tsx 中均如此引入。样式源文件位于 packages/extension/src/index.less 与 packages/extension/src/style/index.less构建时会被抽离为独立 CSS。三、最小接入插件注册与 LogicFlow.useREADME 中给出了最短可运行示例——接入 BPMN 数据适配器import LogicFlow from logicflow/core; import { BpmnAdapter } from logicflow/extension; LogicFlow.use(BpmnAdapter);这里使用了LogicFlow.use静态方法完成插件注册。注册之后lf实例就具备了 BPMN 数据的导入导出能力。如果要让实例真正画得出 BPMN 图元开始事件、结束事件、排他网关、用户任务、服务任务、顺序流还需要注册 BPMN 元素插件BpmnElement。从源码 packages/extension/src/bpmn/index.ts 可以看到BpmnElement的注册行为const BpmnElement: ExtensionDefinition { pluginName: bpmnElement, install(lf) { lf.setTheme(theme) lf.register(StartEvent) lf.register(EndEvent) lf.register(ExclusiveGateway) lf.register(UserTask) lf.register(ServiceTask) // 支持自定义bpmn元素的边 if (!lf.options.customBpmnEdge) { lf.register(SequenceFlow) lf.setDefaultEdgeType(bpmn:sequenceFlow) } }, }这段实现揭示了几点关键设计插件即安装函数 元信息pluginName是插件的唯一标识install(lf)在use时被调用可以访问到lf实例上的setTheme、register、setDefaultEdgeType等公开 APIcustomBpmnEdge开关如果业务方希望自己定义边类型可通过该配置跳过内置 SequenceFlow 注册与默认边类型设置BpmnAdapter与BpmnElement的分工前者负责数据层LogicFlow GraphData ⇄ BPMN XML/JSON后者负责图元层BPMN 元素的注册与主题。数据适配器的双向转换逻辑位于 packages/extension/src/bpmn-adapter/index.ts其内部约定值得注意BPMN XML 属性在 JSON 中以-前缀表示如-id、-nameXML 同名子节点多次出现时解析为数组导入/导出对数组与单对象均做兼容BPMN 画布坐标以元素左上角为基准LogicFlow 以元素中心为基准转换时需做坐标基准换算文本内容导出时做 XML 转义、导入时反转义保证、、等特殊字符不丢失。四、能力全景从 src/index.ts 看扩展包导出了什么扩展包的公共出口是 packages/extension/src/index.ts它把六大类能力统一导出。下面按模块职责逐一说明每个导出子模块都有对应源码目录便于按需查阅4.1 BPMN 支持模块源码目录职责bpmnpackages/extension/src/bpmnBPMN 插件注册与内置 BPMN 图元StartEvent、EndEvent、ExclusiveGateway、UserTask、ServiceTask、SequenceFlowbpmn-adapterpackages/extension/src/bpmn-adapterLogicFlow 图数据 ⇄ BPMN 数据XML/JSON双向转换额外导出xml2json、json2xml工具bpmn-elementspackages/extension/src/bpmn-elementsBPMN 元素的声明式定义presets另有 README 说明bpmn-elements-adapterpackages/extension/src/bpmn-elements-adapter与 bpmn-elements 配套的适配器turbo-adapterpackages/extension/src/turbo-adapterTurbo 数据格式适配4.2 编辑交互组件components组件源码目录作用Controlpackages/extension/src/components/control画布缩放、适应、撤销、重做工具栏Menupackages/extension/src/components/menu节点/边右键菜单ContextMenupackages/extension/src/components/context-menu通用上下文菜单DndPanelpackages/extension/src/components/dnd-panel拖拽面板拖出节点到画布MiniMappackages/extension/src/components/mini-map小地图SelectionSelectpackages/extension/src/components/selection-select框选Highlightpackages/extension/src/components/highlight节点/边高亮以 Control 为例packages/extension/src/components/control/index.ts它默认提供缩小 / 放大 / 适应 / 上一步 / 下一步五个按钮分别调用lf.zoom(false)、lf.zoom(true)、lf.resetZoom()、lf.undo()、lf.redo()并支持自定义ControlItem配置每个 item 可设置key、iconClass、title、text与onClick回调——这就是编辑器 UI 组件也是可配置插件的体现。4.3 辅助工具tools工具源码目录作用Labelpackages/extension/src/tools/label富文本 Label支持多文本与文本朝向配置Snapshotpackages/extension/src/tools/snapshot画布快照导出图片支持安全边距/安全系数配置FlowPathpackages/extension/src/tools/flow-path高亮某条流程路径上的所有元素AutoLayoutpackages/extension/src/tools/auto-layout自动布局集成底层能力在logicflow/layoutProximityConnectpackages/extension/src/tools/proximity-connect渐进连线节点拖近后自动吸附连线4.4 物料与分组materials / 高级编辑模块源码目录作用CurvedEdgepackages/extension/src/materials/curved-edge圆角折线边NodeSelectionpackages/extension/src/materials/node-selection节点选择高亮外框跟随节点移动/缩放自动更新Pool泳道packages/extension/src/pool泳道/泳池结构pool、laneDynamicGrouppackages/extension/src/dynamic-group新版分组dynamic-groupInsertNodeInPolylinepackages/extension/src/insert-node-in-polyline折线上动态插入节点RectLabelNodepackages/extension/src/rect-label-node矩形标签节点Group/NodeResizepackages/extension/src/materials/group、packages/extension/src/NodeResize兼容旧版的分组与节点缩放NodeResize在 2.0 已标记deprecated见 packages/extension/src/index.ts五、插件开发模式稳定运行时三步骤无论是官方插件还是你自定义的插件extension 中的大多数能力都遵循同一套稳定运行时模式见 packages/extension/ARCHITECTURE.md从logicflow/core导入公开类型或运行时钩子通过 core 的扩展点注册元素、工具或组件lf.register、graphModel.addNodeMoveRules、lf.on事件监听等将该能力作为可选插件或辅助导出暴露出来。这条约束同时意味着如果某个能力无法在不修改 core 私有内部的前提下实现正确的做法是先增强 core 的扩展点而不是在 extension 里打脆弱的补丁。另外官方还要求内置组件与工具不得成为隐藏的图状态来源graphModel等 core 模型始终是唯一数据源。以 DynamicGroup 为例packages/extension/src/dynamic-group/index.ts它的init()方法完整演示了这一模式通过lf.register(dynamicGroup)注册dynamic-group节点类型view 为DynamicGroupNode、model 为DynamicGroupNodeModel通过graphModel.addNodeMoveRules添加移动规则移动分组时组内节点联动、isRestrict限制子节点拖出范围通过graphModel.addNodeResizeRules添加缩放规则分组外框不得小于直接子节点占地面积通过lf.on(EventType.NODE_ADD)、NODE_DND_ADD、NODE_DROP、SELECTION_DRAG、NODE_DELETE、EDGE_DELETE等事件维护nodeGroupMap节点 ↔ 分组映射、折叠虚拟边双向索引与激活态高亮通过重写lf.addElements支持分组整体复制粘贴含组内节点与内部边的递归复制在graphModel上挂载graphModel.dynamicGroup this供外部通过lf.graphModel.dynamicGroup访问插件实例。插件还暴露了getGroupByNodeId(nodeId)等查询 API以及以下可配置项DynamicGroupOptions配置项类型默认值说明isCollapsedboolean-分组初始折叠状态disallowEdgeConnectToGroupbooleanfalse为true时禁止手动将边连到/从分组节点折叠虚拟边不受影响节点properties.allowEdgeConnect可覆盖cascadeDeleteChildrenbooleantrue删除分组时是否级联删除成员为false时仅解除成员关系、子节点保留在画布sensorOutlineobject-拖拽节点进入分组时的感应外框样式stroke默认#feb663strokeWidth默认2这些配置项在 packages/extension/CHANGELOG.md 的 2.3.0 版本中均有正式记录。六、分组架构DynamicGroup、Pool 与旧版 Group 的关系在接入分组/泳道功能前需要先厘清 extension 中并存的三套相关栈这是 packages/extension/ARCHITECTURE.md 特别强调的不要假设它们共享同一个插件或同一个修复栈代码插件graphModel钩子节点类型DynamicGroup当前推荐packages/extension/src/dynamic-groupDynamicGroupdynamicGroupdynamic-groupPool泳道当前packages/extension/src/poolPoolElements也挂dynamicGrouppool、laneGroup已废弃packages/extension/src/materials/groupGroupgroupgroup、BPMNbpmn:subProcess、旧版 bpmn-elements 的 Pool/Lane关键结论DynamicGroup ↔ Pool 的关系PoolModel/LaneModel继承DynamicGroupNodeModelPoolView/LaneView继承DynamicGroupNode泳道复用分组语义children、isGroup、移动/缩放规则。PoolElements基本是DynamicGroup插件的分支额外提供 lane 拖入与getLaneByNodeId。Lane 禁用折叠Pool 固定为pool → lane → tasks结构而非任意嵌套互斥使用同一画布上要么用DynamicGroup要么用PoolElements。两者都会写graphModel.dynamicGroup同时加载会互相覆盖后加载的插件生效与 BPMN SubProcess 无关bpmn:subProcess仍继承旧版 Group修复 DynamicGroup 不会自动修复 subprocess自定义分组推荐姿势继承dynamicGroup.view/dynamicGroup.model并启用DynamicGroup插件官方教程见 sites/docs/docs/tutorial/extension/dynamic-group.zh.md与自动布局的关系自动布局在logicflow/layout包中实现它读取isGroupchildren界定内部布局范围成员的归属children、映射表仍由 DynamicGroup / PoolElements 负责因此布局调用renderRawData时必须保留properties.children。默认resizeGroup: false保持分组外框不变并在溢出时告警grow-only/fit可选开启分组尺寸自适应。七、本地开发与验证如果你想基于该扩展包做二次开发或调试官方建议的验证入口是见 packages/extension/ARCHITECTURE.md 的 Verification Entrycd packages/extension pnpm run dev cd examples/feature-examples pnpm start当功能与框架或文档强相关时可以选用更聚焦的示例项目。仓库中与 extension 相关的示例分布在 examples/feature-examples/src/pages/extensionsBPMN、control、dnd-panel、dynamic-group、group、menu、mini-map、snapshot、selection-select、proximity-connect、insert-node-in-polyline、rules、highlight、control 等页面以及 examples/engine-browser-examples/src/pages/extension 下的 bpmn / dynamic-group / label 示例可对照源码边跑边看效果。八、版本演进速览结合 packages/extension/CHANGELOG.md可以快速了解扩展包的关键演进脉络这有助于你判断哪些能力是新特性、哪些是历史包袱2.3.0DynamicGroup 新增cascadeDeleteChildren、disallowEdgeConnectToGroup选项分组缩小限制改为所有分组默认行为不再依赖isRestrict折叠虚拟边锚点问题修复PoolElements 多选高亮改为 Set 对齐 DynamicGroup2.2.0正式发布新增泳道插件PoolElements2.1.x 前后小地图、渐进连线、快照导出安全边距/安全系数、框选等插件持续增强与修复2.0.0随 LogicFlow 2.0 重构 monorepo使用 pnpm 管理Group升级为dynamic-group插件NodeResize标记废弃1.x沉淀了 BPMN 适配、小地图、快照、Label、分组复制粘贴等基础能力。从这套演进可以清楚看到DynamicGroup 与 Pool 是当前分组/泳道的现役实现旧版 Group 与 NodeResize 仅出于兼容性保留导出。接入新项目时应优先采用 DynamicGroup / PoolElements。九、总结logicflow/extension的设计哲学是可选、分层、可组合它永远站在logicflow/core的公开扩展点上把 BPMN、组件、工具、物料、分组等业务高频能力以插件形式交付。接入时牢记三件事即可快速上手显式安装logicflow/core与logicflow/extensionpeer 依赖关系按需注册LogicFlow.use(BpmnElement)、LogicFlow.use(DynamicGroup)等组件类插件记得引入logicflow/extension/es/index.css厘清边界BPMN 数据用 adapter、图元用 bpmn 元素插件、分组选 DynamicGroup、泳道选 PoolElements、自动布局在logicflow/layout——各司其职互不越界。进一步阅读官方扩展教程入口 sites/docs/docs/tutorial/extension/intro.zh.md 及 sites/docs/docs/tutorial/extension 目录下的各插件分篇源码则可以直接从 packages/extension/src/index.ts 开始按模块追踪。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 LogicFlow 扩展包 @logicflow/extension 完全指南：安装、插件体系与源码架构解读
LogicFlow 扩展包 logicflow/extension 完全指南安装、插件体系与源码架构解读【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow本文围绕 LogicFlow 官方扩展包 packages/extension/README.md 展开系统讲解logicflow/extension的安装方式、最小接入写法、插件能力全景与底层架构设计。读完你将掌握如何在一个已有logicflow/core项目中接入 BPMN、分组、泳道、小地图、快照等能力理解插件的LogicFlow.use注册机制并学会从源码层面定位与扩展官方插件。logicflow/extension是 LogicFlow 的官方扩展包它建立在logicflow/core之上聚合了 BPMN 支持、内置编辑器组件、辅助工具、可复用物料与更高层级的编辑插件。与 core 只负责画布 图元 事件的运行时不同extension 提供的都是可选能力——不安装它基础编辑器依然可以正常工作安装了它你可以按需挑选插件快速搭建出具备真实业务形态的流程图应用如 BPMN 工作流、泳道图、分组脑图等。一、扩展包是什么extension 在 LogicFlow 生态中的定位在 LogicFlow 的 monorepo 结构中logicflow/extension位于 packages/extension其职责边界在 packages/extension/ARCHITECTURE.md 中有明确定义这个包拥有什么BPMN 图元与 BPMN 数据适配器src/bpmn、src/bpmn-adapter、src/bpmn-elements、src/bpmn-elements-adapter内置编辑器 UI菜单menu、小地图mini-map、右键菜单context-menu、拖拽面板dnd-panel、选择辅助selection-select、高亮highlight等可选工具Label 文本、快照导出snapshot、流程路径flow-path、自动布局auto-layout、渐进连线proximity-connect等可复用物料与分组编辑能力泳道pool与动态分组dynamic-group。这个包不拥有什么基础编辑器的状态模型与注册原语属于 core工作流执行语义属于logicflow/engine框架适配层React/Vue 渲染由 node-registry 包负责。一句话概括extension 是叠加在 core 公开 API 之上的扩展层而不是第二个 core。所有扩展功能都应通过LogicFlow.use、lf.register等官方钩子组合进编辑器而不是侵入 core 的私有内部实现。二、安装显式安装 core 与 extension由于扩展包建立在logicflow/core之上使用方需要显式安装与其兼容的 core二者缺一不可。官方 README 给出了三种包管理器的安装命令npm install logicflow/core logicflow/extensionyarn add logicflow/core logicflow/extensionpnpm add logicflow/core logicflow/extension几点版本约定与构建产物说明依据 packages/extension/package.jsonlogicflow/core被声明为peerDependenciesworkspace:*发布后由使用方提供扩展包本身不重复打包 core包同时输出多种产物main指向lib/index.jsCommonJS、module指向es/index.jsESM、unpkg/jsdelivr指向dist/index.min.jsUMDtypes指向lib/index.d.ts打包脚本由rssrepo 级脚本统一编排build:esm用tsc --module esnext产出es/build:cjs用tsc --module commonjs产出lib/build:umd用 rollup 产出dist/。需要特别提醒的是使用组件类插件如 DndPanel、Control、MiniMap、Menu时需要引入样式文件。示例项目中普遍采用import logicflow/extension/es/index.css的写法例如 examples/feature-examples/src/pages/extensions/control/index.tsx 与 examples/feature-examples/src/pages/extensions/dnd-panel/index.tsx 中均如此引入。样式源文件位于 packages/extension/src/index.less 与 packages/extension/src/style/index.less构建时会被抽离为独立 CSS。三、最小接入插件注册与 LogicFlow.useREADME 中给出了最短可运行示例——接入 BPMN 数据适配器import LogicFlow from logicflow/core; import { BpmnAdapter } from logicflow/extension; LogicFlow.use(BpmnAdapter);这里使用了LogicFlow.use静态方法完成插件注册。注册之后lf实例就具备了 BPMN 数据的导入导出能力。如果要让实例真正画得出 BPMN 图元开始事件、结束事件、排他网关、用户任务、服务任务、顺序流还需要注册 BPMN 元素插件BpmnElement。从源码 packages/extension/src/bpmn/index.ts 可以看到BpmnElement的注册行为const BpmnElement: ExtensionDefinition { pluginName: bpmnElement, install(lf) { lf.setTheme(theme) lf.register(StartEvent) lf.register(EndEvent) lf.register(ExclusiveGateway) lf.register(UserTask) lf.register(ServiceTask) // 支持自定义bpmn元素的边 if (!lf.options.customBpmnEdge) { lf.register(SequenceFlow) lf.setDefaultEdgeType(bpmn:sequenceFlow) } }, }这段实现揭示了几点关键设计插件即安装函数 元信息pluginName是插件的唯一标识install(lf)在use时被调用可以访问到lf实例上的setTheme、register、setDefaultEdgeType等公开 APIcustomBpmnEdge开关如果业务方希望自己定义边类型可通过该配置跳过内置 SequenceFlow 注册与默认边类型设置BpmnAdapter与BpmnElement的分工前者负责数据层LogicFlow GraphData ⇄ BPMN XML/JSON后者负责图元层BPMN 元素的注册与主题。数据适配器的双向转换逻辑位于 packages/extension/src/bpmn-adapter/index.ts其内部约定值得注意BPMN XML 属性在 JSON 中以-前缀表示如-id、-nameXML 同名子节点多次出现时解析为数组导入/导出对数组与单对象均做兼容BPMN 画布坐标以元素左上角为基准LogicFlow 以元素中心为基准转换时需做坐标基准换算文本内容导出时做 XML 转义、导入时反转义保证、、等特殊字符不丢失。四、能力全景从 src/index.ts 看扩展包导出了什么扩展包的公共出口是 packages/extension/src/index.ts它把六大类能力统一导出。下面按模块职责逐一说明每个导出子模块都有对应源码目录便于按需查阅4.1 BPMN 支持模块源码目录职责bpmnpackages/extension/src/bpmnBPMN 插件注册与内置 BPMN 图元StartEvent、EndEvent、ExclusiveGateway、UserTask、ServiceTask、SequenceFlowbpmn-adapterpackages/extension/src/bpmn-adapterLogicFlow 图数据 ⇄ BPMN 数据XML/JSON双向转换额外导出xml2json、json2xml工具bpmn-elementspackages/extension/src/bpmn-elementsBPMN 元素的声明式定义presets另有 README 说明bpmn-elements-adapterpackages/extension/src/bpmn-elements-adapter与 bpmn-elements 配套的适配器turbo-adapterpackages/extension/src/turbo-adapterTurbo 数据格式适配4.2 编辑交互组件components组件源码目录作用Controlpackages/extension/src/components/control画布缩放、适应、撤销、重做工具栏Menupackages/extension/src/components/menu节点/边右键菜单ContextMenupackages/extension/src/components/context-menu通用上下文菜单DndPanelpackages/extension/src/components/dnd-panel拖拽面板拖出节点到画布MiniMappackages/extension/src/components/mini-map小地图SelectionSelectpackages/extension/src/components/selection-select框选Highlightpackages/extension/src/components/highlight节点/边高亮以 Control 为例packages/extension/src/components/control/index.ts它默认提供缩小 / 放大 / 适应 / 上一步 / 下一步五个按钮分别调用lf.zoom(false)、lf.zoom(true)、lf.resetZoom()、lf.undo()、lf.redo()并支持自定义ControlItem配置每个 item 可设置key、iconClass、title、text与onClick回调——这就是编辑器 UI 组件也是可配置插件的体现。4.3 辅助工具tools工具源码目录作用Labelpackages/extension/src/tools/label富文本 Label支持多文本与文本朝向配置Snapshotpackages/extension/src/tools/snapshot画布快照导出图片支持安全边距/安全系数配置FlowPathpackages/extension/src/tools/flow-path高亮某条流程路径上的所有元素AutoLayoutpackages/extension/src/tools/auto-layout自动布局集成底层能力在logicflow/layoutProximityConnectpackages/extension/src/tools/proximity-connect渐进连线节点拖近后自动吸附连线4.4 物料与分组materials / 高级编辑模块源码目录作用CurvedEdgepackages/extension/src/materials/curved-edge圆角折线边NodeSelectionpackages/extension/src/materials/node-selection节点选择高亮外框跟随节点移动/缩放自动更新Pool泳道packages/extension/src/pool泳道/泳池结构pool、laneDynamicGrouppackages/extension/src/dynamic-group新版分组dynamic-groupInsertNodeInPolylinepackages/extension/src/insert-node-in-polyline折线上动态插入节点RectLabelNodepackages/extension/src/rect-label-node矩形标签节点Group/NodeResizepackages/extension/src/materials/group、packages/extension/src/NodeResize兼容旧版的分组与节点缩放NodeResize在 2.0 已标记deprecated见 packages/extension/src/index.ts五、插件开发模式稳定运行时三步骤无论是官方插件还是你自定义的插件extension 中的大多数能力都遵循同一套稳定运行时模式见 packages/extension/ARCHITECTURE.md从logicflow/core导入公开类型或运行时钩子通过 core 的扩展点注册元素、工具或组件lf.register、graphModel.addNodeMoveRules、lf.on事件监听等将该能力作为可选插件或辅助导出暴露出来。这条约束同时意味着如果某个能力无法在不修改 core 私有内部的前提下实现正确的做法是先增强 core 的扩展点而不是在 extension 里打脆弱的补丁。另外官方还要求内置组件与工具不得成为隐藏的图状态来源graphModel等 core 模型始终是唯一数据源。以 DynamicGroup 为例packages/extension/src/dynamic-group/index.ts它的init()方法完整演示了这一模式通过lf.register(dynamicGroup)注册dynamic-group节点类型view 为DynamicGroupNode、model 为DynamicGroupNodeModel通过graphModel.addNodeMoveRules添加移动规则移动分组时组内节点联动、isRestrict限制子节点拖出范围通过graphModel.addNodeResizeRules添加缩放规则分组外框不得小于直接子节点占地面积通过lf.on(EventType.NODE_ADD)、NODE_DND_ADD、NODE_DROP、SELECTION_DRAG、NODE_DELETE、EDGE_DELETE等事件维护nodeGroupMap节点 ↔ 分组映射、折叠虚拟边双向索引与激活态高亮通过重写lf.addElements支持分组整体复制粘贴含组内节点与内部边的递归复制在graphModel上挂载graphModel.dynamicGroup this供外部通过lf.graphModel.dynamicGroup访问插件实例。插件还暴露了getGroupByNodeId(nodeId)等查询 API以及以下可配置项DynamicGroupOptions配置项类型默认值说明isCollapsedboolean-分组初始折叠状态disallowEdgeConnectToGroupbooleanfalse为true时禁止手动将边连到/从分组节点折叠虚拟边不受影响节点properties.allowEdgeConnect可覆盖cascadeDeleteChildrenbooleantrue删除分组时是否级联删除成员为false时仅解除成员关系、子节点保留在画布sensorOutlineobject-拖拽节点进入分组时的感应外框样式stroke默认#feb663strokeWidth默认2这些配置项在 packages/extension/CHANGELOG.md 的 2.3.0 版本中均有正式记录。六、分组架构DynamicGroup、Pool 与旧版 Group 的关系在接入分组/泳道功能前需要先厘清 extension 中并存的三套相关栈这是 packages/extension/ARCHITECTURE.md 特别强调的不要假设它们共享同一个插件或同一个修复栈代码插件graphModel钩子节点类型DynamicGroup当前推荐packages/extension/src/dynamic-groupDynamicGroupdynamicGroupdynamic-groupPool泳道当前packages/extension/src/poolPoolElements也挂dynamicGrouppool、laneGroup已废弃packages/extension/src/materials/groupGroupgroupgroup、BPMNbpmn:subProcess、旧版 bpmn-elements 的 Pool/Lane关键结论DynamicGroup ↔ Pool 的关系PoolModel/LaneModel继承DynamicGroupNodeModelPoolView/LaneView继承DynamicGroupNode泳道复用分组语义children、isGroup、移动/缩放规则。PoolElements基本是DynamicGroup插件的分支额外提供 lane 拖入与getLaneByNodeId。Lane 禁用折叠Pool 固定为pool → lane → tasks结构而非任意嵌套互斥使用同一画布上要么用DynamicGroup要么用PoolElements。两者都会写graphModel.dynamicGroup同时加载会互相覆盖后加载的插件生效与 BPMN SubProcess 无关bpmn:subProcess仍继承旧版 Group修复 DynamicGroup 不会自动修复 subprocess自定义分组推荐姿势继承dynamicGroup.view/dynamicGroup.model并启用DynamicGroup插件官方教程见 sites/docs/docs/tutorial/extension/dynamic-group.zh.md与自动布局的关系自动布局在logicflow/layout包中实现它读取isGroupchildren界定内部布局范围成员的归属children、映射表仍由 DynamicGroup / PoolElements 负责因此布局调用renderRawData时必须保留properties.children。默认resizeGroup: false保持分组外框不变并在溢出时告警grow-only/fit可选开启分组尺寸自适应。七、本地开发与验证如果你想基于该扩展包做二次开发或调试官方建议的验证入口是见 packages/extension/ARCHITECTURE.md 的 Verification Entrycd packages/extension pnpm run dev cd examples/feature-examples pnpm start当功能与框架或文档强相关时可以选用更聚焦的示例项目。仓库中与 extension 相关的示例分布在 examples/feature-examples/src/pages/extensionsBPMN、control、dnd-panel、dynamic-group、group、menu、mini-map、snapshot、selection-select、proximity-connect、insert-node-in-polyline、rules、highlight、control 等页面以及 examples/engine-browser-examples/src/pages/extension 下的 bpmn / dynamic-group / label 示例可对照源码边跑边看效果。八、版本演进速览结合 packages/extension/CHANGELOG.md可以快速了解扩展包的关键演进脉络这有助于你判断哪些能力是新特性、哪些是历史包袱2.3.0DynamicGroup 新增cascadeDeleteChildren、disallowEdgeConnectToGroup选项分组缩小限制改为所有分组默认行为不再依赖isRestrict折叠虚拟边锚点问题修复PoolElements 多选高亮改为 Set 对齐 DynamicGroup2.2.0正式发布新增泳道插件PoolElements2.1.x 前后小地图、渐进连线、快照导出安全边距/安全系数、框选等插件持续增强与修复2.0.0随 LogicFlow 2.0 重构 monorepo使用 pnpm 管理Group升级为dynamic-group插件NodeResize标记废弃1.x沉淀了 BPMN 适配、小地图、快照、Label、分组复制粘贴等基础能力。从这套演进可以清楚看到DynamicGroup 与 Pool 是当前分组/泳道的现役实现旧版 Group 与 NodeResize 仅出于兼容性保留导出。接入新项目时应优先采用 DynamicGroup / PoolElements。九、总结logicflow/extension的设计哲学是可选、分层、可组合它永远站在logicflow/core的公开扩展点上把 BPMN、组件、工具、物料、分组等业务高频能力以插件形式交付。接入时牢记三件事即可快速上手显式安装logicflow/core与logicflow/extensionpeer 依赖关系按需注册LogicFlow.use(BpmnElement)、LogicFlow.use(DynamicGroup)等组件类插件记得引入logicflow/extension/es/index.css厘清边界BPMN 数据用 adapter、图元用 bpmn 元素插件、分组选 DynamicGroup、泳道选 PoolElements、自动布局在logicflow/layout——各司其职互不越界。进一步阅读官方扩展教程入口 sites/docs/docs/tutorial/extension/intro.zh.md 及 sites/docs/docs/tutorial/extension 目录下的各插件分篇源码则可以直接从 packages/extension/src/index.ts 开始按模块追踪。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考