Markdown新技能解锁!轻松绘制专业时序图,让你的文档秒变高大上

news/2025/3/16 22:53:58/文章来源:https://www.cnblogs.com/PeterJXL/p/18342724

时序图是一种表现交互过程的图示,主要展示各个参与者之间是如何交互的,以及交互的顺序是怎样的。

快速入门

听不太懂?没关系,看个例子,下图是小程序登陆过程中,小程序、服务器、微信服务器三者交互的时序图:

sequenceDiagram小程序 ->> 小程序 : wx.login()获取code小程序 ->> + 服务器 : wx.request()发送code服务器 ->> + 微信服务器 : code+appid+secret微信服务器 -->> - 服务器 : openid服务器 ->> 服务器 : 根据openid确定用户并生成token服务器 -->> - 小程序 : token

而画这幅图只用了很少并且很简单的代码:

sequenceDiagram小程序 ->> 小程序 : wx.login()获取code小程序 ->> + 服务器 : wx.request()发送code服务器 ->> + 微信服务器 : code+appid+secret微信服务器 -->> - 服务器 : openid服务器 ->> 服务器 : 根据openid确定用户并生成token服务器 -->> - 小程序 : token

接下来讲讲一些术语和概念。

参与者

参与者,简单来说就是参与交互的事务,例如人,系统,服务器等等。

严格来说,参与者可以分为角色和类对象,这涉及到编程相关的内容了,因此我们可以暂时忽略这个区别。

语法:

sequenceDiagramparticipant 客户端participant 服务器

效果:

sequenceDiagramparticipant 客户端participant 服务器

说明:

  • sequenceDiagram​ 为每幅时序图的固定开头(也就是上一篇说过的,关键字,不能省略)
  • participant <参与者名称>​:声明参与者,语句次序即为参与者横向排列次序(例如本例中就是“客户端”在左,后面则跟着“服务器”)
  • 从上到下的线段表示时间的流逝,也叫时间线

消息

既然是交互,就得相互发送消息,这里是用单向箭头来表示。

注意:

  • 实线代表主动发出消息。
  • 虚线代表响应。
  • 末尾带「X」代表异步消息,无需等待回应。也就是发出消息后,不管接受者是否收到。

实例:

sequenceDiagramparticipant 老板Lparticipant 员工A老板L ->> 员工A : “在这里我们是兄弟!”老板L -x 员工A : 画个饼员工A -->> 老板L : 怯怯地鼓掌

效果:

sequenceDiagramparticipant 老板Lparticipant 员工A老板L ->> 员工A : “在这里我们是兄弟!”老板L -x 员工A : 画个饼员工A -->> 老板L : 怯怯地鼓掌

说明:

  • 消息语句格式为:<参与者> <箭头> <参与者> : <描述文本>​。

  • <箭头>​ 的写法有:

    • ->>​:显示为实线箭头(主动发出消息)
    • -->>​:显示为虚线箭头(响应)
    • -x​:显示为末尾带「X」的实线箭头(异步消息)
  • 本例中省略了 participant <参与者名称>​。省略后参与者横向排列的次序,由消息语句中参与者出现的次序决定。

激活框

一般来说,收到消息后,参与者得用一段的时间才能做出回应(就好比人之间的对话,一般要时间去想如何回应)。

在时序图上,我们可以标记一段时间,表示对消息进行处理的时间间隔。

示例:

sequenceDiagram老板M ->> + 员工B : “不仅996,还要669!”员工B -->> - 老板M : 怯怯地鼓掌老板M ->> + 员工B : “悔创本司!”员工B -->> - 老板M : 怯怯地鼓掌

效果:

sequenceDiagram老板M ->> + 员工B : “不仅996,还要669!”员工B -->> - 老板M : 怯怯地鼓掌老板M ->> + 员工B : “悔创本司!”员工B -->> - 老板M : 怯怯地鼓掌

说明:体会箭头符号后的 + 和 - 的使用方法和效果,它们相当于激活框的开关

