...

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>时序图</title>

        <script src="js/webfont.js"></script>

        <script src="js/underscore.js"></script>

        <script src="js/snap.svg-min.js"></script>

        <script src="js/sequence-diagram-min.js"></script>

    </head>

    <body>

        <pre id="text">

Title: 标题

    participant 名称     // 声明

    Note left of 名称:注释的内容 (左)

    Note right of 名称:注释的内容 (右)

    Note over 名称:注释的内容 (中间)

    Note over 称呼,名称: 显示的内容 (跨越 | 两个)

    称呼->名称:显示的内容 // 直线

    称呼-->名称:显示的内容 // 虚线

    名称->>称呼:显示的内容 // 大箭头

    称呼-->>名称     // 声明:显示的内容 // 虚线加大箭头，返回都最初

    名称-->>名称:显示的内容   // 自己》自己

        </pre>

        <!-- 语法 “” https://github.com/bramp/js-sequence-diagrams/blob/master/src/grammar.jison -->

        <div id="diagram"></div>

    </body>

    <script>

        /*var t ="Title: This is a title"

            +"\nparticipant 镇街收件意见"

            +"\nparticipant 镇街初审意见"

            +"\nparticipant 镇街复审意见"

            +"\nparticipant 中心初审意见"

            +"\nparticipant 中心复审意见"

            +"\nparticipant 区局终审意见"

            +"\nNote right of 镇街收件意见: 镇街收件意见...";*/

        //var d = Diagram.parse(t);

        var d = Diagram.parse(document.getElementById('text').innerText);

        //var diagram = Diagram.parse(document.getElementById('uml').innerText);

        var options = {

            //更改图表的样式，通常是'simple'，'hand'之一。可以使用registerTheme（...）注册新主题。

            theme: 'simple'

            //应用于图表svg标记的CSS样式。（仅在使用snap.svg时支持）

        };

        d.drawSVG('diagram', options);

    </script>

</html>

js-sequence-diagrams > 时序图的更多相关文章

  1. Sequence Diagram时序图 - 应该是最简洁有力的业务了

    直接看UML吧,一目了然,不用解释.自信男人,无须多言. 这是用ListView显示Post的流程. 这是Uppdate User Profile的流程.自信男人,无须多言.

  2. 【UML 建模】UML入门 之 交互图 -- 时序图 协作图详解

    . 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/17927131 . 动态图概念 : 从静态图中抽取瞬间值 ...

  3. UML入门 之 交互图 -- 时序图 协作图详解

    作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/17927131 动态图概念 : 从静态图中抽取瞬间值的变化描 ...

  4. [UML]UML系列——时序图（顺序图）sequence diagram

    系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类图Class [UML]UML系列——类 ...

  5. 时序图 Sequence Diagram

    时序图(Sequence Diagram)是显示对象之间交互的图,这些对象是按时间顺序排列的. 时序图中显示的是参与交互的对象及其对象之间消息交互的顺序. 下面这张图介绍了时序图的基本内容: 下面这张 ...

  6. UML建模之时序图（Sequence Diagram）

    一.时序图简介(Brief introduction) 二.时序图元素(Sequence Diagram Elements) 角色(Actor) 对象(Object) 生命线(Lifeline) 控制 ...

  7. UML建模之时序图（Sequence Diagram）<转>

    UML建模之时序图(Sequence Diagram)   一.时序图简介(Brief introduction) 二.时序图元素(Sequence Diagram Elements) 角色(Acto ...

  8. UML时序图(Sequence Diagram)学习笔记

    什么是时序图时序图(Sequence Diagram),又名序列图.循序图,是一种UML交互图.它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作. 让我们来看一看visio2016对时序 ...

  9. 安装StarUML 及使用时序图（Sequence Diagram）和用例图（use case diagram）

    时序图 用例图

  10. Python设计模式 - UML - 时序图(Sequence Diagram)

    简介 时序图表示参与者与对象之间.对象与对象之间的动态交互过程及时序关系. 时序图详细而直观地展示了对象随时间变化的状态.调用关系和消息时序,时序图中的主要元素有:参与者(Actor), 对象(Obj ...

随机推荐

  1. vue+element实现省区市三级联动以及详细地址的输入

    Vue+elementui实现省区市三级联动+详细地址的输入 详细需求,需要手动更改用户所在的地址. 安装依赖项 npm install element-china-area-data -S 在组建中 ...

  2. 解决连接云服务器的redis失败

    在本地连接服务器redis的时候,发现连接失败,这是因为服务器上的redis开启保护模式运行,该模式下是无法进行远程连接的.只需要修改redis目录下的redis.conf文件,找到 protecte ...

  3. Three 之 Animation 初印象

    Animation 初印象 动画效果 播放动画需要基本元素 AnimationMixer 一个对象所有动作的管理者 用于场景中特定对象的动画的播放器.一个对象可能有多个动作,Mixer 是用来管理所有 ...

  4. SPOJ16636 Journey IE2

    SPOJ16636 Journey IE2 更好的阅读体验 在Byteland有n个城市,编号从1到n.这些城市由m条双向道路网络连接.众所周知,每一对城市最多只能由一条道路连接. Byteman最近 ...

  5. ThreadLocalRandom类原理分析

    1.Random类及其局限性 public int nextInt(int bound) { if (bound <= 0) throw new IllegalArgumentException ...

  6. FastAPI 学习之路（三十八）Static Files

    如果使用前后台不分离的开发方式,那么模板文件中使用的静态文件,比如css/js等文件的目录需要在后台进行配置,以便模板渲染是能正确读到这些静态文件.那么我们应该如何处理呢. 首先安装依赖 pip in ...

  7. 【Deeplearning.ai 】吴恩达深度学习笔记及课后作业目录

    吴恩达深度学习课程的课堂笔记以及课后作业 代码下载:https://github.com/douzujun/Deep-Learning-Coursera 吴恩达推荐笔记:https://mp.weix ...

  8. 【Linux命令063】Linux非常简单常用的入门命令

    Linux常用命令 这是一篇我在公众号上发布的文章,还算较为受欢迎. 博客园这边荒废好长时间了,主要是最近一年经常撰写的文章都是Linux相关的入门文章. 不知道是否能通过博客园的首页审核. 1.cd ...

  9. BUAAOO第四单元总结

    ---恢复内容开始--- 一.本单元两次作业的架构设计 第十三次作业:本次作业我创建了四个类,除去官方提供的Main和MyUmlInteraction类之外,还有Uclass和Ulinterface分 ...

  10. java中生成和验证jwt

    在这篇文章中主要记录一下在Java中如何使用 java 代码生成jwt token,主要是使用jjwt来生成和验证jwt,关于什么是JWT,以及JWT可以干什么不做详解. jwt的格式: base64 ...