时序图（sequence chart）

最新推荐文章于 2025-09-11 22:30:48 发布
原创 最新推荐文章于 2025-09-11 22:30:48 发布 · 3.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#嵌入式硬件

时序图是一种强调消息时间顺序的交互图，用于描述对象间交互和用例行为顺序。它展示了系统中类之间的交互，以及消息交换，其中消息可代表操作或触发状态变化。时序图的垂直轴表示时间顺序，水平轴表示对象实例，通过生命线、控制焦点和不同类型的同步、异步消息来描绘交互过程。时序图常用于描述用例、寻找类的操作，并包含角色、对象、生命线、控制焦点和消息等元素，可用于表示抉择、选项、循环、并行和中断等组合片段。

定义：描述了对象之间以及对象与参与者实例之间传递消息的时间顺序，用来表示用例中的行为顺序，是强调消息时间顺序的交互图
时序图描述的事物
时序图描述系统中类与类之间的交互，将这些交互建模成消息交换，时序图描述了类以及类之间的交换以完成的期望行为的消息，时序图中每条消息都代表了类的一个操作或者引起状态机改变的触发事件；
时序图表示
参与交互的对象在时序图顶端水平排列，每个对象的底端绘制了一条垂直虚线，对象A与对象B发送消息，用一条带箭头的实线表示，该实线起始于对象A底部的虚线，终止于对象B底部的虚线，实线箭头水平放置，越靠近顶端越早被发送；
时序图的轨迹
时序图提供了随时间推移的，清晰的可视化的轨迹；
时序图的作用
1、用对象间的交互来描述用例
2、寻找类的操作
时序图的两个维度
1、垂直维度以发生的时间顺序显示消息/调用的序列
2、水平维度显示消息被发送到的对象实例
时序图的阅读顺序
时序图中，消息的阅读顺序是严格的自上而下的
时序图的元素：角色，对象，生命线，控制焦点和消息
1、角色
系统角色、可以是人或者其他系统，子系统
2、对象
对象代表时序图中的对象在交互中所扮演的角色，位于时序图顶部和对象代表
对象一般包含一下三种命名方式：
第一种方式包含对象和类名
第二种方式只显示类名不显示对象名，即为一个匿名对象
第三种方式只显示对象名不显示类名
3、生命线
生命线代表时序图中的对象在一段时期内的存在，时序图中每个对象和底部中心都有一条垂直的虚线，这就是对象的生命线，对象间的消息存在于两条虚线间；
4、控制焦点
控制焦点代表时序图中的对象执行一项操作的时期，在时序图中每条生命线上的窄的矩形代表活动期。
5、消息
消息是定义交互和协作中交换信息的类，用于实体间的通信内容建模，消息用于在实体间传递信息，允许实体请求其他的服务，类角色通过发送和接受消息进行通信。
消息一般分为同步消息，异步消息，返回信息

1、同步消息=调用消息
消息的发送者把控制传递给消息的接收者，然后停止活动，等待消息的接受者放弃或者返回控制，用来表示同步的意义；
2、异步消息
消息的发送者把信号传递给消息的接收者，然后继续自己的活动，不等待接受者返回消息或者控制，异步消息的接受者和发送者是并发工作的；
3、返回消息
返回消息表示从过程调用返回
常用组合片段举例：
1、抉择（Alt）
抉择在任何场合下只发生一个序列。可以在每一个片段中设置一个临界来指示该片段可以运行的条件，else的临界指示其他任何临界都不为true时应运行的片段，如果所有临界都为False并且没有else，则不执行任何片段；

2、选项（Opt）
包含一个可能发生或不发生的序列

3、循环（Loop）
片段重复一定的次数，可以在临界中指示片段重复的条件

4、并行（Par）

5、中断（Break）
如果执行此片段，则放弃序列的其余部分，可以使用临界来指示发生中断的条件

