一分钟了解什么是时序图,并学会用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 等免费软件和开源项目作者。

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

相关推荐
suaizai_18 小时前
HTML为何碾压Markdown?AI时代新选择
markdown
前端逗比逗3 天前
流式 Markdown 解析 + 代码块防截断闪烁
markdown·webassembly
清风小道君4 天前
手搓一个零依赖的 Markdown 静态站点生成器,我学到了什么
markdown
X档案库6 天前
【开源】我做了一套可以 AI 托管的 Markdown 博客与知识库
rust·博客·markdown·marksharex
会周易的程序员7 天前
Mermaid Renderer:一款的图表可视化小工具
前端·vue.js·流程图·mermaid
DeMinds8 天前
内容没有丢,我为什么总在重新整理?|DeMinds 如何让工作接着继续
ios·github·markdown
acheding9 天前
File System Access API 实战:让网页真正读写本地文件
前端·javascript·vue.js·编辑器·markdown
acheding9 天前
把 CodeMirror 6 调教成 Markdown 编辑器:扩展、装饰与门面
javascript·vue.js·编辑器·markdown
卷无止境11 天前
Quarkdown:赋予 Markdown 超能力的现代排版系统
前端·markdown
DeMinds12 天前
这篇文章,真的有“结构”吗?
markdown