因為工作關系，最近用到了拓撲圖，找了一溜工具后，發現了這個--JTopo，純國產而且免費
當然了如果你英文水平足夠好的話。也可以看看這些英文的做拓撲圖的工具，以下網站出自知乎回答：開源HTML5 繪圖工具
回到JTopo上來，正JTopo首頁上說的那樣：給我一塊'布', 我能在上面畫出一個美麗的軟件世界。
首先要在JSP頁面中加入畫布標簽：<canvas>
<canvas width="800" height="500" id="canvas" style=" background-color:#EEEEEE; border:1px solid #444;">
下面看官網上的API文檔，Jtopo的核心對象有6個，分別是Stage（舞台對象），Scene（場景對象），Node（節點對象），Link（連線對象），Container（容器對象），Effect.Animate（動畫效果）,下面挑每個對象值得注意的地方說一下
1 Stage：
1.1 Mode屬性：
| normal[默認] | 可以點擊選中單個節點（按住Ctrl可以選中多個），點中空白處可以拖拽整個畫面 |
| drag | 該模式下不可以選擇節點，只能拖拽整個畫面 |
| select | 可以框選多個節點、可以點擊單個節點 |
| edit | 在默認基礎上增加了：選中節點時可以通過6個控制點來調整節點的寬、高 |
1.2 add/remove（scene）函數：
將一個場景加入到/移除出舞台效果
1.3 setCenter（x,y）函數：
設置舞台的中心坐標點（舞台平移）
2 Scene：
2.1 Mode屬性和Stage屬性一致
2.2 alpha屬性：場景的透明度
2.3 show()/hide() 函數：
表示場景的顯示/隱藏
2.4 add/remove(element)函數：
添加對象到當前場景/移除場景中的某個元素
2.5 findElements（code）函數：
查找場景中的對象
3 Node：
3.1 dragable/selected/editAble/rotate屬性：
設置節點是否可以被拖動/是否被選中/是否可編輯/節點旋轉的角度
3.2 setImage（url）/setBound（x,y,width,height）函數：
設置節點的圖片/坐標和寬，高
4Link：
NodeA/NodeZ/style.strokeColor
起始節點/終止節點/連線的顏色
兩個簡單的示例：
1 創建隨機節點對象：
$(document).ready(function() {
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 創建一個舞台對象
var scene = new JTopo.Scene(stage); // 創建一個場景對象
var node = new JTopo.Node("Hello"); // 創建一個節點
node.setLocation(300, 200); // 設置節點坐標
node.rotate = Math.random(); // 旋轉角度
node.scaleX = Math.random(); // 水平方向的縮放
node.scaleY = Math.random(); // 垂直方向的縮放
node.alpha = Math.random(); // 透明度
node.setImage('img/bg.jpg'); // 設置圖片
scene.add(node); // 放入到場景中
});
2 各種連線：
$(document).ready(function() {
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
var scene = new JTopo.Scene(stage);
scene.background = 'img/bg.jpg';
// 節點
function newNode(x, y, w, h, text){
var node = new JTopo.Node(text);
node.setLocation(x, y);
node.setSize(w, h);
scene.add(node);
return node;
}
// 簡單連線
function newLink(nodeA, nodeZ, text, dashedPattern){
var link = new JTopo.Link(nodeA, nodeZ, text);
link.lineWidth = 3; // 線寬
link.dashedPattern = dashedPattern; // 虛線
link.bundleOffset = 60; // 折線拐角處的長度
link.bundleGap = 20; // 線條之間的間隔
link.textOffsetY = 3; // 文本偏移量（向下3個像素）
link.strokeColor = '0,200,255';
scene.add(link);
return link;
}
// 折線
function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){
var link = new JTopo.FoldLink(nodeA, nodeZ, text);
link.direction = direction || 'horizontal';
link.arrowsRadius = 15; //箭頭大小
link.lineWidth = 3; // 線寬
link.bundleOffset = 60; // 折線拐角處的長度
link.bundleGap = 20; // 線條之間的間隔
link.textOffsetY = 3; // 文本偏移量（向下3個像素）
link.strokeColor = JTopo.util.randomColor(); // 線條顏色隨機
link.dashedPattern = dashedPattern;
scene.add(link);
return link;
}
// 二次折線
function newFlexionalLink(nodeA, nodeZ, text, direction, dashedPattern){
var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
link.direction = direction || 'horizontal';
link.arrowsRadius = 10;
link.lineWidth = 3; // 線寬
link.offsetGap = 35;
link.bundleGap = 15; // 線條之間的間隔
link.textOffsetY = 10; // 文本偏移量（向下15個像素）
link.strokeColor = '0,250,0';
link.dashedPattern = dashedPattern;
scene.add(link);
return link;
}
// 曲線
function newCurveLink(nodeA, nodeZ, text){
var link = new JTopo.CurveLink(nodeA, nodeZ, text);
link.lineWidth = 3; // 線寬
scene.add(link);
return link;
}
var from = newNode(100, 60, 30, 30);
var to = newNode(300, 60, 30, 30);
var link = newLink(from, to, 'Arrow', 5);
link.arrowsRadius = 10;
var from = newNode(100, 120, 30, 30);
var to = newNode(300, 120, 30, 30);
var link = newLink(from, to, 'Link');
var from = newNode(100, 200, 30, 30);
var to = newNode(200, 300, 30, 30);
var link = newFoldLink(from, to, 'FoldLink');
var link = newFoldLink(to, from,'FoldLink', 'vertical', 5);
var from = newNode(100, 300, 30, 30);
var to = newNode(200, 400, 30, 30);
var link = newFoldLink(from, to, 'FoldLink', 'vertical');
var from = newNode(450, 250, 30, 30);
var to = newNode(400, 100, 30, 30);
var link = newFlexionalLink(from, to, 'FlexLink1');
var from = newNode(600, 100, 30, 30);
var to = newNode(650, 200, 30, 30);
var link = newFlexionalLink(from, to, 'f', 'vertical', 2);
var from = newNode(450, 400, 30, 30);
var link = newLink(from, from, 'loop');
var from = newNode(550, 400, 30, 30);
var to = newNode(650, 300, 30, 30);
var link = newCurveLink(from, to, 'curve');
});