这是我参与更文挑战的第4天,活动详情查看: 更文挑战
缘起
看到Mermaid
是因为我开始用掘金编辑器写文章,日常我会用xmind或者流程图来记录,甚至我还徒手画过xmind。用结构图来梳理内容,更直观,清晰也有更自己得思考,俗话说的好千万字抵不过一张图。看到Mermaid我立马就爱了,用代码生成结构图,其实就相当与手写笔记的过程。这篇文章也就应运而生
你能得到什么
- 你可以用代码生成任意你想要的
流程图
、状态图
、甘特图
、时序图
、饼图
、类图
、关系图
、旅程图
- 不管在阅读、学习知识、会议纪要、头脑风暴、时间管理这绝对是一款利器,提高学习效率,梳理学习思路在画图的过程中二次知识深化告别点点点,一路coding 一路爽
- 历史代码可追踪,因为这是代码哇
Mermaid是什么
mermaid
是一个 JS 实现的一个三方库
浅显的理解就是 生成图表 的 “Markdown语法” 用纯文本格式编写图表
在哪里可以使用Mermaid
- js文件中作为三方库引入 npm仓库地址
- cdn形式引入
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</body>
- 支持Markdown语法的编辑器 比如
掘金编辑器
语雀
印象笔记
Typora
Mermaid在线编辑器 - IDE:VScode中下载插件:Markdown Preview Mermaid Support
图表类型
-
flowchart 流程图
-
时序图
-
甘特图
-
类图
-
状态图
-
关系图
-
旅程图
-
饼图
Mermaid - 流程图
基本结构
- 圆角矩形 表示“开始”与“结束”
- 矩形表示行动方案、普通工作环节用
- 菱形表示问题判断或判定(审核/审批/评审)环节
- 用平行四边形表示输入输出
- 箭头代表工作流方向
流程图与节点的创建
id 存在的意义 当节点内多文字过多 节点与节点之间的关系复杂 即可用id指代 当前节点即可
流程图声明
:- 关键字:
graph
- 源代码
```mermaid graph //流程图声明 S[声明一个流程图] // 节点创建 Id[节点内容] ```
- 生成结果
- 关键字:
节点内容
:- 节点内容为纯文本:
-
语法:id(纯文本)
-
源代码
```mermaid graph s(节点为纯文本不包含特殊字符) ```
-
生成结果
-
- 内容包含特殊字符
-
语法:id("内容+特殊字符")
-
源代码
```mermaid graph s("开始(START)") ```
-
生成结果
-
- 内容包含转义字符
- 语法:id(":转义字符;")
- 源代码
```mermaid graph s("开始:#9829;") ```
- 生成结果
- 节点内容为纯文本:
流程图布局
流程图默认的布局为的自上到下
```mermaid
graph
s[开始]-->
e[结束]
```
自上向下
-
语法:
- graph BT
- graph TD
-
源代码:
```mermaid graph TD s[开始]--> e[结束 ```
```mermaid graph TB s[开始]--> e[结束 ```
-
生成结果
-
自下向上
- 语法:
- graph BT
- 源代码:
```mermaid graph BT s[开始]--> e[结束 ```
- 生成结果
- 语法:
自左向右
-
语法:
- graph LR
-
源代码
```mermaid graph LR s[开始]--> e[结束 ```
-
生成结果:
-
自右向左
- 语法:
- graph RL
- 源代码
```mermaid graph RL s[开始]--> e[结束 ```
- 生成结果:
- 语法:
流程图节点形状
矩形
- 语法: id[节点内容]
- 源代码
```mermaid graph s[开始] e[结束] ```
- 生成结果:
圆角矩形节点
-
语法:id(节点内容)
-
源代码
```mermaid graph s(开始) e(结束)id() ```
-
生成结果:
-
体育场形状
- 语法:id([内容])
- 源代码
```mermaid graph s([开始 - 体育场图]) --> e([结束 - 体育场图]) ```
- 生成结果:
圆柱形
- 语法:id[(内容)]
- 源代码
```mermaid graph s[(开始 - 圆柱)] --> e[(结束 - 圆柱)] ```
- 生成结果:
圆形
-
语法:id((内容))
-
源代码
```mermaid graph s((开始 - 圆柱)) --> e((结束 - 圆柱)) ```
-
生成结果:
-
菱形
-
语法:id{内容}
-
源代码
```mermaid graph s{开始 - 菱形} --> e{结束 - 菱形} ```
-
生成结果:
-
六角形
- 语法:id{{内容}}
- 源代码
```mermaid graph s{{开始 - 六角形}} --> e{{结束 - 六角形}} ```
- 生成结果:
不对称
-
语法:id>内容]
-
源代码
```mermaid graph s>开始-非对称] --> E>结束-非对称] ```
-
生成结果:
-
平行四边形
-
语法:
- 右 id[/内容/]
- 左 id[\内容\]
-
源代码
```mermaid graph s[\开始\] --> E[/结束/] ```
-
生成结果:
-
梯形
-
语法:id[/内容]
-
源代码
```mermaid graph s[/开始\] --> E[/结束\] ```
-
生成结果:
-
节点与节点之间的链接
-
实线
- 语法:--
- 源代码:
```mermaid graph LR s[开始] --- e[结束] ```
- 生成效果
graph LR s[开始] --- e[结束]
-
虚线
- 语法 -.-
- 源代码
```mermaid graph LR s[开始] -.- e[结束] ```
- 生成效果
graph LR s[开始] -.- e[结束]
-
粗链接线
- ===
- 源代码
```mermaid graph LR s[开始] === e[结束] ```
- 生成效果
graph LR s[开始] === e[结束]
-
实线箭头
-
语法 -->
-
源代码
```mermaid graph LR s[开始] --> e[结束] ```
-
生成效果:
graph LR s[开始] --> e[结束]
-
-
虚线箭头
- 语法 -.->
- 源代码
```mermaid graph LR s[开始] -.-> e[结束] ```
- 生成效果:
graph LR s[开始] -.-> e[结束]
-
粗线箭头
- 语法 ==>
- 源代码
```mermaid graph LR s[开始] ==> e[结束] ```
- 生成效果
graph LR s[开始] ==> e[结束]
-
带文字的链接线-实线
-
语法 --内容--- 或者 --->|内容|
-
源代码
```mermaid graph LR s[开始] --过程--- e[结束] ```
或者
```mermaid graph LR s[开始] --->|过程| e[结束] ```
-
生成效果:
graph LR s[开始] --过程--- e[结束]
-
-
带文字的链接线-虚线
-
语法 -.内容.->
-
源代码
```mermaid graph LR s[开始] -.过程.-> e[结束] ```
-
生成效果:
graph LR s[开始] -.过程.-> e[结束]
-
-
带文字的链接线-实线粗线
-
语法 ==内容==>
-
源代码
```mermaid graph LR s[开始] ==过程==> e[结束] ```
-
生成效果:
graph LR s[开始] ==过程==> e[结束]
-
关系链
1. 流程关系 横向 纵向
单行
-
源代码
```mermaid graph LR s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜] ```
-
生成效果
graph LR s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜]
多行
-
源代码
```mermaid graph LR s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜] s--走路--> o[永辉超市]--付钱--> e ```
-
生成效果
graph LR s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜] s--走路--> o[永辉超市]--付钱--> e
2. 闭合关系
- 源代码(单循环):
```mermaid
graph LR
s[家] --走路-->P[菜市场]--走路-->L[水果店]--走路--> j[超市]-->s
```
- 生成效果
graph LR s[家] --走路-->P[菜市场]--走路-->L[水果店]--走路--> j[超市]-->s
- 源代码(多循环):
```mermaid
graph LR
s[买菜] --走路-->P[菜市场]--付钱--> s
s--网上--> o[永辉超市]--付钱--> s
```
- 生成效果
graph LR s[买菜] --走路-->P[菜市场]--付钱--> s s--网上--> o[永辉超市]--付钱--> s
3. 平行与交叉关系
张三 李四 都会内卷和躺平
graph
z[张三]-->C[内卷] & D[躺平]
graph
L[李四]-->C[内卷] & D[躺平]
合并
- 源代码
```mermaid
graph
z[张三]-->C[内卷]
z-->D[躺平]
L[李四]-->C[内卷]
L-->D
```
graph
z[张三]-->C[内卷]
z-->D[躺平]
L[李四]-->C[内卷]
L-->D
更简易的写法 只需要一行
- 源代码
```mermaid
graph
z[张三] & L[李四]-->C[内卷] & D[躺平]
```
- 生成效果
graph
z[张三] & L[李四]-->C[内卷] & D[躺平]
4. 控制连接长度
- 源代码
```mermaid
graph
z[张三]-->X{选择躺平还是内卷}
x--内卷-->Y[努力]
Y--努力-->R[重新思考]
R-->X
X-->|躺平|N[喝快乐水]
```
graph
z[张三]-->X{选择躺平还是内卷}
x--内卷-->Y[努力]
Y--努力-->R[重新思考]
R-->X
X-->|躺平|N[喝快乐水]
上图可得当角色选择躺平得逻辑不是预期得展示 需要调整 选择增加躺平得长度 逻辑即可正确
- 源代码
```mermaid
graph
z[张三]-->X{选择躺平还是内卷}
x--内卷-->Y[努力]
Y--努力-->R[重新思考]
R-->X
X--->|躺平|N[喝快乐水] //增加长度
graph
z[张三]-->X{选择躺平还是内卷}
x--内卷-->Y[努力]
Y--努力-->R[重新思考]
R-->X
X--->|躺平|N[喝快乐水]
逻辑上 躺平与重新思考并不是平行关系 理想状态 选择躺平长度大于选择内卷 可用----> 链接线会增加2个层级的长度
- 源代码:
```mermaid graph z[张三]-->X{选择躺平还是内卷} x--内卷-->Y[努力] Y--努力-->R[重新思考] R-->X X--躺平---->N[喝快乐水] ```
graph
z[张三]-->X{选择躺平还是内卷}
x--内卷-->Y[努力]
Y--努力-->R[重新思考]
R-->X
X--躺平---->N[喝快乐水]
可用----> 链接线会增加3个层级的长度 一下是各个类型连接线增加层级长度语法
增加层级长度 | 1 | 2 | 3 |
---|---|---|---|
实线 | --- | ---- | ----- |
带箭头的实线 | --> | ---> | ----> |
粗实线 | === | ==== | ===== |
带箭头的粗实线 | ==> | ===> | ====> |
虚线 | -.- | -..- | -...- |
带箭头的虚线 | -.-> | -..-> | -...-> |
子图表 subgraph
- 基本语法
graph
节点关系
subgraph title //子图表的名称
子图表的节点关系
end //子图标结束标志
- 源代码
```mermaid
graph TB
c1-->a2
subgraph 表1
a1-->a2
end
subgraph 表2
b1-->b2
end
subgraph 表3
c1-->c2
end
```
- 生成效果
graph TB
c1-->a2
subgraph 表1
a1-->a2
end
subgraph 表2
b1-->b2
end
subgraph 表3
c1-->c2
end
交互
为节点添加事件 以及点击跳转 这个现在还不是很好用
- 语法:
var callback = function(){ alert('A callback was triggered'); }
- 源代码:
```mermaid graph LR; A-->B; B[跳转百度]-->C; C-->D; click A callback "Tooltip for a callback" click B "http://www.baidu.com" "This is a tooltip for a link" click A call callback() "Tooltip for a callback" click B href "http://www.github.com" "This is a tooltip for a link" ```
- 生成效果
graph LR; A-->B; B[跳转百度]-->C; C-->D; click A callback "Tooltip for a callback" click B "http://www.baidu.com" "This is a tooltip for a link" click A call callback() "Tooltip for a callback" click B href "http://www.github.com" "This is a tooltip for a link"
注释
-
语法 %%
-
源代码
```mermaid graph LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C ```
-
生成效果
graph LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C
添加样式
方式1
我们需要给开始和结束添加样式
- 语法: style id key:value,key:value
- 源代码:
```mermaid graph LR s["开始(实线边框,4px,边框颜色:#007fff 掘金蓝 ,背景色:red)"] e["结束(虚线边框,4px,边框颜色:red,背景色:#007fff 掘金蓝 文本颜色为白色)"] style s fill:red ,stroke:#007fff,stroke-width:4px style e fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff ```
- 生成效果
graph LR s["开始(实线边框,4px,边框颜色:#007fff 掘金蓝 ,背景色:red)"] e["结束(虚线边框,4px,边框颜色:red,背景色:#007fff 掘金蓝 文本颜色为白色)"] style s fill:red ,stroke:#007fff,stroke-width:4px style e fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff
方式2 类
-
- 定义样式 class
- 语法:classDef className 样式定义
-
- 应用 :::classname
- 源代码:
```mermaid graph LR s[开始]:::ownstyle-->e[结束] classDef ownstyle fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff ```
- 生成效果
graph LR s[开始]:::ownstyle-->e[结束] classDef ownstyle fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff
方式3 css class形式添加样式
-
定义
<style> .cssClass > rect{ fill:red; stroke:#FFFF00; stroke-width:4px; } </style>
-
实例: 源代码
```mermaid graph LR; A-->B[AAA<span>BBB</span>]; B-->D; class A cssClass; ```
生成效果:
graph LR; A-->B[AAA<span>BBB</span>]; B-->D; class A cssClass;
Mermaid - 时序图(序列图)
时序图又名序列图是UML交互图的一种
主要用来表示对象之间发送消息的时间顺序
基本结构
角色
Actor 系统角色 可是是人或者其他系统子系统对象
Object 交互过程中扮演的角色 一般位于时序图顶部生命线
Lifeline 生命线代表时序图中的对象在一段时期内的存在控制焦点
Activation 控制焦点代表时序图中的对象执行一项活动的时期消息
Message 定义交互和协作中交换信息的类 学习流程图的时候还能明白点,到了时序图好像都是没有听过的词汇 不要慌张 我们还是一边看一遍做就会明白其中的含义可以跳过
时序图的创建
- 时序图声明
- 关键字:
sequenceDiagram
- 源代码:
```mermaid sequenceDiagram ```
- 生成效果:
sequenceDiagram
- 关键字:
- 参与者
关键字
:participant
基本对象声明
:-
语法:
participant 参与者名称
-
源代码
``` mermaid sequenceDiagram participant 张三 participant 李四 ```
-
生成效果:
sequenceDiagram participant 张三 participant 李四
-
对象声明-别名 Aliases
:-
语法:
participant 别名 as 参与者名称
-
源代码
``` mermaid sequenceDiagram participant Z as 张三 participant L as 李四 ```
-
生成效果:
sequenceDiagram participant Z as 张三 participant L as 李四
-
消息 Message
-
语法:participant1 箭头 participant2:消息内容
-
源代码:
张三跟李四的对话用不同的连接线来连接
```mermaid sequenceDiagram participant Z as 张三 participant L as 李四 Z->L:我是没有箭头的实线 L-->Z:我是没有箭头的虚线 Z->>L:带箭头的实线 L-->>Z:带箭头的虚线 Z-xL:带x箭头实线 L-)Z:结束时候 带箭头的实线 Z--)L:结束时候 带箭头的虚线 ```
-
生成效果:
sequenceDiagram participant Z as 张三 participant L as 李四 Z->L:我是没有箭头的实线 L-->Z:我是没有箭头的虚线 Z->>L:带箭头的实线 L-->>Z:带箭头的虚线 Z-xL:带x箭头实线 L-)Z:结束时候 带箭头的实线 Z--)L:结束时候 带箭头的虚线
-
线型对照表
线形 含义 -> 无箭头的实线 --> 没箭头的虚线 ->> 带箭头的实线 -->> 带箭头的实线 -x 带x号箭头实线 --x 结尾x号箭头实线 -) 结束 带箭头的实线 --) 结束 带箭头的虚线
控制焦点 Activations
- 语法:
activate participant //激活 消息 deactivate participant //释放激活
这个有一些抽象我们用一个场景来去理解
-
场景1:
张三:hi李四你还好么 // 李四听了开始回话 此时李四是激活状态 开始进行对话 李四:hi张三我可以听到你,我很好,不用担心。 //李四会话结束 不会再跟张三有活动 此时李四的激活状态被释放
- 源代码:
```mermaid sequenceDiagram participant Z as 张三 participant L as 李四 Z->>L:hi李四你还好么 activate L L->>Z:hi张三我可以听到你,我很好,不用担心。 deactivate L ```
- 生成效果:
sequenceDiagram participant Z as 张三 participant L as 李四 Z->>L:hi李四你还好么 activate L L->>Z:hi张三我可以听到你,我很好,不用担心。 deactivate L
- 源代码:
-
场景2:
张三:hi李四你还好么 张三:你可以听到我说话么 //李四开始回话 被激活 李四:hi张三我可以听到你 李四:不用担心我
- 源代码:
```mermaid sequenceDiagram participant Z as 张三 participant L as 李四 Z->>L:hi李四你还好么 activate L Z->>L:你可以听到我说话么 activate L L->>Z:hi张三我可以听到你 deactivate L L->>Z:我很好,不用担心。 deactivate L ```
- 生成效果:
sequenceDiagram participant Z as 张三 participant L as 李四 Z->>L:hi李四你还好么 activate L Z->>L:你可以听到我说话么 activate L L->>Z:hi张三我可以听到你 deactivate L L->>Z:我很好,不用担心。 deactivate L
- 源代码:
时序图-批注 Note
- 语法:
-
单个对象:
Note 位置 of participant:批注内容
-
对个对象:
Note 位置 角色名称1,角色名称2:批注内容
-
- 位于对象左侧:
- 源代码
```mermaid sequenceDiagram participant 张三 Note left of 张三 :我是张三 ```
- 生成效果
sequenceDiagram participant 张三 Note left of 张三 :我是张三
- 源代码
- 位于对象右侧:
- 源代码
```mermaid sequenceDiagram participant 张三 Note right of 张三 :我是张三 ```
- 生成效果
sequenceDiagram participant 张三 Note right of 张三 :我是张三
- 源代码
- 位于对象上方(需要两个对象):
- 源代码
```mermaid sequenceDiagram participant 张三 participant 李四 Note over of 张三&李四 :我是张三 ```
- 生成效果
sequenceDiagram participant 张三 participant 李四 张三->>李四:李四你好么 Note over 张三,李四 :他们正在沟通
- 源代码
时序图-逻辑循环 Loop
交互过程中表示某些循环的环节
-
语法:
loop 循环描述 循环内容 end //结束标记
-
场景: 李四跟张三是好朋友 李四生病了 张三很关心他 每过一小时 为了不让张三如此担心 李四就约定每一个小时给张三发消息
-
源代码:
```mermaid sequenceDiagram participant 张三 participant 李四 张三->>李四:李四你好么 loop 每过一小时李四发消息给张三 李四 --> 张三:我很好 end ```
-
生成效果:
sequenceDiagram participant 张三 participant 李四 张三->>李四:李四你好么 loop 每过一小时李四发消息给张三 李四 --> 张三:我很好 end
时序图 抉择(Alt)&选项(Opt)
组合片段用来解决交互执行的条件及方式。它允许在序列图中直接表示逻辑组件,用于通过指定条件或子进程的应用区域,为任何生命线的任何部分定义特殊条件和子进程。
Alt
抉择
用来指明在两个或更多的消息序列之间的互斥的选择,相当于经典的if..else..
只能发生一种情况
- 语法:
alt 第一种情况描述
具体发生的动作
else 剩余情况描述
具体发生的动作
end
- 场景:
场景:张三:李四你还好么 如果李四生病了他会说:我不是很好 如果李四很健康他会说:我很好 又是很好的一天
- 源代码:
```mermaid sequenceDiagram participant 张三 participant 李四 张三 ->>李四:你生病了么 alt 第一种情况描述 李四-->>张三:是的,我很难受 else 剩余情况描述 李四-->>张三:我没生病,挺好的 end ```
- 生成效果:
sequenceDiagram participant 张三 participant 李四 张三 ->>李四:你生病了么 alt 第一种情况描述 李四-->>张三:是的,我很难受 else 剩余情况描述 李四-->>张三:我没生病,挺好的 end
- 源代码:
opt
选择"
包含一个可能发生或不发生的序列 就是一种场景有可能发生也有可能不发生
-
语法:
opt 情况描述 有可能发生的动作 end
-
场景:
场景:张三:李四你还好么 李四会可能会说谢谢你的问候也可能不会说 这个并无法预测
- 源代码:
```mermaid sequenceDiagram participant 张三 participant 李四 张三 ->>李四:你还好么 opt 可能的回答 李四-->>张三:谢谢你的问候 end ```
- 生成效果:
sequenceDiagram participant 张三 participant 李四 张三 ->>李四:你还好么 opt 可能的回答 李四-->>张三:谢谢你的问候 end
- 源代码:
时序图 并行关系 par
并行处理。 一个对象同时发出的交互动作
- 基本语法:
par 动作描述1 participant1 ->> participant2: 内容 and 动作描述2 participant1 ->> participant3: 内容 end
- 场景:
participants: 张三 李四 王五 张三 在下午5点分别给李四和王五分一条信息:内容是吃了么 李四回复:吃了 张三回复:没吃
- 源代码
```mermaid sequenceDiagram autonumber participant 张三 participant 李四 participant 王五 par [给李四发消息] 张三 ->> 李四: 吃了么 and [王五发送消息] 张三 ->> 王五: 吃了么 end 李四 ->> 张三:没吃呢 王五 ->> 张三:吃了 ```
- 生成效果
sequenceDiagram autonumber participant 张三 participant 李四 participant 王五 par [给李四发消息] 张三 ->> 李四: 吃了么 and [王五发送消息] 张三 ->> 王五: 吃了么 end 李四 ->> 张三:没吃呢 王五 ->> 张三:吃了
- 源代码
- 场景:
- 嵌套语法:
par 动作描述1 participant1 ->> participant2: 内容 and 动作描述2 participant1 ->> participant3: 内容 end par 动作描述1 participant3 ->> participant4:内容 and 王五发消息给A8 participant3 ->> participant5:内容 end
- 场景:
participants: 张三 李四 王五 赵六 A8 王五明天请吃饭 张三发消息问李四明天去不去 同时发消息给王五问明天都有哪些人参加 王五发消息给赵六:明天一起吃饭8 同事也发消息给A8告诉他让他带着小伙伴一起
- 源代码
```mermaid sequenceDiagram participant 张三 participant 李四 participant 王五 participant 张三 participant 赵六 participant A8 par 张三发消息给李四 张三 -->> 李四:明天王5请客吃饭 and 张三发消息给王五 张三 -->> 王五: 明天吃饭都有谁呢 end par 王五发消息给赵六 王五->>赵六:明天准时到场哈 and 王五发消息给A8 王五 ->>A8:明天带上你的伙伴一起来哈 end ```
- 生成效果
sequenceDiagram participant 张三 participant 李四 participant 王五 participant 张三 participant 赵六 participant A8 par 张三发消息给李四 张三 -->> 李四:明天王5请客吃饭 and 张三发消息给王五 张三 -->> 王五: 明天吃饭都有谁呢 end par 王五发消息给赵六 王五->>赵六:明天准时到场哈 and 王五发消息给A8 王五 ->>A8:明天带上你的伙伴一起来哈 end
- 源代码
背景高亮
-
语法:
rect rgba(0,213,123)
-
源代码:
```mermaid sequenceDiagram participant 张三 participant 李四 participant 王五 participant 张三 participant 赵六 participant A8 par 张三发消息给李四 rect rgba(0,113,133) 张三 -->> 李四:明天王5请客吃饭 end and 张三发消息给王五 rect rgba(0,113,133) 张三 -->> 王五: 明天吃饭都有谁呢 end end par 王五发消息给赵六 rect rgba(0,213,123) 王五->>赵六:明天准时到场哈 end and 王五发消息给A8 rect rgba(0,213,123) 王五 ->>A8:明天带上你的伙伴一起来哈 end end ```
-
生成效果:
sequenceDiagram participant 张三 participant 李四 participant 王五 participant 张三 participant 赵六 participant A8 par 张三发消息给李四 rect rgba(0,113,133) 张三 -->> 李四:明天王5请客吃饭 end and 张三发消息给王五 rect rgba(0,113,133) 张三 -->> 王五: 明天吃饭都有谁呢 end end par 王五发消息给赵六 rect rgba(0,213,123) 王五->>赵六:明天准时到场哈 end and 王五发消息给A8 rect rgba(0,213,123) 王五 ->>A8:明天带上你的伙伴一起来哈 end end
- 场景: