JS Sequence Diagrams UML序列图

JS Sequence Diagrams 官网最新下载

JS Sequence Diagrams 在线编译和教程

jQuery 官网最新下载

JS Sequence Diagrams 安装及使用

时序图（Sequence Diagram），亦称为序列图或循序图，是一种UML行为图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序，当执行一个用例行为时，时序图中的每条消息对应了一个类操作或状态机中引起转换的触发事件。

1. 第一种引入，直接引入

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   //将UTF-8编码加入进去
   
   <script src="raphael-min.js"></script>
   <script src="underscore-min.js"></script>
   <script src="sequence-diagram-min.js"></script>
   //将JS Sequence Diagrams库下载及引入到程序
   
   <div id="flow">放置流程图的空间</div>
   <script>
   var diagram = Diagram.parse("Alice->Bob: Hello Bob, how are you?\nNote right of Bob: Bob thinks\nBob-->Alice: I am good thanks!\n");
   //diagram.drawSVG("flow", {theme: 'hand'});//可爱图形
   diagram.drawSVG("flow", {theme: 'simple'});//矩形图形
   </script>
   

2. 第二种引入，用jQuery方法执行：

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   //将UTF-8编码加入进去
   <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
   //百度CDN jQuery在线引入
   //或者
   //本地下载引入
   <script src="jquery.min.js"></script>
   
   <script src="raphael-min.js"></script>
   <script src="underscore-min.js"></script>
   <script src="sequence-diagram-min.js"></script>
   //将JS Sequence Diagrams库下载及引入到程序
   
   <div class="diagram">
   Alice->Bob: Hello Bob, how are you?
   Note right of Bob: Bob thinks
   Bob-->Alice: I am good thanks!
   </div>
   
   <script>
   //$(".diagram").sequenceDiagram({theme: 'hand'});//可爱图形
   $(".diagram").sequenceDiagram({theme: 'simple'});//矩形图形
   </script>