前端绘图框架如何抉择?

框架开源性质链接备注github
goJs国外公司
GoJS GoJS is a JavaScript library for building interactive diagrams and graphs on the web. Build apps with flowcharts, org charts, BPMN, UML, modeling, and other visual graph types. Interactivity, data-binding, layouts and many node and link concepts are built-in to GoJS. https://gojs.net/latest/
github有源码,可免费使用,但会有水印(可技术去除)5.6k star,0 issues
jsPlump社区版、商业版国外公司
jsPlumb Toolkit - build connectivity quickly jsPlumb is an advanced, standards-compliant and easy to use JS library for building connectivity based applications, such as flowcharts, process flow diagrams, sequence diagrams, organisation charts, etc. Use with Angular, React or Vue, or Vanilla JS https://jsplumbtoolkit.com/
社区版免费但功能较少,功能更偏向于做流程图(特别是静态展示)6.6k star,149 issues
mxGraph开源国外公司
mxGraph 4.2.2 http://jgraph.github.io/mxgraph/
开源免费,但文档、社区比较差劲,完全通过 js 完成,使用成本较高,复杂业务不推荐6.2k star,0 issues
antv-x6开源蚂蚁
AntV | 蚂蚁数据可视化 AntV 是蚂蚁集团全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。 https://antv.vision/zh
开源,文档友好2.4k star, 58 issues
topology免费版、商业版国内组织
乐吾乐Topology - 基于开源的免费可视化绘图工具 Le5le – Topology是一个集动态交互、丰富展示、数据管理等一体的全功能智能可视化引擎,为物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等智能可视化场景而生。 http://topology.le5le.com/
存在免费版(限制比较多)3.1k star, 21 issues
svgjs开源国外组织
SVG.js v3.0 | Home The lightweight library for manipulating and animating SVG. SVG.js has no dependencies and aims to be as small as possible. https://svgjs.dev/docs/3.0/
功能丰富,偏向于svg图片和动画效果9.1k star, 71 issues
jointjs免费版、商业版国外公司
Rappid: Powerful visual tools at your fingertips https://www.jointjs.com/
暂无3.5k star,84 issues
flowchart-国外公司
flowchart.js http://flowchart.js.org/
7.6k star,93 issues

概述:项目基于vue(后续可能接轨vue3和ts),需要开发绘图功能,初期只是简单流程图的绘制,但后续需保留可持续扩展的能力。由于之前没有接触过流程图相关的需求,选择框架方面缺乏经验,结合网上找到上述多个框架,以及一些相关的评价信息。

个人总结:

  1. 从github首欢迎程度看,flowchart占优;而且包体积小
  2. 从文档建设方面看,蚂蚁的antv-x6是国产大厂出品,文档相对友好;
  3. mxgraph是老牌,但似乎github上issues不是很活跃,网上评价也说不易上手;
  4. gojs综合指数很高,但需商业授权(因此很大概率不考虑了);
  5. jsplump社区版功能有所限制;
  6. svgjs偏向于矢量图绘制

目前比较倾向于开源且强大的mxgraph,其次是antv-x6、flowchart、jsplump,但又担忧开发成本、可拓展性、兼容等问题。项目中流程图数据较多,且数量庞大,需要着重考虑性能问题。

望各方有经验的业内人士能指点迷津,或表达经验之谈,非常感谢!

抬走。下一位

为什么没有列出 konvajs ?