CSDN-Markdown编辑器之UML序列图

转载声明:http://blog.csdn.net/testcs_dn/article/details/44274339

目录


UML序列图简介


时序图(Sequence Diagram),亦称为序列图或循序图,是一种UML行为图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序,当执行一个用例行为时,时序图中的每条消息对应了一个类操作或状态机中引起转换的触发事件。

时序图元素


时序图中包括如下元素:角色,对象,生命线,激活期和消息

1、角色(Actor)

系统角色,可以是人或者其他系统,子系统。

2,对象(Object)

对象代表时序图中的对象在交互中所扮演的角色,位于时序图顶部和对象代表类角色。 
对象一般包含以下三种命名方式: 
第一种方式包含包含对象名和类名 
第二种方式只显示类名不显示对象名,即为一个匿名对象。 
第三种方式只显示对象名不显示类名。

3,生命线(Lifeline)

生命线代表时序图中的对象在一段时期内的存在。时序图中每个对象和底部中心都有一条垂直的虚线,这就是对象的生命线,对象间 的消息存在于两条虚线间。

4,激活期(Activation)

激活期代表时序图中的对象执行一项操作的时期,在时序图中每条生命线上的窄的矩形代表活动期。它可以被理解成C语言语义中一对花括号“{}”中的内容

5,消息(Message)

消息是定义交互和协作中交换信息的类,用于对实体间的通信内容建模,信息用于在实体间传递信息。允许实体请求其他的服务,类角色通过发送和接受信息进行通信。

时序图结构


时序图描述对象是如何交互的,并且将重点放在消息序列上。也就是说,描述消息是如何在对象间发送和接收的。时序图有两个坐标轴:纵坐标轴显示时间,横坐标轴显示对象。每一个对象的表示方法是:矩形框中写有对象和 / 或类名,且名字下面有下划线;同时有一条纵向的虚线表示对象在序列中的执行情况 ( 即发送和接收的消息对象的活动 ) , 这条虚线称为对象的生命线。对象间的通信用对象的生命线之间的水平的消息线来表示,消息线的箭头说明消息的类型,如同步,异步或简单 。 浏览时序图的方法是,从上到下查看对象间交换的消息,分析那些随着时间的流逝而发生的消息交换。 
时序图中的消息可以是信号、操作调用或类似于 C++ 中的 RPC ( Remote Procedure Call,远程过程调用)或 Java 中的 RMI ( Remote Method Invocation , 远程方法调用)。当对象接收到一个消息时,该对象中的一项活动就会启动,我们把这一过程称做激活 ( Activation )。 激活会显示控制焦点,表明对象在某一个时间点开始执行。一个被激活的对象或者是执行它自身的代码,或者是等待另一个对象的返回(该被激活的对象已经向另一个对象发送了消息)。在图形上,激活被绘制为对象生命线上的一个瘦高矩形。 
消息可以用消息名及参数来标识。消息还可带有条件表达式,表示分支或决定是否发送消息。如果用于表示分支,则每个分支是相互排斥的,即在某一时刻仅可发送分支中的一个消息。消息也可以有顺序号,但是在时序图中,消息的顺序号很少使用,因为时序图已经将消息的顺序显式地表示出来了。 
一个对象可以通过发送消息来创建另一个对象,当一个对象被删除或自我删除时,该对象用 “X”标识。

这里以“TCP协议中的三次握手”来讲一下Markdown编辑器中UML序列图的应用。

连接建立的过程:


<code class="hljs haskell has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> ```sequence
<span class="hljs-type" style="box-sizing: border-box; color: rgb(102,102);">Title</span>:连接建立的过程
客户主机->服务器主机: 连接请求(<span class="hljs-type" style="box-sizing: border-box; color: rgb(102,102);">SYN</span>=<span class="hljs-number" style="color: rgb(0,102,102); box-sizing: border-box;">1</span>,seq=client_isn) 
服务器主机->客户主机: 授予连接(<span class="hljs-type" style="box-sizing: border-box; color: rgb(102,seq=client_isn)\n ack=client_isn+<span class="hljs-number" style="color: rgb(0,102); box-sizing: border-box;">1</span>
客户主机->服务器主机: 确认(<span class="hljs-type" style="box-sizing: border-box; color: rgb(102,102); box-sizing: border-box;">0</span>,seq=client_isn+<span class="hljs-number" style="color: rgb(0,102); box-sizing: border-box;">1</span>)\nack=server_isn+<span class="hljs-number" style="color: rgb(0,102); box-sizing: border-box;">1</span>
 ```</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238,238,238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,221,221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

呈现效果


连接建立的过程客户主机客户主机服务器主机服务器主机连接请求(SYN=1,seq=client_isn)授予连接(SYN=1,seq=client_isn) ack=client_isn+1确认(SYN=0,seq=client_isn+1)ack=server_isn+1

上例中,标题“连接建立的过程”使用“Title:”标识,通信双方“客户主机与服务器主机”,第二行语句中“客户主机与服务器主机”出现的顺序决定图中出现的位置;

“客户主机与服务器主机”间使用“->”减号大于号,右侧使用“:”冒号(注意必须是英文半角的)。

第三行语句中“服务器主机”在前,“客户主机”主机在后,箭头的方向就是从“服务器主机到客户主机”。

另外,第三行、第四行语句中消息内容比较长,使用“\n”反斜杠字母n进行了换行。

示例二:


注意:此例中“客户主机与服务器主机”间使用“–>>”两个减号两个大于号,一个减号呈现为实线,两个减号呈现为虚拟;一个大于号呈现为实心箭头,两个大于号呈现为开放箭头。

对象顺序


通过角色、对象列表,您可以更改它们的顺序

<code class="hljs autohotkey has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> <span class="hljs-escape" style="box-sizing: border-box;">``</span><span class="hljs-escape" style="box-sizing: border-box;">`s</span>equence
<span class="hljs-label" style="box-sizing: border-box;">Note left of C:</span>我在第一位
participant C 
participant B 
participant <span class="hljs-literal" style="color: rgb(0,102); box-sizing: border-box;">A</span> 
<span class="hljs-label" style="box-sizing: border-box;">Note right of A:</span> 通过角色、对象列表,\n您可以更改它们的顺序
 <span class="hljs-escape" style="box-sizing: border-box;">``</span>`</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

CCCCBBAAAA我在第一位通过角色、对象列表,您可以更改它们的顺序

通过“participant”角色、对象列表,您可以更改它们的顺序。 
通过“Note left of”可以在角色、对象的左侧显示信息。 
通过“Note right of”可以在角色、对象的右侧显示信息。

跨对象的消息


<code class="hljs mathematica has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> ```sequence Title: Here is a title A->B: <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">Normal</span> line B--><span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">C</span>: <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">Dashed</span> line <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">C</span>->><span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">D</span>: <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">Open</span> arrow <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">D</span>-->>A: <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">Dashed</span> open arrow ```</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238,221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

Here is a titleAABBCCDDNormal lineDashed lineOpen arrowDashed open arrow

相关文章


CSDN-Markdown编辑器之UML序列图

Markdown编辑器语法指南

CSDN-markdown编辑器之从本机导入Markdown文件(二)

CSDN-markdown编辑器之从本机导入Markdown文件(一)

CSDN-markdown编辑器之从线上导入Markdown文件

CSDN-markdown编辑器使用LaTex数学公式

CSDN-markdown编辑器插入网上或本地电脑上的图片

CSDN-markdown编辑器简洁的语法与呈现效果对照2

CSDN-markdown编辑器简洁的语法与呈现效果对照

无需上网,离线也能用Markdown写博客

Markdown编辑器“MarkdownPad”下载安装(图)

走近CSDN博客Markdown编辑器

欢迎使用CSDN-markdown编辑器


原文地址:https://blog.csdn.net/yilovexing

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是一门用来描述网页上样式的语言,通过编写CSS代码可以实现网页中各元素的大小、颜色、字体等各种样式的控制。那么如何在HTML代码中应用CSS样式来改变字体颜色呢?这里为大家介绍一下。 首先,在HTML代码...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及z-index属性。 img { position: relative; z-index: -1; } p { position: absolute; to...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的文字字体。常用的字体标签是font和style,下面我们来学习如何使用这些标签。 1. font标签 使用font标签可以改变文字的字体、颜色和大小。它有三个属性font-family、color和...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环节,因为它们直接关系到页面的可读性和视觉效果。 要指定文本的字体和字号,可以使用HTML中的样式属性。使用样式属性设置字体和字号,如下所示: <p style="font-family: Aria...
HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建网页的标准语言。它由许多标签(一对尖括号包围的关键字)组成,这些标签告诉浏览器如何显示内容。使用HTML代码,我们可以轻松地创建各种类型的图像和图形,如太极图。 在HTM...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以通过这个链接直接跳转到其他网站。在HTML中,实现外链的方法很简单,只需要使用标签就可以了。 <a href="http://www.example.com">这是一个外链,点击跳转到www.ex...
HTML代码是实现网页界面的基础,而网页中的各种表单则是用户和网站进行交互的重要方式之一。下面我们来介绍如何使用HTML代码实现一个简单的报名表格。 <form action="submit.php" method="post"> &lt...
HTML是一种标记语言,用于开发网站和其他互联网内容。字体是网站设计中的关键元素之一,它可以决定网站的整体风格和呈现效果。HTML提供了字体编辑器,使网站设计变得更加容易。 <font face="Arial"> 这里是Arial字体 &...
HTML代码中,字体样式是开发者们必备的一部分。在HTML中,我们可以通过特定的标签和属性设置字体的样式、颜色和大小,以达到更好的排版效果。 <p style="font-size: 14px; color: #333; font-family:...
HTML中的字体可以设为粗体,以强调文本信息。我们可以通过使用一些标签来实现这一功能。其中,常用的标签包括: 1. 标签:该标签会把文本加粗显示,语法如下: 这是一段加粗的文本 2. 标签:与标签作用相同,但语义更强,表示该文本内容的重要性。语法如下:...
HTML代码可以实现文件的上传和下载,在网页开发中相当常见。通过使用<input>标签和<form>标签,我们可以轻松创建一个文件上传表单。 <form action="upload.php" method="post" enct...
HTML代码非常常见于网页设计中。在一些需要处理时间相关数据的场景下,可能需要将时间戳转换为实际时间,这时候就需要使用一些特定的HTML代码。 function timeStamp2Time(time){ var date = new Date(time...
HTML是一种用于创建网页的标记语言。在HTML中,我们可以使用超链接标签实现下载文件到本地的功能。 具体实现步骤如下: <a href="文件的URL" download="文件名">下载文件</a> 其中,href属性是文件...
在HTML代码中,对于字体靠左对齐有各种方法。其中最简单的方式之一是使用pre标签。 使用pre标签可以保留一段文本中的空格和换行符,从而使代码排版更加整齐。下面是一个例子: <p>这是一个段落。</p> &lt...
HTML代码字典是一本解释HTML标记和属性的参考文献。这本字典中包含了最常用的HTML代码以及它们的属性和值的详细描述。 例如,以下是HTML代码字典中的一部分内容: <a href="url">link text</a> 在...
在网页开发过程中,遇到一些需要用户复制的内容,我们通常都会提供复制按钮,让用户更方便地复制所需内容。下面我们来介绍如何使用html代码实现一键复制的功能。 var copyBtn = document.querySelector('#copy-bt...
用户登录 欢迎来到公司登录界面,请输入用户名和密码登录 用户名: 密码: 代码解释: 第1行:定义了一个 HTML 文档 第2行:开始了 HTML 头部 第3行:定义了...
HTML 代码是用来创建网页的语言,它包含了许多不同的元素和属性,让我们可以在网页中添加各种不同的元素和内容,如文字、图片、链接等等。在编写 HTML 代码时,我们可以使用各种不同的样式来美化我们的网页,例如更改字体、颜色、大小等等。 font-family:...
HTML代码中的字体转移 在编写HTML代码时,我们经常会使用各种字体来增强页面的可读性和视觉效果。但是,有些字符或特殊符号可能会在HTML中具有不同的含义,这就需要使用字体转义转换成HTML可以正常显示的字符。 在HTML中,使用"&"符号表示一个特殊字符将要被转...
HTML 编程语言中,你可以使用字体属性来更改文本的字体大小、颜色和样式。其中,字体颜色是最常用的样式更改。在 HTML 中,你可以使用 "color" 属性来更改文本的颜色。下面是一个使用 "pre" 标签的代码示例,演示如何使用 "color" 属性来更改字体颜色...