注解

示例:

sequenceDiagramNote left of 老板L : 对脸不感兴趣Note right of 老板M : 对钱不感兴趣Note over 老板L,老板M : 对996感兴趣

效果:

sequenceDiagramNote left of 老板L : 对脸不感兴趣Note right of 老板M : 对钱不感兴趣Note over 老板L,老板M : 对996感兴趣

循环(loop)

在条件满足时,重复发出消息序列。

示例:

sequenceDiagram网友 ->> + X宝 : 网购钟意的商品X宝 -->> - 网友 : 下单成功loop 一天七次网友 ->> + X宝 : 查看配送进度X宝 -->> - 网友 : 配送中end

效果:

sequenceDiagram网友 ->> + X宝 : 网购钟意的商品X宝 -->> - 网友 : 下单成功loop 一天七次网友 ->> + X宝 : 查看配送进度X宝 -->> - 网友 : 配送中end

选择(alt)

在多个条件中作出判断,每个条件将对应不同的消息序列。

示例:

sequenceDiagram  土豪 ->> 取款机 : 查询余额取款机 -->> 土豪 : 余额alt 余额 > 5000土豪 ->> 取款机 : 取上限值 5000 块else 100 < 余额 < 5000土豪 ->> 取款机 : 有多少取多少else 余额 < 100土豪 ->> 取款机 : 退卡end取款机 -->> 土豪 : 退卡

效果:

sequenceDiagram 土豪 ->> 取款机 : 查询余额取款机 -->> 土豪 : 余额alt 余额 > 5000土豪 ->> 取款机 : 取上限值 5000 块else 100 < 余额 < 5000土豪 ->> 取款机 : 有多少取多少else 余额 < 100土豪 ->> 取款机 : 退卡end取款机 -->> 土豪 : 退卡

可选(opt)

在某条件满足时执行消息序列,否则不执行。

示例:

sequenceDiagram老板们 ->> 员工们 : 开始实行996opt 永不可能员工们 -->> 老板们 : 拒绝end

效果:

sequenceDiagram老板们 ->> 员工们 : 开始实行996opt 永不可能员工们 -->> 老板们 : 拒绝end

并行

将消息序列分成多个片段,这些片段并行执行。

示例:

sequenceDiagram老板C ->> 员工C : 开始实行996par 并行员工C ->> 员工C : 刷微博and员工C ->> 员工C : 工作and员工C ->> 员工C : 刷朋友圈end员工C -->> 老板C : 9点下班

效果:

sequenceDiagram老板C ->> 员工C : 开始实行996par 并行员工C ->> 员工C : 刷微博and员工C ->> 员工C : 工作and员工C ->> 员工C : 刷朋友圈end员工C -->> 老板C : 9点下班

最后

用纯文本画时序图很简单,本文介绍的这些语法基本上够用了,等到实际要用的时候再来学习也不迟。

想要深入的话不妨看看官网文档。

参考

Markdown 高级玩法:用代码画时序图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/778038.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言--轮圈机制

数据是以二进制补码形式存储在计算机内存中,而数据类型限制了数据的大小,种类,范围,精度等。 在存储二进制数据时,常常遇到存储的数值超出数据类型范围的情况。而这时的存储原理又是怎样的呢? 根据实践,不难总结出一个规律,计算机存储的数据在一个范围内循环。如下图所…

kubeadm安装k8s

目录1.环境准备2.所有节点安装docker3.所有节点安装kubeadm4.Nginx负载均衡部署5.部署K8S集群6.所有节点部署网络插件flannel 1.环境准备 (1)在所有节点上安装Docker和kubeadm (2)部署Kubernetes Master (3)部署容器网络插件 (4)部署 Kubernetes Node,将节点加入Kuber…

linux 安装 nginx

