最近要畫架構圖.
一方面有圖片潔癖,另外一方面又不想不停的挪動圖片.
一開始想用腦圖軟件. 發現腦圖是樹狀的,架構模塊依賴圖是網狀的.(也可以簡化為層級圖,不畫交互關系.類似 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版網絡拓撲的框架。如： jsplumb 、 Qunee (收費的)、 grapheditor 、 Dagre-D3 、 HT for Web 、 Jtopo 、 twaver 等。
1.http://www.jtopo.com 開源 比較懶
2.TWaver 收費
3.Qunee for HTML5 收費
ps: 題外話: 不小心搜索到 圖形數據庫. 是相對關系型數據庫來說的.有
挑戰傳統關系型數據庫：Facebook圖形數據庫TAO揭秘