架构图(拓扑图)画图工具分析整理(静态,动态,可交互图.层级tu)

最近要画架构图.

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

一开始想用脑图软件. 发现脑图是树状的,架构模块依赖图是网状的.(也可以简化为层级图,不画交互关系.类似 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 绘制

百度地图、ECharts整合HT for Web网络拓扑图应用

 

2.1 绘制动态图,可用于博客教程. 描述流程. (表格用于数据结构)

   GraphvizAnim

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

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

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

再搜索:  twaver qunee

得到

市面上也有很多制作Web版网络拓扑的框架。如： jsplumb 、 Qunee (收费的)、 grapheditor 、 Dagre-D3 、 HT for Web 、 Jtopo 、 twaver 等。

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

2.TWaver 收费

3.Qunee for HTML5 收费

4.Iolive 免费，服务收费

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

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