2019年12月6日

draw.io如何创建UML序列图

UML序列图是使用UML进行软件开发时将创建的第一个高度详细的行为图。它们很少在业务流程建模中使用,特别是因为它们引用编程时将使用的实际数据和操作名称。这并不意味着您不能使用序列图:它们可以用于对业务对象及其交互进行详细建模,或者由IT员工来详细说明其基础架构中的元素如何通信和协同工作。

注意:与使用UML早期版本创建的序列图相比,UML 2.0更详细,更具体,可以更轻松地直接从图中编写程序。

首先创建您的类图。

在创建了类图(详细说明数据结构及其操作的结构图)之后,创建序列图会更容易。

您会发现几乎总是必须返回并修改以前的图,因为数据结构无法按需要实现序列的方式工作。

或者,如果您像我一样,就忘记了一堆变量和方法!

https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Class%20Diagram%20-%20Habit%20Tracker%20app#Uhttps%3A%2F%2Fdrive.google.com%2Fa% 2Fseibert-media.net%2Fuc%3Fid%3D1pyTXpocApYeve1O4y0PqROruvMy_9SUO%26export%3Ddownload

在draw.io中查看此类图

在对活动图中的行为进行建模后,为什么还要绘制序列图?

它们都是行为图,因为它们为流程中的步骤建模。活动图可以更快地创建,并且更像是“高级” –它们向您显示信息流,但不向您显示信息流的时间或顺序

顺序图将这些类及其数据和操作,以及活动图中建模的一般行为结合在一起,并说明它们如何组合在一起。除了实际接口的各个部分外,您还可以结合类图和序列图来编写程序!

在draw.io中创建UML序列图

与往常一样,请确保已启用UML形状库。如果没有看到,请在侧栏的底部,单击更多形状…,从左侧列表中选择UML,然后单击应用

序列图中使用了很多特殊符号。我将解释最常见的元素,并使用“习惯跟踪器”应用程序向您展示它们的工作原理。您可能想查看以前文章中的Habit Tracker应用程序图表,以查看图表绘制过程:

  1. 用例图
  2. 活动图

从生命线开始

生命线用于表示程序中的参与者和系统。在draw.io中可以使用四种不同的类型,如果算出序列图中经常使用的简单矩形,则可以使用五种。

  • 演员 –一个简笔画,通常代表一个人或一个用例。
  • 控制 -带有箭头轮廓的圆圈。控件组织和安排交互。
  • 实体  –在一条线上保持平衡的圆。通常用于接口或与外部系统和服务的交互。
  • 边界 -左侧有一条垂直线的圆,如侧面的停车标志。通常用于本身不进行任何处理或步骤的系统,例如数据库。

提示:序列图很快就会变得冗长而复杂。将这些生命线保持在图表的单独页面上,以便在要创建子序列图时可以复制和粘贴它们。

另外,如果您不小心使用了错误的符号(如您在接下来的两个屏幕截图中看到的那样),则可以轻松地替换  draw.io中的形状!

表示完成一个或一组操作所需的时间

矩形激活框放置在生命线上方(或在另一个激活框上方),以指示何时完成某项操作以及执行多长时间。

要在draw.io中添加激活框,请将其从形状库中拖放到生命线上。然后,您可以上下拖动它,或调整其大小以指示更长的任务。

您通常会发现一条生命线,通常是控件生命线,将有一个大的激活框。您需要逐步调整大小(更大!),并向序列中添加更多步骤。

数据流与控制

几乎总是有箭头往返于激活框,以指示信息流(以及过程/控制)。拖动连接器的末端,将鼠标悬停在救生索上,直到变成蓝色。然后,它会捕捉到代表激活框底部顶部的位置,具体取决于要连接的连接器。实心连接器表示对信息的请求或函数调用,虚线表示返回,带有或不带有值。

就像在类图中定义它们一样,将操作名称,参数名称和返回值名称添加为连接器上的标签。

一组动作或序列片段的框架

通过添加更多激活框,将连接器连接到生命线(或其他激活框)并为每个步骤添加操作,参数和返回值名称,来添加到序列图中。

您将很快遇到一个需要稍微复杂一点的操作。就像一个循环!

框架可用于指示一组操作,并使用左上角的文本指示其类型。

  • 循环进行重复的步骤。
  • ALT替代步骤,只要你需要(不只是IF-THEN-ELSE!)许多替代路径
  • 选择或选择仅在满足特定条件时才执行的步骤
  • 如果满足特定条件,将退出循环或操作的中断

在左上方的帧类型旁边的帧内添加条件。框架应完全包围完成序列“片段”所需的所有步骤。

您可以使用框架来表示甚至更复杂的过程,包括并行动作-那些在序列中彼此同时发生的动作(使用par)。有关何时以及如何使用每个序列图元素的更深入的教程,请参阅IBM的这篇出色的教程

在下面的局部图中,习惯跟踪器UI将签入数据保存到数据库(数据存储),同时,向教练发送通知,告知其用户之一已签入。

提示:当需要指示平行或替代路径时,请使用“常规”形状库中的虚线,并将两端连接到框架的内部。

子序列图

由于这些图是如此之大和复杂,但却被巧妙地分解为较小的动作集,因此您可以充分利用draw.io的多页图和链接功能。

  1. 添加一个新页面并将其重命名为适当的名称。在此处查看如何使用多页图表
  2. 添加框架并将其链接到新页面 –右键单击框架,单击“ 编辑链接”,然后从下拉列表中选择页面,然后单击“ 应用”
  3. 然后将框架的背景(不是类型区域)(格式面板中的泳道颜色)设置为不透明的颜色,以使其突出显示这是子图–您不希望看到生命线在框架下。

全部放在一起–顺序图

那么,习惯追踪器应用程序的序列图是什么样的?这是主图,在该图的其他页面上有两个链接的子序列图,并且页面上只有用于简化复制的生命线。您可以在draw.io中打开此图,并查看它如何在多个页面上工作。

https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=UML%20sequence%20diagram%20-%20Habit%20Tracker%20app#Uhttps%3A%2F%2Fdrive.google.com% 2Fa%2Fseibert-media.net%2Fuc%3Fid%3D1qEFGbmV2vflMzfZIM7w94cjwubXW1Dss%26export%3Ddownload

在draw.io中打开此图

将需求文档和图表保持在一起

如果您使用Jira或Trello进行软件开发,则可以直接在需求和图表的相关任务中进行协作。draw.io可作为吉拉的应用程序Trello电时  节省您通过电子邮件洗牌周围的图表,连接文件的版本无限数量的门票,或者使用一个共享文件系统的开销和麻烦。

需要一些帮助?

在处理序列图之前,您应该至少部分地完成哪些UML图?

  • 用例图
  • 活动图
  • 类图

您知道吗,您还可以使用draw.io模拟您的移动应用程序?

如果这是您第一次使用图表工具,请查看此  自学培训课程,该课程将帮助您了解draw.io的许多功能。