...

<!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. Sentry 监控 - Snuba 数据中台架构简介(Kafka+Clickhouse)

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

  2. nginx访问权限问题

    1.问题 server { listen 8011; server_name test.cn; location ~ \.php?.*$ { root /home/zhj/; #fastcgi_pas ...

  3. 【Azure 应用服务】App Service中运行Python 编写的 Jobs，怎么来安装Python包 (pymssql)呢？

    问题描述 在App Service中运行Python编写的定时任务,需要使用pymssql连接到数据库,但是发现使用 python.exe -m pip install --upgrade -r re ...

  4. C++/CLR 使用（VS2012，VS2013，VS2015）编写

    转载自:http://www.th7.cn/system/win/201509/129417.shtml VS2010以及以前的版本,创建项目时都可以在CLR下找到"Windows窗体应用程 ...

  5. 全场景效能平台猪齿鱼常用的前端css实现方案

    ​ 居中 最常用的height + line-height,以及margin:0 auto的居中方式就不再阐述,以下介绍两种容错性高的实现方案. flex布局实现 ​ 猪齿鱼前端日常开发中,我们多以f ...

  6. 时间轮机制在Redisson分布式锁中的实际应用以及时间轮源码分析

    本篇文章主要基于Redisson中实现的分布式锁机制继续进行展开,分析Redisson中的时间轮机制. 在前面分析的Redisson的分布式锁实现中,有一个Watch Dog机制来对锁键进行续约,代码 ...

  7. [源码解析] PyTorch如何实现前向传播(3) --- 具体实现

    [源码解析] PyTorch如何实现前向传播(3) --- 具体实现 目录 [源码解析] PyTorch如何实现前向传播(3) --- 具体实现 0x00 摘要 0x01 计算图 1.1 图的相关类 ...

  8. 【数据结构与算法Python版学习笔记】图——基本概念及相关术语

    概念 图Graph是比树更为一般的结构, 也是由节点和边构成 实际上树是一种具有特殊性质的图 图可以用来表示现实世界中很多有意思的事物,包括道路系统.城市之间的航班.互联网的连接,甚至是计算机专业的一 ...

  9. Google Object detection配置与使用

    Google Object detection 前言: 本文记录了使用Google发布的Object detection(July 1st, 2019)接口,完成了对标注目标的检测.参考了很多博文,在 ...

  10. Beta阶段第二次会议

    时间:2020.5.18 工作进展 姓名 工作 难度 完成度 ltx 1.在开小程序开发文档,学习相关知识 轻 85% xyq 1.完成活动场地申请可视化代码(耗时半天) 中 100% lm 1.设计 ...