一分钟了解什么是时序图,并学会用mermaid绘制时序图

💡什么是时序图?

时序图(Sequence Diagram)是UML(统一建模语言)中的一种交互图,用于按时间顺序展示对象/组件之间如何通过消息进行协作。

时序图的核心元素包括:

  • 生命线(Lifeline):代表参与交互的对象(或角色、组件、服务),用带有名字的矩形和向下延伸的虚线表示。
  • 激活条(Activation Bar):表示对象正在执行操作的时间段。
  • 消息(Message):对象之间传递的调用、返回、创建、销毁等信号,用箭头表示。
  • 交互片段(Combined Fragment):如alt(条件分支)、loop(循环)、par(并行)等,用于描述复杂的控制流。

时序图强调时间顺序------越靠近图上方的事件发生越早,越靠近下方则越晚。

🧩来看一个用户登录流程时序图示例

以下是一个时序图示例,该示例完整的演示了一个用户登录的流程:

  • 用户(User)通过前端(WebFrontend)界面`输入用户名和密码`。
  • 前端用POST调用`/login`接口请求认证服务(AuthService)。
  • 认证服务`查询用户信息`访问数据库(DB),数据库返回用户记录。
  • 认证服务验证密码并返回结果。

🪂Mermaid 绘制时序图代码

Mermaid 是一种轻量级的图表描述语言,可直接嵌入 Markdown 文档中。以下是用户登录流程示例的mermaid时序图代码:

大多数 Markdown 编辑器如 #WordBN、GitHub、Obsidian 都支持渲染 Mermaid。

🚀Mermaid 时序图语法要点:

元素 写法示例 说明
参与者 participant 别名 as 显示名 定义生命线
同步消息 A->>B: 消息内容 实线箭头
返回消息 A-->>B: 返回值 虚线箭头
自调用 A->>A: 方法名 指向自身
激活/去激活 activate A/deactivate A 控制激活条(也可用+/-简写)
条件分支 alt ... else ... end 表示选择逻辑
循环 loop 描述 ... end 表示重复执行
并行 par ... end 表示并发执行

🛠️时序图的使用场景

时序图常用于以下场景:

  1. 系统需求分析

    • 描述用户与系统之间的交互流程(例如:登录、下单)。
    • 用例的详细展开,展示参与对象如何协作完成一个功能。
  2. 详细设计与架构文档

    • 说明微服务/模块间的接口调用顺序。
    • 展示异步消息、回调、事件驱动的交互流程。
  3. 调试与理解现有系统

    • 反向梳理复杂的调用链,帮助新成员理解代码逻辑。
  4. 协议与接口设计

    • 规范 REST API / RPC 的调用顺序和数据流向。
  5. 编写技术方案/评审

    • 用可视化方式降低沟通成本,避免纯文字歧义。

🔚🔸🔸🔸

🧑‍💻我是 #WordBN字远笔记软件 #C++应用服务器MYCP 等免费软件和开源项目作者。

📌关注我,一起来学一些实用的编程知识和技术。

相关推荐
狂奔的sherry5 小时前
VS Code Remote SSH Markdown 预览白屏排障
markdown·vs code·remote ssh
微小冷1 天前
Mermaid画甘特图
运维·markdown·甘特图·mermaid·时间图
艺杯羹1 天前
拒绝图片断链与样式坍塌:出版级富文本转Word与PDF的语义降维与数据固化引擎
markdown·pdf导出·富文本处理·文档引擎·ast解析
qq_369173632 天前
Markdown 文件怎么发布成网页?
markdown·效率工具·实用工具
感谢地心引力7 天前
我用 Doubao-Seed-2.1-pro 做了一个深度融入 AI 功能的本地知识库软件
ai·开源·seed·markdown·豆包
zzzzzz3108 天前
每日一条技术记录:把碎片学习变成可复盘的知识卡片
程序员·markdown·沸点
微小冷11 天前
用Mermaid画时序图
运维·流程图·时序图·mermaid·生命线
慧都小妮子13 天前
Word/Excel/PPT 如何稳定导出 Markdown?文档 SDK 三线能力拆解
.net·markdown·知识库·aspose·rag·文档转换·文档互操作
E_ICEBLUE18 天前
Python 实现 Excel 转 Markdown,支持工作表、单元格区域和批量处理
python·excel·markdown·格式转换
智码看视界22 天前
Day68-结构化Prompt设计:XML标签法/Markdown法/JSON Schema
prompt·markdown·json schema·spring ai·结构化prompt·xml标签