使用markdown画流程图、时序图等

news2024/11/24 2:45:51

概述

能表示的图类型还有很多,比如:

  • sequenceDiagram时序图

  • classDiagram类图

  • stateDiagram:状态图

  • erDiagram:ER图

  • gantt: 甘特图

  • pie:饼图

  • requirementDiagram: 需求图

流程图

流程图代码以「graph 《布局方向》」开头

布局

TB,从上到下
TD,从上到下
BT,从下到上
RL,从右到左
LR,从左到右

例如

```mermaid
流程图/时序图代码
```

符号

起止框

起止框

在这里插入图片描述

处理框

处理框

在这里插入图片描述

可以使用 HTML 中的实体字符。

双引号:"

在这里插入图片描述

判断框

判断框

在这里插入图片描述

连接

连接

在这里插入图片描述

连接样式

实线

带文字实线箭头

文字描述
A
B

在这里插入图片描述

无文字实线箭头

A
B

在这里插入图片描述

无文字实线无箭头

A
B

在这里插入图片描述

带文字实线无箭头

文字描述
A
B

在这里插入图片描述

虚线

无文字虚线箭头

A
B

注意有中间
在这里插入图片描述

有文字虚线箭头

文字
A
B

注意有中间
在这里插入图片描述

其他

其他类似实线

综合示例

通过
不通过
接口请求
参数校验
校验不通过
处理业务逻辑
结束
	` ``mermaid
	graph TB
	    A(接口请求) --> B[参数校验]
	    B[参数校验] --> C{校验通过}
	    C{校验通过} -- 通过 --> d[处理业务逻辑]
	    C{校验不通过} -- 不通过 --> e[结束]
	    d[处理业务逻辑] --> e(结束)
	 ```

时序图

时序图代码以「sequenceDiagram」开头

lilei hanmeimei How are you. 对象A的描述(提示) Fine, Thank you. 对象B的描述 我走了 lilei hanmeimei
	```mermaid
	sequenceDiagram
	    participant A as lilei
	    participant B as hanmeimei
	    A ->> B: How are you.
	    Note left of A: 对象A的描述(提示)
	    B -->> A: Fine, Thank you.
	    Note right of B: 对象B的描述
	    A -x B: 我走了
	```

参与者

参与者名称 参与者名称
	```mermaid
	sequenceDiagram
	    participant 别名 as 参与者名称
	```
参与者名称 参与者名称
	```mermaid
	sequenceDiagram
	    participant 参与者名称
	```

注解

左边注解

 Note left of 参与者: 参与者的描述(提示)

右边注解

 Note right of 参与者: 参与者的描述(提示)

在xx之上

Note over 参与者1,参与者2 : 哈哈哈
参与者名称1 参与者名称2 参与者名称1的描述(提示) 参与者名称2的描述 over1的描述 over2的描述 over21的描述 over12的描述 参与者名称1 参与者名称2
	```mermaid
	sequenceDiagram
	    participant 别名1 as 参与者名称1
	    participant 别名2 as 参与者名称2
	    Note left of 别名1: 参与者名称1的描述(提示)
	    Note right of 别名2: 参与者名称2的描述
	    Note over 别名1,别名1: over1的描述
	    Note over 别名2,别名2: over2的描述
	    Note over 别名2,别名1: over21的描述
	    Note over 别名1,别名2: over12的描述
	```

消息

交互时一方对另一方的操作(比如接口调用)或传递出的信息。

格式

<参与者> <箭头> <参与者> : <描述文本>

箭头

->> 显示为实线箭头(主动发出消息)
-->> 显示为虚线箭头(响应)
-x 显示为末尾带「X」的实线箭头(异步消息)

举例

参与者名称1 参与者名称2 who are you 参与者名称1的描述(提示) i am 参与者名称2 参与者名称2的描述 bye! 参与者名称1 参与者名称2
	```mermaid
	sequenceDiagram
	    participant 别名1 as 参与者名称1
	    participant 别名2 as 参与者名称2
	    别名1 ->> 别名2: who are you
	    Note left of 别名1: 参与者名称1的描述(提示)
	    别名2 -->> 别名1: i am  参与者名称2
	    Note right of 别名2: 参与者名称2的描述
	    别名1 -x 别名2: bye!
	```

激活框

从消息接收方的时间线上标记一小段时间,表示对消息进行处理的时间间隔。
格式

<参与者> <箭头> [+/-]: <描述文本>。
A1 A2 111 222 A1 A2
	```mermaid
	sequenceDiagram
	    A1 ->> + A2: 111
	    A2 -->> - A1: 222
	```

循环

相当于编程代码中的 while 循环 循环格式为:

loop 循环的描述
    消息
