jsPlumb、mxGraph和Antv x6实现流程图选型

发布时间:2024年01月11日

解决方案

结合我们项目以及主流解决方案,提供以下几种方案:

序号技术栈性质是否开源说明
1jsPlumb国外框架社区版、商业版中台项目现有方案
2mxGraph国外框架开源比较有名的开源绘图网站draw.io (和processOn类似),使用mxGraph 进行开发的。
3Antv x6国内框架开源阿里蚂蚁Antv产品,FineDataLink数据集成平台采用的方案,新版dolphinscheduler也已更换为Antv x6

方案比对

一、jsPlumb

jsPlumb 有社区版跟收费版,我们使用的是社区版,功能非常少。

  1. 国外框架。开源/不再维护更新
  2. 官方英文文档
  3. 功能简单,只包括一些基础功能(节点拖拽、连线等)
  4. 没有内置导航器(收费版是有这个功能的)
  5. 没有智能布局功能(需要复杂布局算法)

二、mxGraph

  1. 国外框架。开源/不再维护更新
  2. mxGraph官方文档为全英文,
  3. 文档不够友好(个人认为与GoJS文档水平差距甚远),官方给出的实例无明显的阅读顺序,导致上手难度大,学习成本比较大
  4. 较jsPlumb,功能和样例更丰富一些。
  5. 相对 jsPlumb 不能使用 css 自定义节点样式,完全通过 js 完成,比较麻烦

三、Antv x6

  1. 国内框架。开源,文档友好。快速上手,开箱即用

  2. 功能更加丰富

    1. 丰富的连线和箭头
    2. 链接桩灵活可调
    3. 支持群组
    4. 撤销/重做
    5. 小地图
    6. 滚动画布,画布平移
    7. 快捷键
    8. 复制/粘贴节点和边
    9. 对齐线
  3. 数据驱动:基于 MVC 架构,用户更加专注于数据逻辑和业务逻辑;

  4. 事件驱动:可以监听图表内发生的任何事件

  5. 支持react、vue组件渲染节点

  6. 较多的免费插件包

框架活跃度对比:

https://npmtrends.com/@antv/x6-vs-jsplumb-vs-mxgraph
在这里插入图片描述

时间成本对比:

实现工作流,大概估计一下工时:

  • jsPlumb、mxGraph:二个月
  • X6:一个月

总结

  • jsPlumb、mxGraph学习成本比较大,且不再维护更新。
  • AntV学习成本相对来说小很多,一直在持续更新中,且功能更加丰富。

外部引用参考:

  1. dolphinscheduler
    在这里插入图片描述

  2. FineDataLink

在这里插入图片描述

文章来源:https://blog.csdn.net/zqd_java/article/details/135519013
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。