工作流应用的行业背景
前端工作流可视化的开源js库有很多选择，在具体介绍之前，有必要让大家先了解下目前行业对这块的需求以及薪资情况。因为很多行业的企业针对工作流和规则引擎有定制化需求，能做到对业务人员友好、配置灵活、自动化智能化程度高，这些无疑会给公司的业务扩展、人力成本控制、业绩提升等带来巨大的收益。
这样的背景下，自研工作流平台相关产品，并衍生出一些技术变现的渠道，像自研产品的试用、推销、行业培训、整合应用的在线课程等等，只要令用户满意，都会是一笔客观的收益。为此，身处AI大行其道、技术不再成为产品研发瓶颈的当下，自研工作流产品以及技术整合、应用的视频教程等方面的工作也排入了我今年业余副业规划的日程。
从我15年前开始接触工作流引擎jbpm3到如今，工作流相关的工作岗位可以说一直是某些行业领域的香饽饽，只是定制程度要求更高了，这是我在boss直聘上找到几个典型的招聘要求：
流程设计器开源选择
现在工作流的研发向着企业建模定制化和低代码的方向不断迭代和产品升级，这里就不得不提流程可视化的UI建模方面了，恰恰是工作流UI的展示和交互，直接决定了产品的用户选择程度，当然像泛微这样有着强大研发团队的IT企业，他们的流程建模的底层支持可以基于产品的需求做到从零研发定制，市面上研发该类产品更多的选择是，采用开源js库，甚至是现成的UI组件。下面咱们就针对这类选择来聊一聊市面上常用的几款流程可视化前端开源库。
LogicFlow
LogicFlow这是由滴滴出品的用于流程绘制的一套底层UI库，它为企业流程建模和个性化主题扩展方面提供了出色的行业解决方案。从它网站的展示风格就寓示着万物皆可拖拽、万物皆可连结（纯属个人娱乐，非官方解释），绷不住笑~
从它官方的图标示例来看，它提供了用于各种用途的场景下绘制需求的demo，尤其是在主题风格的定制化方面。示例的应用场景还在不断完善，从流程图界面的操作体验来感受下，基本的连线操作和布局过于呆板，连接点采用锚点的设计个人觉得甚至有点鸡肋，而且连线布局的路径规划没有做优化，本该一条直连线，在调整图形位置后，会出现许多拐弯，且背景的点阵网格对连接线路径不会限制（不要求路径落在网格点上），基础使用体验上还可以进一步优化下底层功能：
关于它的API使用以及功能的扩展，有感兴趣的小伙伴可以自行操作官方指南。因为不作为我的个人选择，不做过多的研究和赘述。本人的流程设计器底层js库的选型要求是，操作便捷流畅，展示简洁大气，对UI包装和扩展上没有过多要求，但要提供优雅的方式进行功能扩展。对比这些要求，我坚定的选择了diagram-js。
Workflow
Workflow这是一款个人开发的起名比较大众化的前端流程设计器UI组件，UI仿照钉钉的风格，采用Vue + Element UI打造的直接可用的页面UI组件，Github上提供了相关用法介绍，源码中也有页面使用示例，方便与项目集成，它还提供了页面演示地址。从视觉和操作体验上来看，布局过于呆板，垂直的布局让屏幕空间利用率很低，节点和连线都是固定的，页面显示要素过多，不够简洁：
抽屉式的属性编辑弹层，操作像卡壳了（绷不住笑）。 当然该项目很久就不再维护了，看到某站有up用它来研发规则决策可视化平台，才留意到这个UI库。因为布局过于固执己见，这是硬伤。
diagram-js
diagram-js这个js库很多人都没听过，如果提起基于它的产品bpmn-js，似乎是无人不知无人不晓（绷不住笑）。
bpmn-js这么成功，就是因为它的底层图形库：diagram-js，它可是国外众多前端大佬贡献的结晶。个人觉得越是好的东西，宣传越是不当回事（绷不住笑）。
这里重点说下咱用这个库做出来的一点小小的成果。而关于这块的学习教程，看各位读者的反馈吧。我先整理了第一部分的笔记：
有一定的学习曲线，因为没有系统的文档和使用场景，如果有耐心可以像我一样读diagram-js和bpmn-js的源码，如果觉得麻烦，后续我会安排上《diagram-js打造企业产品级流程设计器》的视频教程（绷不住笑出声）。
基于diagramjs打造产品级流程设计器
目前个人觉得做的最成功的流程设计器，还属bpmn.io出品的工具集三大件（bpmn-js、dmn-js和form-js）之一的bpmn-js。只是该产品是完全遵循bpmn规范的，对于本文一开始提到的国内使用场景，需要做到高度的模型定制化，因此本人才业余潜心研究这个底层库，向着产品化的目标不断的学习和实践。从初步实践中，发现这个库的几个显著的特色：
- 库很轻量级，不依赖外部任何库，写原生js就可以轻易扩展
- 内置模块功能足够的强大
- 模块即插即用，且模块功能叠加使用下，可相互作用得到更好的结果
- 模块扩展非常方便、定制和覆盖功能有着非常优雅的解决方案
第一部分实现的成果，发一个粗糙的截图：
但话说美的东西不都是从最简单的东西一点点布局修饰出来的吗（绷不住笑）。
特性扩展
只要选对了开源基础方案，我们可以很轻易的完成对diagram-js的功能扩展，基于最粗糙的雏形慢慢打磨出更人性化的流程设计器产品。后续小卷会不断迭代一些富有特色的扩展特性。
自动连线
很多时候我们希望业务老师会这样使用咱们的流程设计器产品，拖拽图形节点，大致排下位置，连线可自动实现，一键生成，并在此基础上优化排版。这是不是很赞，绷不住笑。
这里咱就实现最简单的一种场景，点上下文菜单中的连线图标，不用拖拽，就可以自动连接。
首先，我们实现了自动计算距离最近的图形节点，看下效果：
再测试下，图形放大的效果，一样ok！
再来测试连线，有个问题，已经有连接关系的节点，应该排除掉，测试如下：
修复后：
这样咱们就可以快速生成一个流程图，做一个简单的模拟流程演示，动态图：
终极特性 - AI生成流程
该小节先占个座儿，绷不住笑。平时用惯了Cursor AI来按照自己的意图生成svg或者流程图定义文件 所以业务流程可视化交给AI这样的需求很正常。
咱们流程设计器要结合AI实现的一个终极产品特性，可以让用户文字描述或者上传图片数据，然后基于AI大模型对我们业务流程建模的这套元数据schema的定义，来帮我们生成流程定义，再通过咱们的流程设计器渲染到页面上，真正做到0代码平台。
相信业务流程可视化与AI结合的能力，是一个企业对工作流产品深度依赖的杀手锏级别的特性，这也是咱们工作流自研产品的终极追求。相信有些小伙伴的研发团队正在实现或者已经实现了类似的需求了，大家也不妨在评论区交流下，绷不住笑。
总之，咱们自研流程设计器产品的功能在不断迭代中，欢迎小伙伴们提出宝贵意见和建议，一起加油！
录屏演示
后续会以录屏的方式给大家分享在某站，以链接的形式发出来。
视频演示地址：
diagram-js流程设计器雏形演示1
点阵网格吸附错位的bug修复
logicFlow与bpmn-js连线体验对比
添加连接线
自动连线功能_查找画布最近元素