Zedxr103
关注
精选资源
astah 流程图，类图，用例图，时序图
09-29
4. **时序图（Sequence Diagram）** 时序图是UML（统一建模语言）中的动态视图，用于描述对象间交互的时间顺序。在Astah中，你可以创建时序图来展示消息传递的顺序，揭示对象间的协作行为。时序图通常用于展示事件...
教你用ChatGPT一键生成时序图、类图、流程图、状态图以及用例图
05-28
1. **时序图（Sequence Diagram）**： 时序图展示了对象之间的交互顺序，通常用于描述系统中的消息传递。通过ChatGPT，你可以输入场景描述，它会根据输入自动生成相应的时序图，帮助你清晰地理解各个对象间的消息...
时序图(顺序图、序列图、循序图)
qq_43500084的博客
09-03 2712
面向对象编程（OOP）是一种编程范式，它将现实世界中的实体抽象为对象，这些对象包含数据（属性）和行为（方法）。这种抽象使得软件设计更加直观，更接近人类对现实世界的理解。在面向对象的设计中，类是构建复杂系统的基础，它们定义了对象的蓝图。 学习统一建模语言（UML）对于面向对象的设计至关重要。UML提供了一套标准的图形表示法，用于描述软件系统的结构和行为。它包括用例图、类图、对象图、状态图、活动图、序列图、通信图、组件图和部署图等，这些图可以帮助开发者在设计阶段可视化系统的不同方面。
UML时序图详解
码农爱学习的博客
05-15 7213
本篇介绍了UML时序图的基础知识，并通过visio绘制一个物联网设备WIFI配网的UML时序图实例，来介绍UML时序图的画法与所表达的含义。
项目1——单片机程序审查，控制系统流程图和时序图
最新发布
轩辕霸天L
09-11 870
整体架构图: 展示了系统的分层结构和模块间关系状态机流程: 详细描述了伺服控制的核心逻辑按钮控制流程: 展示了安全相关的用户交互逻辑通信时序: 说明了Modbus双重角色的通信机制安全互锁: 展示了多重安全保护机制启动时序: 描述了系统的初始化过程错误处理: 展示了系统的容错和恢复能力。
时序图
Summer的博客
09-25 5342
一、定义 时序图（Sequence Diagram），又名序列图、循序图、顺序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序，当执行一个用例行为时，其中的每条消息对应一个类操作或状态机中引起转换的触发事件。二、时序图中包括如下元素：角色，对象，生命线，控制焦点和消息。 1、角色（Actor） 系统角色，可以是人或者其他系统，子
UML时序图(Sequence Diagram)学习笔记
热门推荐
fly_zxy的专栏
07-04 54万+
什么是时序图时序图(Sequence Diagram)，又名序列图、循序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。时序图的元素我们在画时序图时会涉及7种元素：角色(Actor)、对象(Object)、生命线(LifeLine)、控制焦点(Activation)、消息(Message)、自关联消息、组合片段。其中前6种是比较常用和重要的元素，剩余的一种组...
[UML]UML系列——时序图（顺序图）sequence diagram
weixin_33970449的博客
11-21 6596
系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系（include、extend） [UML]UML系列——类图Class [UML]UML系列——类图class的关联关系（聚合、组合） [UML]UML系列——类图class的依赖关系 [UML]UML系列——类图class的泛化关系 [UML]UML系列——类图class的实现关系...
DeepSeek进阶应用（一）：结合Mermaid绘图（流程图、时序图、类图、状态图、甘特图、饼图）
Code_流苏：在代码中寻诗意，在实践中觅真知
03-09 6197
纯干货，DeepSeek结合Mermaid绘制各类图（流程图、时序图、类图、状态图、甘特图、饼图）
序列图，时序图
04-16
用rational rose画的时序图，序列图，泳道图等，详细描述了如何使用rational rose画泳道图，该资源已加密
精选资源
Rational Rose 画时序图.docx
11-09
1. **时序图（Sequence Diagram）**： 时序图主要用于描述对象间的交互顺序，它展现了对象之间消息传递的时间顺序。在Rational Rose中创建时序图，首先需要新建一个图，选择"Sequence Diagram"模板。然后，你可以...
计算机毕业设计常用图表分类与导航《E-R图、类图、时序图、功能结构图、流程图、用例图、架构图等常见图示概念与绘制技巧》
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
06-21 1924
很多同学咨询如何绘制计算机论文中的各类图，我这里整理了常见的图以及画法说明。主要设计如下9个类型：系统E-R图、UML类图、UML用例图、系统流程图、系统时序图、系统活动设计图、系统协作图、整体功能结构图、系统架构图等。
【UML建模】时序图（Sequence Diagram）
积木成林，聚沙成塔
04-20 3万+
时序图，也称为顺序图，是用来展示对象之间交互关系的一种UML图表，它通过描述在不同时间上发生的对象的动作来帮助开发人员更清楚地理解系统的结构和功能，从而达到优化代码、简化设计、提高软件的质量和效率、帮助团队成员沟通协作等目的。时序图与活动图活动图用于描述系统或软件中的业务流程，强调的是流程步骤。时序图用于描绘多个对象之间的交互行为，强调的是时间顺序。时序图更加贴近于代码的实现逻辑，如果想描述的是多个对象之间的调用、响应、回调等发生的顺序，就可以使用时序图。
【PCB工艺】时序图（Timing Diagram）
猫猫的小茶馆
03-27 3282
广泛用于分析和设计时序逻辑电路，如锁存器（Latch）、触发器（Flip-Flop）、计数器、状态机等。这篇文章从时序图的原理、构成、细节、扩展等多个角度全方位让你彻底能够看懂时序图。时序图是一种用于描述数字电路中信号随时间变化的图表，横轴表示时间，纵轴表示不同信号的状态（高电平 1 / 低电平 0）。✅ 时序图用于分析电路的时序关系，确定信号之间的同步性。✅ 常用于分析触发器、锁存器、CPU 总线操作等时序要求较高的电路。
前端绘制时序图
06-18
### 使用JavaScript或相关库在前端绘制时序图 在前端开发中，绘制时序图可以通过多种方式实现。以下是一些常见的方法和工具，结合提供的引用内容进行详细说明。 #### 1. 使用JS Sequence Diagrams库 JS Sequence Diagrams 是一个基于 JavaScript 的库，用于生成简单的时序图。它依赖于 Raphael.js 和 Underscore.js，因此需要先引入这些库[^1]。以下是使用该库的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sequence Diagram Example</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="raphael-min.js"></script> <script src="underscore-min.js"></script> <script src="sequence-diagram-min.js"></script> </head> <body> <div class="diagram"> Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->>Alice: I am good thanks! </div> <script> $(".diagram").sequenceDiagram({theme: 'simple'}); // 设置为矩形图形 </script> </body> </html> ``` 通过上述代码，可以生成一个简单的时序图，并且支持自定义主题样式[^1]。 #### 2. 使用WaveDrom绘制时序图 WaveDrom 是另一个流行的时序图生成工具，特别适合用于电子工程领域的波形图绘制。它的界面简洁，分为上下两部分：上部分是 WaveJSON 描述文本，下部分是渲染后的时序图[^2]。以下是一个简单的 WaveDrom 示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WaveDrom Example</title> <script src="https://wavedrom.com/skins/default.js"></script> <script src="https://wavedrom.com/WaveDrom.js"></script> </head> <body> <div id="waveform"></div> <script> var json = { signal: [ { name: "clk", wave: "p....." }, { name: "dat", wave: "x.h.x", data: ["head", "body", "tail"] } ] }; WaveDrom.ProcessData(json).draw(0, document.getElementById("waveform")); </script> </body> </html> ``` WaveDrom 支持动态加载 JSON 数据，并能够实时更新时序图[^2]。 #### 3. 在Vue3中使用Mermaid绘制时序图 Mermaid 是一个功能强大的图表生成工具，支持时序图、流程图等多种图表类型。在 Vue3 中使用 Mermaid 绘制时序图时需要注意 DOM 元素的唯一性问题[^3]。以下是一个 Vue3 的示例代码： ```vue <template> <div ref="chart"></div> </template> <script> import mermaid from "mermaid"; export default { mounted() { const chartData = ` sequenceDiagram participant A as Alice participant B as Bob A->>B: Hello Bob, how are you? B-->>A: I am good, thanks! `; mermaid.initialize({ startOnLoad: false }); mermaid.render("svgId", chartData, (svgCode) => { this.$refs.chart.innerHTML = svgCode; }); } }; </script> ``` 此代码片段展示了如何在 Vue3 中动态生成时序图，并解决了 DOM 唯一性的问题。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值