集成架构图绘制-JS绘图工具库(2.19)

对于集成架构图的绘制一直是我关注的一个点，也看了类似百度Echart，D3和HighChart等，基本都没有发现适合用来做类似集成架构图绘制的工具。同时集成架构图往往都不是自动绘制，而需要提前进行集成架构的图形布局设计，布局好后才能够用JS去绘制。

因此更多我们需要的是一个JS绘图 工具 库，能够汇总线条，矩阵，圆等基础图形形状即可。我们可以看下一个简单的集成架构图，经过设计排版后布局可能如下：

对于这类图可以看到实际上各类可视化图表库并不太容易实现。原来我们采用过Flash来进行集成架构图的绘制，但是Flash相对偏重不太合适。因此还是需要找一个JS绘图库来实现这种简单的集成架构图的绘制工作。

基于这个思路我们在网上找了下比较好的一些JS绘制工具库。

jsPlumb开源流程图绘制工具库

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

该开源库的GitHub地址为： https://github.com/wangduanduan/jsplumb-chinese-tutorial

在该地址也有详细的中文使用教程，根据教程的一些截图可以看到，该工具库很适合用来绘制我们上面的集成架构图，因为这种图本身也就是形状和线条的一些简单组合，而且来拖拽功能都不需要。

当然基于该工具库，我们也可以用来实现更加复杂的集成架构图，即将两个业务系统间的所有关键集成接口全部以连线的方式表示出来。这种集成架构图也是无法自动生成，需要首先进行整体部版设计，然后再通过jsPlumb工具库进行绘制即可。

如果要连接多条线条，需要整个节点作为source或者target， 并且将锚点设置成Continuous，那么锚点就会随着节点的位置改变而改变自己的位置。这个功能特性可以很方便我进行多线条设置。

注意在这个网址， https://jsplumbtoolkit.com/community/doc/anchors.html ， 这个工具库是存在License费用的，因此如果这个工具库用于商业用途，按道理会涉及到License的购买问题。

一篇关于该工具库的使用参考： https://www.cnblogs.com/xcj26/p/9870734.html

另外一个用该工具库实现的流程设计器和表单设计器：  http://formdesign.leipi.org/

付费JS绘制工具库：GoJS

GoJS是一套基于JavaScript的付费图形绘制工具库，地址： https://gojs.net/latest/index.html

这套工具库有免费版本，也有收费版本，收费版本比jsPlumb工具库来说就强大了很多，特别是动态Port图和动态分组图，这两个用来绘制我们集成架构图，应用架构图等都相当有用。

Dynamic Ports： Dynamically add ports and custom link routing. USe data-bindings to save and load routes within the Model JSON.

Dynamic Grouping： Use groups as containers and subgraphs, with group members bounds by their own rules and layouts.

所有Demo演示地址参考： https://gojs.net/latest/samples/regrouping.html

JointJS工具库

这个也是常用的绘图工具库，地址在： https://www.jointjs.com/

这个库官方介绍的例子都感觉比较重，而实际其它搜索到的一些使用介绍来看，用于简单从集成架构图，流程图类绘制还是没有太大问题的。基本还是标准的新建画板，画布，然后进行各种图形的定义和绘制。

jointJS是一个基于svg的图形化工具库，在画布上画出支持拖动的svg图形，而且可以导出JSON，也能通过JSON配置导入直接生成图形。由于这个工具库是基于SVG的，因此也不太推荐使用。

一篇使用参考： https://segmentfault.com/a/1190000015972176