开源的可视化数据软件（可视化在线绘图引擎）
开源的可视化数据软件（可视化在线绘图引擎）5、最重要的是，兴趣 不难4、以中间件方式可定制满足不同场景的不多1、笔者工作中遇到比较多的微服务架构、云资源运维、部署与运维可视化方面的需求2、开源、满足自己需求的不多3、typescript 纯粹canvas架构的不多
介绍Topology是开源、易扩展、方便集成的在线绘图（微服务架构图、网络拓扑图、流程图、活动图、时序图、类图等）工具。基于 TypeScript canvas 实现的开源在线绘图的引擎 Topology。采用引擎 图形库中间件的思路能够方便、快速的扩展、集成到前端项目。
Github
https://github.com/le5le-com/topology
下面是引用作者的原话：
为什么重复造轮子：
1、笔者工作中遇到比较多的微服务架构、云资源运维、部署与运维可视化方面的需求
2、开源、满足自己需求的不多
3、typescript 纯粹canvas架构的不多
4、以中间件方式可定制满足不同场景的不多
5、最重要的是，兴趣 不难
相关特性
- 开源
开源、开源、开源，重要的事情说三遍。不可否认，市面上已经很多类似工具，但开源的不多，尤其国内的。
- 易扩展
引擎实现了节点、线条、箭头、拖拉拽、缩放、旋转等公共基础功能，通过npm库的方式扩展定制自己的图形库。方便在不同的项目场景，定制自己的图形库和产品。
- 流畅、高性能
采用canvas技术，不用担心dom节点过多可能会影响性能；根据不同作用场景，采用多种离屏机制，大幅度减少不必要的渲染
- 动画演示
考虑到微服务流量演示，暂时仅实现了简单版的线条流量动画，其他欢迎提出场景需求
- TypeScript
不依赖前端框架（angular/react/vue），使用TypeScript能获得友好的语法和编译错误提示，以及友好的重构效率支持。编译后支持es6方式使用
- 数据导入导出
能够很方便的以json数据格式导入导出
- 图片保存
canvas原生友好的支持图片下载保存
- 方便的企业定制
设计之初就考虑到不同项目的使用场景需求不同，故以引擎 图形库的方式去设计，极大的方便不同的企业项目定制和使用。
使用场景- 微服务架构图
- 运维时部署结构拓扑图
- 流程图
- 活动图
- 时序图
- 类图等
- 其他图（可联系作者）
架构设计介绍
主要由：层、节点、连线和箭头等组成。
层：
这里的层，主要是为了提升性能的逻辑层；与类似ps里面的用户图层无关。
- 离屏层：包含所有绘图数据，是最稳定的图层。
- 选中层：用户选中部分或全部节点/连线的高亮图层，并设置相关属性、缩放、和旋转等。
- 动画层：主要用于演示动画。
- 活动层：主要用于箭头鼠标交互事件，比如锚点和连线过程。
节点：
是画布的主要组成部分，节点内部还可以包含图标或文字。
连线和箭头：
连线和箭头是关联在一起的。连线两端可以选择设置或不设置箭头。节点可以通过控制点进行整体缩放、旋转。
连线只表示节点描点间的连线，不存在缩放、旋转。节点缩放或旋转会造成控制点的重计算。连线形状可以由线的控制点改变。
绘画与属性：
节点和连线各种有自身的绘画属性，同时还可以设置一个附加的自定义数据
如何快速集成到自己的项目
es6使用示例：
https://github.com/le5le-com/topology/tree/master/demo
typescript使用示例：
https://github.com/le5le-com/topology/tree/master/src/app/home
相关文档作者将文档放在非常优雅的文档管理工具语雀上：
https://www.yuque.com/alsmile/topology
可自行部署使用！
热门图文一览
总结
Topology是其作者闲暇之余的作品，虽然作者说简单，但是对于部分初学者或者对这方面不熟悉的开发者来说，还是有一定难度的，作者提供了这样一个作品出来，可供我们学习和使用，当然得多多支持！
