架构图(拓扑图)画图工具分析整理(静态,动态,可交互图.层级tu) 百度地图、ECharts整合HT for Web网络拓扑图应用 2.1 绘制动态图,可用于博客教程. 描述流程. (表格用于数据结构)   GraphvizAnim

时间:2024-02-18 14:19:17

最近要画架构图.

一方面有图片洁癖,另外一方面又不想不停的挪动图片.

一开始想用脑图软件. 发现脑图是树状的,架构模块依赖图是网状的.(也可以简化为层级图,不画交互关系.类似 dubbo 的架构图. 外部系统,基础系统,应用层.)

 

到处搜索有什么可编程的方案. 后面搜索到拓扑图.

   简单的布局,画图语言javascript,python很多(变量化),但是有自动布局的组件很少.(graphivz 有自动布局能力,但没有编程功能,变量,for 等缺失.)

1.静态库:

    一开始得到的是一些库或者工具:

    graphviz,gephi,yFiles - Java Graph Layout and Visualization Library, jgraph JavaScript HTML5 Diagramming Library Component, Qunee for HTML5

    graphviz 的难点在于 : 变量, for 循环,逻辑控制.(通过 python 库) 子图之间无法排版. 2007-3-22 . 改进见 http://www.cnblogs.com/fei33423/p/6960368.html

   更牛逼的 http://www.fuzihao.org/blog/2015/08/11/TikZ%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/ TikZ入门教程/ 内含重要的文献

2. 可分层库:

   后面又想到需要分层(利用 泳道和流程来画架构图稍微简单点,自动发出线条):

 搜索 "分层 分级 拓扑 " 搜索到TWaver:   TWaver做拓扑图、3D图,ECharts负责图表。用拓扑图呈现多层级关系图

google 搜索英文"topology layer level  canvas library" ,http://modeling-languages.com/javascript-drawing-libraries-diagrams/ bing 搜索啥都没有搜索到.垃圾,差谷歌 N 个级别  

驱动方式

  • ECharts: 数据驱动,chart.setOption({series, legend …})
  • Qunee for HTML5: API驱动,graph.createNode(..), graph.createEdge(…

      ECharts专注于大众的图表,Qunee专注于专业的拓扑图,图表用户群体比较广,通常配置一下数据就可以显示,而Qunee面向专业开发人员,通常需要编写代码才能实现业务需求.

(来自: Qunee for HTML5与ECharts对比)

 android 绘制如下拓扑图: 有问题了对应端口会红.流量暴增线会粗. 用图片替代 canvas 绘制

3. 可交互库. 分层打开,关闭. 收缩,展开.

  和 gui 结合. 节点化. yFiles java 的. h5的相对比较多. android 和 ios 比较少

后来一想 h5的库的特点是可以交互

再搜索:  twaver qunee

得到

市面上也有很多制作Web版网络拓扑的框架。如: jsplumbQunee (收费的)、 grapheditorDagre-D3HT for WebJtopotwaver 等。

1.http://www.jtopo.com 开源 比较懒

2.TWaver 收费

3.Qunee for HTML5 收费

4.Iolive 免费,服务收费

 

ps: 题外话: 不小心搜索到 图形数据库. 是相对关系型数据库来说的.有

挑战传统关系型数据库:Facebook图形数据库TAO揭秘