jTopo官網：http://www.jtopo.com/
1、特點：
基於HTML5 Canvas，不依賴其他庫
2、應用：
效果：
在HTML頁面中引入jtopo.min.js文件，添加一個canvas：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>繪製拓撲圖</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/base.css">
<script type="text/javascript" src="js/jtopo-min.js"></script>
<script type="text/javascript" src="js/toolbar.js"></script>
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap-responsive.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<ul id="contextmenu" style="display: none;">
<li><a>順時針旋轉</a></li>
<li><a>逆時針旋轉</a></li>
<li><a>放大</a></li>
<li><a>縮小</a></li>
<li><a>節點詳情</a></li>
<li><a>編輯節點</a></li>
<li><a>刪除該節點</a></li>
</ul>
<ul id="linemenu" style="display: none;">
<li><a>刪除該連線</a></li>
</ul>
<ul id="detail" style="display:none;background-color :#d3d3d3;"></ul>
<div class="container">
<div id="content">
<div class="row clearfix">
<div class="span2">
<div class="coms" id="components">
<div class="component" title="exchanger" trigger="manual">
<a class=" icon exchanger"></a>
</div>
<div class="component" title="server" trigger="manual">
<a class=" icon server"></a>
</div>
<div class="component" title="subnetwork" trigger="manual">
<a class=" icon subnetwork"></a>
</div>
<div class="component" title="node" trigger="manual">
<a class=" icon node"></a>
</div>
<div class="linkline" title="greenline" trigger="manual">
<span class=" line greenline" id='1'></span>
</div>
<div class="linkline" title="orangeline" trigger="manual">
<span class=" line orangeline" id='2'></span>
</div>
<div class="linkline" title="redline" trigger="manual">
<span class=" line redline" id='3'></span>
</div>
</div>
</div>
<div class="span10">
<canvas width="850" height="400" id="target"></canvas>
</div>
</div> <!-- row -->
</div> <!-- /content -->
</div> <!-- /container -->
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<script src="js/com.js"></script>
</body>
</html>
根據自身需求，控制節點、連線等的樣式；
給節點、連線添加右鍵菜單；
可以通過添加鼠標事件實現拖拽組件繪製拓撲圖；
節點、連線、右鍵菜單、拓撲圖的數據可用json格式在前後端傳遞。