使用HTML5制作網絡拓撲圖的方式有主要有Canvas和SVG，Jtopo采用HTML5的Canvas實現，可以使用到Html5的平臺(PC，手機，平板)，免費易用，適用於瀏覽器IE, Firefox, Safari,Chrome等

開發流程：
1.引入jtopo.js文件

<script type="text/javascript" src="js/jtopo-min.js"></script>

2.Canvas標簽定義拓撲圖

<canvas width="910" height="400" id="canvas"></canvas>

3.繪制拓撲圖

$(document).ready(function(){ 
var canvas = document.getElementById(‘canvas‘);
var stage = new JTopo.Stage(canvas);//創建舞臺對象
var scene = new JTopo.Scene(stage); //創建場景對象 
scene.alpha = 1;


//加節點
function addNode(text, color){
var node = new JTopo.Node();
node.setImage(‘./img/topo/‘+ color +‘.png‘, true);
node.fontColor 
 
= ‘0,0,0‘;
scene.add(node);

node.mouseover(function(){
this.text = text;
});
node.mouseout(function(){
this.text = null;
});
return node;
}


//連線
function addLink(nodeA, nodeZ){
var link = new JTopo.FlexionalLink(nodeA, nodeZ);
link.strokeColor = ‘204,204,204‘;
link.lineWidth = 1;
scene.add(link);
return link;
}

 
var rootNode = addNode(‘root‘, ‘gray‘);

var icons = [‘green‘, ‘blue‘, ‘red1‘, ‘red2‘];
for(var i=0; i<icons.length; i++){

var node = addNode(‘second_‘ + i, icons[i]); 
addLink(rootNode, node); 
if(i == 0 || i == icons.length - 1){
for(var j=0; j<4; j++){
var thirdNode = addNode(‘third_‘ + j, ‘green‘);
addLink(node, thirdNode);

}
}
}

// 樹形布局
scene.doLayout(JTopo.layout.TreeLayout(‘down‘, 30, 107));
});

更多實例官網中都有

拓撲框架Jtopo