js-sequence-diagrams 是一款基于 Javascript 的Web绘制时序图的工具，底层依赖 raphael，最终是生成 SVG。
插件地址：https://github.com/bramp/js-sequence-diagrams
文档及实例地址：https://bramp.github.io/js-sequence-diagrams/
1、引入必须的文件：
<link href="sequence-diagram-min.css" rel="stylesheet" />
<script src="webfont.js"></script>
<script src="snap.svg-min.js"></script>
<script src="raphael.min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>
<script src="jquery-2.1.1.js" ></script>
上述包已上传至csdn，下载地址:
2、你可以直接用html dom的形式, 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<link href="sequence-diagram-min.css" rel="stylesheet" />
<script src="webfont.js"></script>
<script src="snap.svg-min.js"></script>
<script src="raphael.min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>
<script src="jquery-2.1.1.js" ></script>
</head>
<body>
<pre id="uml">
Title: 呼叫建立流程
终端代理A->代理服务器: Invite(1)
代理服务器-->终端代理B: Invite(2)[color="gray", name="test"]
代理服务器-->终端代理A: 100 Trying(3)[color="gray"]
终端代理B->代理服务器: 180 Ringing(4)
代理服务器->终端代理A: 180 Ringing(5)
终端代理B->代理服务器: 200 OK(6)[color="red", fontcolor="blue"]
代理服务器->终端代理A: 200 OK(7)[fillcolor="gray", fontcolor="blue"]
终端代理A->代理服务器: ACK(8)
代理服务器-->终端代理B: ACK(9)
终端代理B-->终端代理A: 通话(10)
</pre>
<div id="diagram">--</div>
<script>
var diagram = Diagram.parse($('#uml').html().replace(new RegExp('>','g'), '>'));
var options = {
theme: 'simple'
};
diagram.drawSVG('diagram', options);
$('#uml').html('');
function checkReady() {
$('tspan').each(function(){
$(this).click(function() {
alert('');
});
});
}
checkReady();
</script>
</body>
</html>
3、效果如下