前端绘图开源组件_前端开源、易扩展、方便集成的绘图工具

e5le-topology是一款开源、易扩展、方便集成的在线绘图(微服务架构图、网络拓扑图、流程图、活动图、时序图、类图、思维导图/脑图、动画等)的软件项目。

基于 typescript + canvas 实现的开源在线绘图的引擎 Topology。采用引擎 + 图形库中间件的思路能够方便、快速的扩展、集成到前端项目。

在线免费使用(因为操作方便问题，暂时没有适配移动端) 产品介绍

配合VS Code插件一起使用

在vs code插件列表里搜索：le5le topology，或le5le-topology-plugin

查看插件

为什么重复造轮子

• 笔者工作中遇到比较多的微服务架构、云资源运维、部署与运维可视化方面的需求
• 开源、满足自己需求的不多
• typescript + 纯粹canvas架构的不多
• 以中间件方式可定制满足不同场景的不多
• 动画支持

特点

• 开源
• 动画
• 可定制化
• 轻量(核心库 + 3图形库 也才100k左右)，功能却很丰富
• 简单易用，方便集成
• 支持旋转、缩放、文字属性、边框属性、背景、连线动画等
• 优异的性能，非常流畅
• 方便的数据导入导出
• 图片保存/预览
• typescript + canvas

使用场景

• 微服务架构图
• 运维时部署结构拓扑图
• 流程图

• 活动图
• 时序图
• 类图等
• 思维导图/脑图
• 类SCADA