...

<!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. ASP.NET Core 中间件的使用（三）：全局异常处理机制

    前言 我们经常听到"秒修复秒上线",觉得很厉害的样子. 其实不然,这只是一个调侃而已,出现问题的方式很多(逻辑漏洞.代码异常.操作方式不正确等). 我们今天来说代码异常问题怎么快速 ...

  2. Kettle学习笔记（一）— 环境部署及运行

    目录 Kettle学习笔记(一)-环境部署及运行 Kettle学习笔记(二)- 基本操作 kettle学习笔记(三)- 定时任务的脚本执行 Kettle学习笔记(四)- 总结 Kettle简介 Ket ...

  3. 【C++ Primer Plus】编程练习答案——第5章

    1 void ch5_1() { 2 using namespace std; 3 int small, big, sum{0}; 4 cout << "enter small ...

  4. A Three-Stage Self-Training Framework for Semi-Supervised Semantic Segmentation

    论文阅读笔记: A Three-Stage Self-Training Framework for Semi-Supervised Semantic Segmentation 基本信息 \1.标题:A ...

  5. Linux下关于用户账户的几个文件解析

    Linux下关于用户账户的几个文件解析 Linux是一个多用户系统,但是对于一个多用户共存的系统中,当然不能够出现用户相互越权等一系列的安全问题,所以如何正确的管理账户成为了Linux系统中至关重要的 ...

  6. Linux——Docker安装

    1. 安装Docker i :环境准备:Linux要求内核3.0以上 ii:安装 #1.卸载旧版本 yum remove docker \ docker-client \ docker-client- ...

  7. Scrum Meeting 0605

    零.说明 日期:2021-6-5 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 困难 qsy PM&前端 暂无 重新设 ...

  8. [对对子队]会议记录5.18(Scrum Meeting5)

    今天已完成的工作 何瑞 ​ 工作内容:搭建第8关 ​ 相关issue:搭建关卡7.8.9 ​ 相关签入:feat:初步搭建了Lv8 吴昭邦 ​ 工作内容:搭建第8关 ​ 相关issue:搭建关卡7.8 ...

  9. Scrum Meeting 最终总结

    [软工小白菜]Scrum Meeting 最终总结 2020/4/28 一.会议内容 1.工作及计划 组员代号 完成的工作 明日计划 炎龙 1.整合了整个程序,生成了apk并且上传审核 无 风鹰 1. ...

  10. 使用flink实现一个简单的wordcount

    使用flink实现一个简单的wordcount 一.背景 二.需求 三.前置条件 1.jdk版本要求 2.maven版本要求 四.实现步骤 1.创建 flink 项目 2.编写程序步骤 1.创建Str ...