一、官网下载Nginx 官网地址:http://nginx.org/en/download.html我下载的是最新稳定版二、上传到服务器解压 1、上传到指定的服务器地址 上传的地址自己决定,我上传到 /usr/Nginx。2、解压 使用命令: tar -zxvf “你的Nginx压缩包”,我这里是:tar -zxvf nginx-1.24.0.tar.…

pytorch中中的模型剪枝方法

一,剪枝分类所谓模型剪枝,其实是一种从神经网络中移除"不必要"权重或偏差(weigths/bias)的模型压缩技术。关于什么参数才是“不必要的”,这是一个目前依然在研究的领域。1.1,非结构化剪枝非结构化剪枝(Unstructured Puning)是指修剪参数的单个元素,比如全连…

Delphi 线程

不是原创,只是看到好的内容复制了保存下来,留着学习。CreadteThred参考,同步参考,WaitForSingleObject参考,互斥参考,一、在 Delphi 中使用多线程有两种方法: 调用 API、使用 TThread 类; 使用 API 的代码更简单. 1、调用 API:CreateThread()function CreateThread( lpT…

练习01

⽤普通⽤户身份登陆虚拟机上完成练习 在⽤户家⽬录下创建6个⽂件 song1.mp3 ~ song6.mp3把上出创建的songX.mp3⽂件移动到Music⽬录下(不存在则创建)在⽤户家⽬录下创建三个⽬录,分别为 friends,family,work换到friends⽬录下,把Music⽬录下的song1.mp3 ~ song3.mp3 拷⻉到当…

一个基于Java的接口快速开发框架!无需编写代码,通过UI界面编写接口!

magic-api —— 一个基于 Java 的接口快速开发框架,提供了一个类似 IDEA IDE 的 Web 界面来编写接口。大家好,我是 Java陈序员。 随着技术框架的不断发展更新,在日常开发中,我们可以借助一些第三方框架来快速实现接口开发,如 MyBatis-Plus.但是这些框架工具,往往需要定义…

文本相似度 HanPL汉语言处理

@目录前言需求简介实操开始1. 添加pom.xml依赖2. 文本相似度工具类3. 案例验证4. 验证结果总结前言 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i、提示:以下是本篇文章正文内容,下面案例可供参考 需求 当我们需要求两个或两个以上的字符串相似度百分比时,可以…

GreatSQL 8.0.32-26 今日发布

GreatSQL 8.0.32-26 今日发布 版本信息发布时间:2024年08月05日版本号:8.0.32-26, Revision a68b3034c3d下载链接:https://gitee.com/GreatSQL/GreatSQL/releases/tag/GreatSQL-8.0.32-26用户手册:https://greatsql.cn/docs/8.0.32-26/特性增强 GreatSQL 8.0.32-26 版本在 …

「代码随想录算法训练营」第二十九天 | 动态规划 part2

62. 不同路径题目链接:https://leetcode.cn/problems/unique-paths/ 题目难度:中等 文章讲解:https://programmercarl.com/0062.不同路径.html 视频讲解:https://www.bilibili.com/video/BV1ve4y1x7Eu/ 题目状态:还是想不出 dp 数组,看题解了思路: 首先构建一个 dp 数组…

一直让 PHP 程序员懵逼的同步阻塞异步非阻塞,终于搞明白了

经常听到身边写 Java、Go 的朋友提到程序异步、非阻塞、线程、协程,让系统性能提高到百万、千万并发,使我甚是惊讶属实羡慕。大家好,我是码农先森。 经常听到身边写 Java、Go 的朋友提到程序异步、非阻塞、线程、协程,让系统性能提高到百万、千万并发,使我甚是惊讶属实羡慕…

感谢「河南图奕网络」赞助园子,成为第一家创始赞助商

在8月1日发布救援行动-赞助商计划后,我们并没有抱什么奢望,更没有妄想很快能找到赞助商,只是为救园多一点可能的希望,万一找到一家赞助商,就会多一份救园力量。没想到第2天就有幸遇到一家有意向的企业在8月1日发布救援行动-赞助商计划后,我们并没有抱什么奢望,更没有妄想…