js-sequence-diagrams > 时序图
...
<!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 > 时序图的更多相关文章
- Sequence Diagram时序图 - 应该是最简洁有力的业务了
直接看UML吧,一目了然,不用解释.自信男人,无须多言. 这是用ListView显示Post的流程. 这是Uppdate User Profile的流程.自信男人,无须多言.
- 【UML 建模】UML入门 之 交互图 -- 时序图 协作图详解
. 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/17927131 . 动态图概念 : 从静态图中抽取瞬间值 ...
- UML入门 之 交互图 -- 时序图 协作图详解
作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/17927131 动态图概念 : 从静态图中抽取瞬间值的变化描 ...
- [UML]UML系列——时序图（顺序图）sequence diagram
系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类图Class [UML]UML系列——类 ...
- 时序图 Sequence Diagram
时序图(Sequence Diagram)是显示对象之间交互的图,这些对象是按时间顺序排列的. 时序图中显示的是参与交互的对象及其对象之间消息交互的顺序. 下面这张图介绍了时序图的基本内容: 下面这张 ...
- UML建模之时序图（Sequence Diagram）
一.时序图简介(Brief introduction) 二.时序图元素(Sequence Diagram Elements) 角色(Actor) 对象(Object) 生命线(Lifeline) 控制 ...
- UML建模之时序图（Sequence Diagram）<转>
UML建模之时序图(Sequence Diagram) 一.时序图简介(Brief introduction) 二.时序图元素(Sequence Diagram Elements) 角色(Acto ...
- UML时序图(Sequence Diagram)学习笔记
什么是时序图时序图(Sequence Diagram),又名序列图.循序图,是一种UML交互图.它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作. 让我们来看一看visio2016对时序 ...
- 安装StarUML 及使用时序图（Sequence Diagram）和用例图（use case diagram）
时序图 用例图
- Python设计模式 - UML - 时序图(Sequence Diagram)
简介 时序图表示参与者与对象之间.对象与对象之间的动态交互过程及时序关系. 时序图详细而直观地展示了对象随时间变化的状态.调用关系和消息时序,时序图中的主要元素有:参与者(Actor), 对象(Obj ...
随机推荐
- RabbitMQ 3.9.7 镜像模式集群的搭建
1. 概述 老话说的好:做人脚踏实地,一步一个脚印,便定能战胜一切困难,最终取得成功!!! 言归正传,之前我们聊了 RabbitMQ 单点服务的安装,今天我们来聊聊 RabbitMQ 3.9.7 镜像 ...
- 2020.10.30--vj个人赛补题
D - D CodeForces - 743A Vladik is a competitive programmer. This year he is going to win the Interna ...
- 苹果应用内购 ios 开发者根据用户提供的邮件中的订单号查看该订单是否支付成功
苹果应用内购 ios 开发者根据用户提供的邮件中的订单号查看该订单是否支付成功 这是苹果wwdc2021 推出的新功能 参考官网链接 App Store Server API | Apple Deve ...
- 小甲鱼零基础学python第25讲课后习题动手练习--通讯录
小甲鱼零基础学python第25讲课后习题动手练习---通讯录 **************************通讯录要求******************************* 输入指令: ...
- [no code][scrum meeting] Alpha 9
项目 内容 会议时间 2020-04-15 会议主题 OCR验收 会议时长 15min 参会人员 OCR组成员 $( "#cnblogs_post_body" ).catalog( ...
- Prometheus基于Eureka的服务发现
Prometheus基于Eureka的服务发现 一.背景 二.实现步骤 1.eureka 客户端注册到prometheus中 2.prometheus中的写法 3.实现效果 三.完整代码 四.参考链接 ...
- 大厂面试题系列：重载（Overload）和重写（Override）的区别。重载的方法能否根据返回类型进行区分
面试题:重载(Overload)和重写(Override)的区别.重载的方法能否根据返回类型进行区分 面试官考察点猜想 这道题纯粹只是考查基础理论知识,对实际开发工作中没有太多的指导意义,毕竟编辑器都 ...
- Noip模拟69 2021.10.5
考场拼命$yy$高精度结果没学好$for$循环痛失$50pts$,当场枯死 以后一定打对拍,要不考后会... T1 石子游戏 首先要知道典型的$NIM$博弈,就是说如果所有堆石子个数的异或和为$0$则 ...
- python3中的bytes和string
原文链接:https://www.cnblogs.com/abclife/p/7445222.html python 3中最重要的新特性可能就是将文本(text)和二进制数据做了更清晰的区分.文本总是 ...
- NB-IoT的DRX、eDRX、PSM三个模式怎么用？通俗解释，看完就懂！
面我们讲了不少NB-IOT的应用.软件和硬件设计的变动. (链接在文章末尾). 今天讲讲NB-IoT的三大模式,在各种物联网和智能硬件场景中的使用方法 DRX.eDRx.PSM是什么? DRX虽然叫做 ...