流程图对比(jsplumb VS svgjs )

一、 流程图在Github的表现

jsplumb

1. 官网： https://jsplumbtoolkit.com
2. GitHub URL: https://github.com/jsplumb/jsplumb
3. Watch: 250
4. Star: 4592
5. Fork: 1100
6. 开发语言：svg + javascript + htm5
7. Demo演示：https://jsplumbtoolkit.com/
8. 开源时间：2013

svgjs

1. 官网： https://svgjs.com/
2. GitHub URL: https://github.com/svgdotjs/svg.js
3. Watch: 255
4. Star: 6623
5. Fork: 809
6. 开发语言：svg + javascript
7. Demo演示：https://svgjs.com/docs/2.7/tutorials/
8. 开源时间：2015

jsplumb功能特定单一，更适合做流程图，SVG.js功能强大全面，适合SVG矢量图和动画效果。

二、 流程图功能简介

jsplumb

1. 该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此您可以绘制您可以想到的任何类型的图表的！

2. 特点：
   Souce 源节点
   Target 目标节点
   Anchor 锚点
   Endpoint 端点
   Connector 连接

svgjs

1. SVG.js 是一个轻量级的 JavaScript 库，允许你轻松操作 SVG 和定义动画。 SVG（Scalable Vector Graphics，可缩放矢量图形）是基于 XML、用于描述二维矢量图形 的一种图形格式。SVG 由 W3C 制定，是一个开放标准。 SVG.js 中包含了大量用于定义动画的方法，如移动、缩放、旋转、倾斜等，具体可参阅相 关演示。

2. 易读的简洁的语法 非常轻量，gzip 压缩版只有 5k 针对大小、位置、颜色等的动画元素 模块化结构，轻松扩展 各种实用插件 各种形状类型间拥有统一的 API. 元素可以绑定事件，包括触摸事件 完全支持不透明蒙版 元素组 动态渐变 填充模式 完整的文档记录

jsplumb功能特定单一，更适合做流程图，SVG.js功能强大全面，适合SVG矢量图和动画效果。

三、 流程图开源维护方面

jsplumb

1. 团队持续更新中。

2.  4804提交量； 56个代码分支； 131个版本； 24个贡献者。

svgjs

1. 团队持续更新中。

2.  1273提交量； 10个代码分支；  94个版本； 50名贡献者。

jsplumb最新版本2.8.2；Svg.js最新版本3.0.5; 两者都在持续更新，只是发展方向不同。

四、 流程图的使用方式

jsplumb

1. 在页面引用jsplumb.min.js。

2. 使用jsplumb提供的API开发各类图形连线可视化项目

svgjs

1. 在页面引用svg.js。

2. 用于操作和动画SVG的轻量级库，没有任何依赖性。

jsplumb功能特定而强大，svg.js功能丰富，自定义性强，动画丰富。