什么是时序图？
时序图是 UML 交互图，显示对象或系统如何随时间相互通信。它们按时间顺序显示不同参与者之间的消息交换，使其在记录 API 流程、系统交互和多步骤流程方面非常有价值。每个参与者由一条垂直生命线表示，水平箭头显示消息交换。
编辑与预览
使用 Mermaid 语法创建 时序图，实时查看效果。
Example
Sequence diagram example
A Mermaid sequence diagram for documenting browser, editor, and renderer interactions.
Mermaid code
sequenceDiagram
participant User
participant WebApp as Mermaid Editor
participant Renderer
User->>WebApp: Paste diagram code
WebApp->>Renderer: Render Mermaid syntax
Renderer-->>WebApp: SVG preview
WebApp-->>User: Download PNG常见使用场景
API 文档编写
记录 API 端点及其交互流程。可视化请求-响应周期、认证流程、错误处理以及客户端和服务器之间的数据交换。
微服务架构
映射微服务、消息队列和数据库之间的通信模式。对于理解分布式系统行为和调试集成问题至关重要。
认证与授权
建模多步骤认证过程，如 OAuth、SAML 或 JWT 令牌流程。显示重定向、令牌交换和验证步骤的顺序。
系统集成
可视化不同系统在复杂集成场景中的交互方式。记录 Webhook 回调、事件驱动架构和第三方服务集成。
核心功能
参与者管理
定义多个参与者、系统或服务，使用别名和激活框显示组件何时处于活动处理状态。
消息类型
支持同步调用、异步消息、返回值和自调用，使用不同的箭头样式以提高清晰度。
控制结构
使用直观的语法对循环、条件分支（alt/else）、可选块和并行处理进行建模。
注释与说明
在序列中的任何点添加解释性注释，以提供上下文、阐明业务逻辑或记录边缘情况。
最佳实践
专注于单一场景
每个时序图应代表一个用例或交互流程。为不同的场景创建单独的图表，而不是将所有内容组合在一起。
使用有意义的名称
为参与者提供清晰、描述性的名称。使用实际的服务名称或角色标题，而不是「系统 A」或「组件 1」等通用标签。
显示错误路径
不要只记录正常路径。包括错误条件、超时和异常处理的替代流程。
保持时间从上到下
遵循时间从上到下流动的约定。较早的交互应出现在图表中比较晚的交互更高的位置。
探索其他图表类型
流程图
用节点和方向箭头可视化流程、工作流和算法。非常适合业务流程和决策树。
类图
用类、属性和关系建模面向对象系统。软件架构规划的必备工具。
状态图
表示系统或应用程序中的状态转换。非常适合建模生命周期状态和工作流。
甘特图
规划和跟踪项目时间线、任务和依赖关系。非常适合项目管理和进度安排。
ER 图
设计包含实体和关系的数据库架构。非常适合数据库建模和文档编写。
用户旅程图
绘制用户在各个接触点的体验和交互。非常适合用户体验设计和客户旅程分析。
Git 图
可视化 Git 分支策略和提交历史。有助于解释版本控制工作流。
思维导图
组织创意、头脑风暴和创建层次化视觉结构。适合规划和知识管理。
饼图
以圆形图表展示数据比例分布。适合显示百分比和市场份额分析。
时间线
沿时间轴可视化事件和里程碑。适合项目历史和路线图展示。
看板
将任务按工作流阶段组织到列中。适合敏捷项目管理和任务追踪。
四象限图
在双轴网格上绘制项目进行比较和优先级排序。适合功能优先级和战略分析。
桑基图
用比例箭头可视化节点间的流量。适合能源流、预算分配和转化漏斗。
XY 图表
创建带有可自定义坐标轴的柱状图和折线图。适合数据可视化和趋势分析。
块状图
用行列排列的块构建结构化布局。适合系统架构和组件概览。
架构图
使用服务图标和连接设计云和系统架构。适合基础设施文档。
数据包图
可视化网络协议数据包结构和位级字段布局。适合网络协议文档。