end
A1 A2 111 222 消息1 响应1 loop [一天七次] A1 A2
	```mermaid
	sequenceDiagram
	     A1 ->> + A2:  111
		 A2 -->> - A1: 222
	    loop 一天七次
	            A1 ->> + A2:  消息1
	    		A2 -->> - A1: 响应1
	    end
	```

选择(alt)

类似于 switch语句

学生 学校 查询成绩 成绩 优秀 及格 不及格 alt [成绩 > 90] [60 <= 成绩 < 90] [成绩 < 60] 学生 学校
	```mermaid
	sequenceDiagram
	    学生 ->> 学校 : 查询成绩
	    学校 -->> 学生 : 成绩
	
	    alt 成绩 > 90
	        学生 ->> 学校 : 优秀
	    else 60 <= 成绩 < 90
	        学生 ->> 学校 : 及格
	    else 成绩 < 60
	        学生 ->> 学校 : 不及格
	    end
	```

可选

类似于单个分支的 if 语句

学生 学校 我成绩及格再出成绩 你及格了 opt [成绩 > 60] 学生 学校
	```mermaid
	sequenceDiagram
	    学生 ->> 学校 : 我成绩及格再出成绩
	
	    opt 成绩 > 60
	        学校  -->> 学生 : 你及格了
	    end
	```

并行

A B 工作做什么 刷微博 听音乐 par [开始摸鱼] 9点下班回家 A B
	```mermaid
	sequenceDiagram
	    A ->> B: 工作做什么
	
	    par 开始摸鱼
	        B ->> B : 刷微博
	    and
	        B ->> B : 听音乐
	    end
	
	    B -->> A : 9点下班回家
	```

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【毕业设计】12-基于单片机的电子体温计(原理图工程+源码工程+仿真工程+答辩论文)

【毕业设计】12-基于单片机的电子体温计&#xff08;原理图工程源码工程仿真工程答辩论文&#xff09; 文章目录【毕业设计】12-基于单片机的电子体温计&#xff08;原理图工程源码工程仿真工程答辩论文&#xff09;任务书设计说明书摘要设计框架架构设计说明书及设计文件源码展…

Efficient Large-Scale Language Model Training on GPU ClustersUsing Megatron-LM

Efficient Large-Scale Language Model Training on GPU ClustersUsing Megatron-LM 1 INTRODUCTION 在这篇文章中展示了 如何将 tensor &#xff0c;pipeline&#xff0c; data 并行组合&#xff0c;扩展到数千个GPU上。 提出了一个新的交错流水线调度&#xff0c;可以提升1…

卷积神经网络的工程技巧总结

参考 卷积神经网络的工程技巧(tricks) - 云社区 - 腾讯云 要成功地使用深度学习算法&#xff0c;仅仅知道存在哪些算法和解释它们为何有效的原理是不够的。一个优秀的机器学习实践者还需知道如何针对具体应用挑选一个合适的算法以及如何监控&#xff0c;并根据实验反馈改进机器…

基于 Hive 的 Flutter 文档类型存储

基于 Hive 的 Flutter 文档类型存储 原文 https://medium.com/gytworkz/document-type-storage-in-flutter-using-hive-a18ea9659d84 前言 长久以来&#xff0c;我们一直使用共享首选项以键对格式在本地存储中存储数据&#xff0c;或者使用 SQLite 在 SQL 数据库中存储数据。 存…

JSP | JSP原理深度剖析、基础语法

目录 一&#xff1a;分析使用纯粹Servlet开发web应用的缺陷 二&#xff1a;JSP原理深度剖析 三&#xff1a;JSP的基础语法 一&#xff1a;分析使用纯粹Servlet开发web应用的缺陷 &#xff08;1&#xff09;在Servlet当中编写HTML/CSS/JavaScript等前端代码存在什么问题&…

基于ATX自动化测试解决方案

在整车开发中&#xff0c;诊断功能实现后需要进行测试验证。测试验证主要分为两个方面&#xff1a;诊断协议层测试和诊断功能测试。诊断协议层测试&#xff1a;需要对服务层服务定义、传输层相关时间参数进行测试验证&#xff1b;诊断功能测试&#xff1a;需要对各诊断功能项&a…

国产操作系统之银河麒麟服务器版V10安装

一、银河麒麟操作系统简介 银河麒麟是目前国内国产化操作系统主流产品之一。银河麒麟高级服务器操作系统V10是针对企业级关键业务&#xff0c;适应虚拟化、云计算、大数据、工业互联网时代对主机系统可靠性、安全性、性能、扩展性和实时性等需求&#xff0c;依据CMMI5级标准研制…

Java中的引用

Java中的引用强引用软引用弱引用虚引用终结器引用&#xff08;FinalReference)JDK 1.2版本之后&#xff0c;Java对引用的概念进行了扩充&#xff0c;将引用分为强引用&#xff08;Strongly Reference&#xff09;、软引用&#xff08;Soft Reference&#xff09;、弱引用&#…

