可视化在线绘图引擎 Topology

MIT
跨平台
2019-09-05
Alsmile

开源、易扩展、方便集成的在线绘图(微服务架构图、网络拓扑图、流程图等)工具。

基于 typescript + canvas 实现的开源在线绘图的引擎 Topology。采用引擎 + 图形库中间件的思路能够方便、快速的扩展、集成到前端项目。目前暂时实现了基本图形、流程图图形库,能够满足微服务架构图、网络拓扑图和流程图的绘制。后面计划陆续实现活动图/时序图/类图等 UML 图。

 

 

 

为什么重复造轮子

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

 

特点

  • 开源
  • 可定制化
  • 简单易用,方便集成
  • 较好的性能,非常流畅
  • 方便的数据导入导出
  • 图片保存/预览
  • typescript + canvas

 

使用场景

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

后续会推出的:

  • 活动图
  • 时序图
  • 类图等

 

架构设计

主要由:层、节点、连线和箭头等组成。

层:

这里的层,主要是为了提升性能的逻辑层;与类似ps里面的用户图层无关。

离屏层:包含所有绘图数据,是最稳定的图层。

选中层:用户选中部分或全部节点/连线的高亮图层,并设置相关属性、缩放、和旋转等。

动画层:主要用于演示动画。

活动层:主要用于箭头鼠标交互事件,比如锚点和连线过程。

 

节点:

是画布的主要组成部分,节点内部还可以包含图标或文字。

 

连线和箭头:

连线和箭头是关联在一起的。连线两端可以选择设置或不设置箭头。

 

节点可以通过控制点进行整体缩放、旋转。

 

连线只表示节点描点间的连线,不存在缩放、旋转。节点缩放或旋转会造成控制点的重计算。连线形状可以由线的控制点改变。

绘画与属性

节点和连线各种有自身的绘画属性,同时还可以设置一个附加的自定义数据

 

快速集成使用

es6使用示例:

github.com/le5le-com/t…

typescript使用示例:

github.com/le5le-com/t…

 

 

的码云指数为
超过 的项目
加载中

评论(8)

t
tky951
可以用作工作流设计吗
Alsmile
Alsmile 软件作者
支持单镜像部署了:https://www.yuque.com/alsmile/topology/docker-install 欢迎体验。
梦哲
梦哲
s_jqzhang
s_jqzhang
要是支持docker一键部署就好了,自己去弄还是有点麻烦
Alsmile
Alsmile 软件作者
其实是有docker镜像的: le5le/topology le5le/file-server le5le/account 但是,目前没有部署文档: 1. 云端保存,涉及到用户系统,每个公司的用户系统或单点登录不完全一样。这是最直接没写docker部署文档的原因。 2. 在设计之初,就认为每个公司可能都会有自己的定制需求,所以在设计的时候,考虑了易继承、易扩展的特点。我相信一个中级前端工程师,参考文档和代码,很容易集成,我也十分愿意帮助解决集成过程中遇到的问题。 3. 虽然是小项目,但仍然习惯了微服务架构的方式开发。因此,绘图、用户系统、文件系统都是分离了的微服务,增加了部署难度。详细的部署文档需要额外介绍另外两个微服务模块。 但是目前这是个人在维护,平时要在公司搬砖。在有限的时间内,觉得todo里面有更重要的事情。但是如果docker部署需求的人较多,我可以考虑Todo计划里面增加这个事项并作为高优先级。欢迎留言或主动联系:【微信】alsmile123。
s_jqzhang
s_jqzhang
👍🏾👍🏾👍🏾
Alsmile
Alsmile 软件作者
支持单镜像部署了:https://www.yuque.com/alsmile/topology/docker-install 欢迎体验。
筒梓
这个好。

暂无资讯

暂无问答

LAN Network Topologies

Introduction Network topologies can take a bit of time to understand when you're all new to this kind of cool stuff, but it's very important to fully understand them as they are...

2012/06/05 16:30
61
0
Storm官方文档翻译之在生产环境集群中运行Topology

本文主要讲述如何在生产环境下运行Topology

2016/01/15 13:43
592
1
Storm在Zookeeper中的目录结构

/-{storm-zk-root} -- storm在zookeeper上的根 | 目录 | |-/assignments -- topology的任务分配信息 | | | |-/{topology-id} -- 这个下面保存的是每个 | topology的assignments | 信息包括:...

2018/09/26 21:40
31
0
storm-内部细节

nimbus:topology提交 - 命令行 storm jar allmycode.jar org.me.MyTopology arg1 arg2 arg3 - 执行步骤 - 上传topology的代码 - 由Nimbus$Iface的执行 - 通过beginFileUpload,uploadChunk,f...

2013/10/15 18:45
272
0
ODL连接到juniper MX通过netconf

1. 首先,juniper上启用netconf set system services netconf ssh connection-limit 10 set system services netconf ssh rate-limit 5 set system services netconf ssh port 17830 set sys...

2018/09/02 19:28
292
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部