jTopo（Javascript Topology library)是一款完全基於HTML5 Canvas的關系、拓撲圖形化界面開發工具包。官網：http://www.jtopo.com/
jTopo是免費的，而且文檔是中文的，很容易看懂。你可以基於它進行二次開發，能夠快速創建一些關系圖、拓撲等相關圖形化的展示。
下面是我用jTopo繪制網絡拓撲圖的小例子：
<!DOCTYPE html> <html> <head> <title> </title> <script src="./jtopo-0.4.8-min.js"></script> <script src="./jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ function node(x, y, img){ var node = new JTopo.Node(); node.setImage('./img/' + img, true); node.setLocation(x, y); scene.add(node); return node; } function node2(img){ var node = new JTopo.Node(); node.setImage('./img/' + img, true); // node.setLocation(x, y); scene.add(node); return node; } function linkNode(nodeA, nodeZ, f){ var link; if(f){ link = new JTopo.FoldLink(nodeA, nodeZ); }else{ link = new JTopo.Link(nodeA, nodeZ); } link.direction = 'vertical'; scene.add(link); return link; } var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); var scene = new JTopo.Scene(stage); //設置背景 scene.background = './img/bg.jpg'; var r1 = node(500, 100, 'router.png'); //使用樹形拓撲時，根節點要做如下賦值 r1.layout = {type: 'tree', width:100, height: 100}; // var s1 = node(400, 100, 'server.png'); var s1 = node2('server.png'); s1.text = '192.168.1.1'; // 文字 s1.fontColor = '0,0,0'; // var s2 = node(400, 200, 'server.png'); var s2 = node2('server.png'); s2.text = '192.168.1.2'; s2.fontColor = '0,0,0'; // s2.layout = {type: 'tree', width:50, height: 100}; var c1 = node(100, 100, 'client.png'); c1.text = '127.0.0.1'; c1.fontColor = '0,0,0'; var cloud = node(200, 80, 'cloud.png'); cloud.text='公網'; cloud.textPosition = 'Middle_Center';// 文字居中 cloud.fontColor = '0,0,0'; var web_server = node(300, 100, 'server_database.png'); web_server.text='web服務器'; web_server.fontColor = '0,0,0'; var r2 = node(400, 100, 'router.png'); linkNode(c1,cloud); linkNode(cloud,web_server); linkNode(web_server,r2); linkNode(r2,r1); //畫樹形拓撲時要把父節點放置於第一個參數，比如此函數中的r1 linkNode(r1, s1); linkNode(r1, s2); s2.alarm="ping不通"; setInterval(function(){ if(s2.alarm == 'ping不通'){ s2.alarm = null; }else{ s2.alarm = 'ping不通' } }, 600); // linkNode(h1, r1); JTopo.layout.layoutNode(scene, r1, true); } ); </script> </head> <body> <canvas id="canvas" width="910" height="400"></canvas> </body> </html>
效果圖如：
