js-sequence-diagrams制作SIP时序图

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,下载地址: https://download.csdn.net/download/xiangjai/11620262

 

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", href="#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('&gt;','g'), '>'));  
		  var options = {
				theme: 'simple'
		  };
		 diagram.drawSVG('diagram', options);  
  
		 $('#uml').html('');
	   
	   function checkReady() {
   
		   $('tspan').each(function(){
				$(this).click(function() {
					var hrefParent = $(this).parent().parent();
					var tempHref = $(hrefParent).attr('href');
					if(tempHref != null && tempHref != undefined) {
						 console.log(tempHref);
					}
				});
		   });
	  } 
	  checkReady();

	</script> 

  </body>
  
  
</html>  

 

3、效果如下

 

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值