时间序列:时间序列模型---移动平均过程(Moving Average Process)

本文是Quantitative Methods and Analysis: Pairs Trading此书的读书笔记。 我们从白噪声生成另一种时间序列。如下式&#xff1a; 这种时间序列的值由此刻的白噪声实现&#xff08;white noise realization)加上beta倍的前一刻的白噪声实现。注意这个beta跟CAPM模型的beta没有…

Linux redict 输入输出重定向 详细使用方法 文件描述符

Linux redict 重定向 Linux 重定向 在 Linux 系统中&#xff0c;我们需要输入和输出让系统与外部进行交互&#xff0c;比如在我们使用鼠标、键盘等输入设备时其实就是通过输入的方式让数据进行系统中。而系统输出一般就会打印在显示器上、刻录光盘等等。而我们要讲的重定向也…

【学习笔记70】数据劫持

一、 数据驱动视图 多次渲染页面&#xff0c;多的时候&#xff0c;比较麻烦和繁琐const box document.querySelector(.box)const obj {name: QF666,age: 18}box.innerHTML 名字: ${obj.name}; 年龄: ${obj.age};obj.age 99;box.innerHTML 名字: ${obj.name}; 年龄:…

RabbitMQ系列【16】AmqpTemplate接口详解

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 文章目录前言AmqpTemplateAPIsendconvertAndSendreceivereceiveAndConvertreceiveAndReplysendAndReceiveconvertSendAndReceive前言 RabbitTemplate 是spring-amqp提供的一个 RabbitMQ 消息操作模板类…

【Git】rebase 和 merge 的区别

前言 今天想把本地的两个提交压缩成一个提交&#xff0c;再推送到远程。用的是rebase命令解决的&#xff0c;于是乎又捡起了之前的遗留问题&#xff1a;rebase和 merge 有什么区别&#xff1f; 用的是idea内置的git插件&#xff0c;先把idea官网对 “update project” 选择 “…

postgresql使用pg_basebackup备份与恢复

postgresql可以使用pg_dump,pg_restore等命令来进行备份与恢复&#xff0c;那种情况不用停止pgsql服务&#xff0c;只需要执行备份恢复命令即可。 今天介绍的这种备份方式&#xff0c;类似于文件系统的备份与恢复&#xff0c;它需要使用pg_basebackup命令来进行备份&#xff0c…

C#医院门诊会员管理系统源码 通用会员系统源码

C#通用医院会员管理系统源码 源码分享&#xff01; 本系统使用的技术为NhibernateEF,底层完全封装&#xff0c;可二次使用快速开发。 本技术具有以下特点&#xff1a; 1.面向对象方式访问数据库&#xff0c;摆脱SQL&#xff1b; 2.可移植性强&#xff0c;支持所有流行的数据…

光格科技递交科创板上会稿:拟募资6亿 预计年营收3亿

雷递网 雷建平 11月29日苏州光格科技股份有限公司&#xff08;简称&#xff1a;“光格科技”&#xff09;日前递交上会稿&#xff0c;准备在科创板上市。光格科技计划募资6亿&#xff0c;其中&#xff0c;3.1亿元用于分布式光纤传感系统升级研发及量产项目&#xff0c;8000万元…

Java EE|多线程基本操作

文章目录一、一个简单的线程程序及运行二、线程的创建三、线程类——Thread详解常见构造方法常见几个属性线程的启动——start()线程的中断线程的等待——join()线程引用的获取线程的休眠四、多线程编程效率举例一、一个简单的线程程序及运行 在写这样一个代码之前&#xff0c…

web框架

目录 1 左右分割窗口 2 上下分割窗口 3 嵌套分割窗口 4 内联框架 框架的作用是把浏览器窗口划分成若干个小窗口&#xff0c;每个小窗口可以分别显示不同的网页。 框架的基本结构主要分为框架集和框架两个部分&#xff0c;在网页中分别用<frameset>和<frame>标记…

Netty进阶——粘包与半包(代码示例)

目录一、消息粘包和消息半包的概述1.1、消息粘包1.2、消息半包二、粘包现象代码示例2.1、粘包现象服务端示例代码2.2、粘包现象客户端示例代码2.3、分别启动服务端&#xff0c;客户端&#xff0c;查看服务端结果输出三、半包现象代码示例3.1、半包现象服务端示例代码3.2、半包现…

【JavaSE】学习异常

前言&#xff1a; 作者简介&#xff1a;爱吃大白菜1132 人生格言:纸上得来终觉浅&#xff0c;绝知此事要躬行 如果文章知识点有错误的地方不吝赐教&#xff0c;和大家一起学习&#xff0c;一起进步&#xff01; 如果觉得博主文章还不错的话&#xff0c;希望三连支持&#xff01…