...

<!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. SpringBoot 简易实现热搜邮件推送，妈妈再也不用担心我不了解国家大事了

    1.前言 上班的时候,无聊的时候,偶尔跑去百度看下热搜,所以就萌生出这种想法,通过邮件推送的方式实现效果,首先找到百度热搜的页面 热搜,话不多说,直接开干. 2.环境准备 因为是个SpringBoot ...

  2. 通用脱敏工具类和判断URL

    通用脱敏工具类 public class DesensitizationUtil { private static final int SIZE = 6; private static final S ...

  3. Mysql 5.7版本，所有的坑，这里都有

    MYSQL5.7版本流程的坑,我这里都有 必须按照如下操作.不按照下面操作,出错误不要怪我哦_ 我们首先在官网下载mysql5.7版本 解压之后,在bin相同目录下创建一个my.ini配置文件里面内容 ...

  4. HTML常用的css属性（及其简写）

    这篇文章主要介绍几个常用css属性和简写 本文目录: 1.背景属性 2.边框属性 3.字体属性 4.外边距 5.填充 6.颜色 1.background[背景属性] background-color ...

  5. Spring中IOC的理解

    Spring中IOC的理解 1.什么是IOC? (1)控制反转.把对象创建和对象间的调用过程交给Spring进行管理. (2)使用IOC的目的:为了耦合度降低. 2.IOC底层原理? (1)xml解析 ...

  6. MySQL技术专题（X）该换换你的数据库版本了，让我们一同迎接8.0的到来哦！（初探篇）

    前提背景 MySQL关是一种关系数据库管理系统,所使用的 SQL 语言是用于访问数据库的最常用的标准化语言,其特点为体积小.速度快.总体拥有成本低,尤其是开放源码这一特点,在 Web应用方面 MySQ ...

  7. Serverless：这真的是未来吗？（二）

    原文 | https://www.pulumi.com/blog/is_serverless_the_future_part_2/ 作者 | Lee Briggs & Piers Karsen ...

  8. DL4J实战之四：经典卷积实例(GPU版本)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  9. Apache Beam入门及Java SDK开发初体验

    1 什么是Apache Beam Apache Beam是一个开源的统一的大数据编程模型,它本身并不提供执行引擎,而是支持各种平台如GCP Dataflow.Spark.Flink等.通过Apache ...

  10. spring boot log4j2 最佳实践

    为什么选择 log4j2 Log4j2 使用了 LMAX Disruptor 库.在多线程场景中,异步 Logger 的吞吐量比 Log4j 1.x 和 Logback 高 18 倍,延迟低几个数量级 ...