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我在第一位通过角色、对象列表，您可以更改它们的顺序