专注流程可视化的前端框架

们调研了市面上相关的框架 （BPMN.js、X6、Jsplumb、G6-editor），均存在不满足的场景，技术栈统一的成本很高。具体表现在：

• BMPN.js、Jsplumb 的拓展能力不足，自定义节点支持成本很高；只能全量引入，各系统无法按需引入；

• 与后端配套的流程引擎适配，成本较高。均不支持数据转换、不支持流程的校验等业务定制需求；

• 文档、示例不健全。X6 和 BPMN 的文档不健全，示例少（2020 初调研结论）。

因此，我们在 2020 上半年开启了 LogicFlow 的项目，支持各系统的流程可视化需求。

2. 

LogicFlow 的能力和特性

LogicFlow 当前已具备了哪些能力呢，我会分两部分来介绍：

▍ 1.  快速搭建流程图编辑器

提供了一个流程图编辑所必需的各项能力，这也是 LogicFlow 的基础能力：

• 图的绘制能力。 基于 SVG 来绘制形状各异的节点和线，并提供了基础的节点（矩形、圆形、多边形等）和线（直线、折线、曲线）；

• 图的交互。 根据节点、线、图的各类鼠标事件（hover、点击、拖拽等）做出反应。比如节点拖拽、拖拽创建连线、线的调整、双击节点编辑文本等；

• 提升编辑效率的能力。 提供网格、对齐线，上一步、下一步，键盘快捷键，图放大缩小等配套能 力，帮助用户提升编辑效率；

• 提供了丰富的 API 。 宿主研发通过 API 传参调用和监听事件的方式，与 LogicFlow 完成交互。

通过以上能力，前端研发可以低成本、快速的搭建起流程可视化的应用，提供流畅的产品交互。下面是通过 LogicFlow 内置的节点和配套能力，做的流程图示例：

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!