JS Sequence Diagrams 官网最新下载
JS Sequence Diagrams 在线编译和教程
jQuery 官网最新下载
JS Sequence Diagrams 安装及使用
时序图(Sequence Diagram),亦称为序列图或循序图,是一种UML行为图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序,当执行一个用例行为时,时序图中的每条消息对应了一个类操作或状态机中引起转换的触发事件。
-
第一种引入,直接引入
<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>
-
第二种引入,用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>
原文地址:https://blog.csdn.net/yilovexing
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。