Topology 可视化在线绘图引擎 项目简介
开源、易扩展、方便集成的在线绘图（微服务架构图、网络拓扑图、流程图等）工具。基于 typescript + canvas 实现的开源在线绘图的引擎 Topology。采用引擎 + 图形库中间件的思路能够方便、快速的扩展、集成到前端项目。目前暂时实现了基本图形、流程图图形库，能够满足微服务架构图、网络拓扑图和流程图的绘制。后面计划陆续实现活动图/时序图/类图等 UML 图。 为什么重复造轮子笔者工作中遇到比较多的微服务架构、云资源运维、部署与运维可视化方面的需求 开源、满足自己需求的不多 typescript + 纯粹canvas架构的不多 以中间件方式可定制满足不同场景的不多 最重要的是，兴趣 + 不难 特点开源 可定制化 简单易用，方便集成 较好的性能，非常流畅 方便的数据导入导出 图片保存/预览 typescript + canvas 使用场景微服务架构图 运维时部署结构拓扑图 流程图后续会推出的：活动图 时序图 类图等 架构设计主要由：层、节点、连线和箭头等组成。层：这里的层，主要是为了提升性能的逻辑层；与类似ps里面的用户图层无关。离屏层：包含所有绘图数据，是最稳定的图层。选中层：用户选中部分或全部节点/连线的高亮图层，并设置相关属性、缩放、和旋转等。动画层：主要用于演示动画。活动层：主要用于箭头鼠标交互事件，比如锚点和连线过程。 节点：是画布的主要组成部分，节点内部还可以包含图标或文字。 连线和箭头：连线和箭头是关联在一起的。连线两端可以选择设置或不设置箭头。 节点可以通过控制点进行整体缩放、旋转。 连线只表示节点描点间的连线，不存在缩放、旋转。节点缩放或旋转会造成控制点的重计算。连线形状可以由线的控制点改变。绘画与属性节点和连线各种有自身的绘画属性，同时还可以设置一个附加的自定义数据 快速集成使用es6使用示例：github.com/le5le-com/t…typescript使用示例：github.com/le5le-com/t…