Markdown如何画时序图，一篇就够了
2024-04-24 15:09:17
文章目录
- markdown 如何画图
- 1. 时序图
- 1.1 时序图介绍
- 1.2 参与者
- 1.2.1 画法1(不带昵称)
- 1.2.2 画法2(使用参与者别名)
- 1.3 消息
- 1.4 激活框
- 1.5 注释
- 1.6 循环(loop)
- 1.7 选择(alt)
- 1.8 可选(opt)
- 1.9 并行(par)
- 1.10 背景颜色
- 2. 饼图
markdown 如何画图
前言：
mermaid 是一个开源项目，可以在Markdown中，使用类似编码的方式，制作类图、流程图、时序图、甘特图、饼图等。使用下来，可以明显提升画图的效率。 本次介绍如何画时序图。
1. 时序图
1.1 时序图介绍
时序图是一种表现交互过程的图示，主要展示各个参与者之间是如何交互的，以及交互的顺序是怎样的。它的主要构成元素有：参与者、消息、激活框、注释、循环(loop)、选择(alt)、可选(opt)、并行(Par)。
时序图基本语法如下：
```mermaid%% 注释sequenceDiagramparticipant 别名 as 对象显示名(全部直接用显示名时可以忽略该步骤)顺序增加图标中消息增加标签提示
```
sequenceDiagram 是每幅时序图的固定开头；
participant <参与者名称> 声明参与者，语句次序即为参与者横向排列次序。
1.2 参与者
传统时序图概念中参与者有角色和类对象之分，这里不做区分，用参与者表示一切参与交互的事物，可以是人、类对象、系统等。中间竖直的线段从上至下表示时间的流逝。
1.2.1 画法1(不带昵称)
```mermaidsequenceDiagramClient->>Gateway : 发送JSON RPC请求Gateway-->>Client : 把JSON RPC响应发送给客户端
```
效果如图
#mermaid-svg-r1QVYHzkSyZ3APEv {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-r1QVYHzkSyZ3APEv .error-icon{fill:#552222;}#mermaid-svg-r1QVYHzkSyZ3APEv .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-r1QVYHzkSyZ3APEv .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-r1QVYHzkSyZ3APEv .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-r1QVYHzkSyZ3APEv .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-r1QVYHzkSyZ3APEv .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-r1QVYHzkSyZ3APEv .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-r1QVYHzkSyZ3APEv .marker{fill:#333333;stroke:#333333;}#mermaid-svg-r1QVYHzkSyZ3APEv .marker.cross{stroke:#333333;}#mermaid-svg-r1QVYHzkSyZ3APEv svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-r1QVYHzkSyZ3APEv .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-r1QVYHzkSyZ3APEv text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-r1QVYHzkSyZ3APEv .actor-line{stroke:grey;}#mermaid-svg-r1QVYHzkSyZ3APEv .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-r1QVYHzkSyZ3APEv .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-r1QVYHzkSyZ3APEv #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-r1QVYHzkSyZ3APEv .sequenceNumber{fill:white;}#mermaid-svg-r1QVYHzkSyZ3APEv #sequencenumber{fill:#333;}#mermaid-svg-r1QVYHzkSyZ3APEv #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-r1QVYHzkSyZ3APEv .messageText{fill:#333;stroke:#333;}#mermaid-svg-r1QVYHzkSyZ3APEv .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-r1QVYHzkSyZ3APEv .labelText,#mermaid-svg-r1QVYHzkSyZ3APEv .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-r1QVYHzkSyZ3APEv .loopText,#mermaid-svg-r1QVYHzkSyZ3APEv .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-r1QVYHzkSyZ3APEv .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-r1QVYHzkSyZ3APEv .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-r1QVYHzkSyZ3APEv .noteText,#mermaid-svg-r1QVYHzkSyZ3APEv .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-r1QVYHzkSyZ3APEv .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-r1QVYHzkSyZ3APEv .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-r1QVYHzkSyZ3APEv .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-r1QVYHzkSyZ3APEv .actorPopupMenu{position:absolute;}#mermaid-svg-r1QVYHzkSyZ3APEv .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-r1QVYHzkSyZ3APEv .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-r1QVYHzkSyZ3APEv .actor-man circle,#mermaid-svg-r1QVYHzkSyZ3APEv line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-r1QVYHzkSyZ3APEv :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}ClientGateway发送JSON RPC请求1把JSON RPC 响应发送给客户端2ClientGateway
1.2.2 画法2(使用参与者别名)
```mermaidsequenceDiagramparticipant C as Clicntparticipant G as GatewayC ->> G : 发送JSON RPC请求G -->> C : 把JSON RPC响应发送给客户端
效果如图
#mermaid-svg-qw26xWedGIxIWGEw {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-qw26xWedGIxIWGEw .error-icon{fill:#552222;}#mermaid-svg-qw26xWedGIxIWGEw .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-qw26xWedGIxIWGEw .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-qw26xWedGIxIWGEw .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-qw26xWedGIxIWGEw .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-qw26xWedGIxIWGEw .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-qw26xWedGIxIWGEw .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-qw26xWedGIxIWGEw .marker{fill:#333333;stroke:#333333;}#mermaid-svg-qw26xWedGIxIWGEw .marker.cross{stroke:#333333;}#mermaid-svg-qw26xWedGIxIWGEw svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-qw26xWedGIxIWGEw .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qw26xWedGIxIWGEw text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-qw26xWedGIxIWGEw .actor-line{stroke:grey;}#mermaid-svg-qw26xWedGIxIWGEw .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-qw26xWedGIxIWGEw .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-qw26xWedGIxIWGEw #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-qw26xWedGIxIWGEw .sequenceNumber{fill:white;}#mermaid-svg-qw26xWedGIxIWGEw #sequencenumber{fill:#333;}#mermaid-svg-qw26xWedGIxIWGEw #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-qw26xWedGIxIWGEw .messageText{fill:#333;stroke:#333;}#mermaid-svg-qw26xWedGIxIWGEw .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qw26xWedGIxIWGEw .labelText,#mermaid-svg-qw26xWedGIxIWGEw .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-qw26xWedGIxIWGEw .loopText,#mermaid-svg-qw26xWedGIxIWGEw .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-qw26xWedGIxIWGEw .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-qw26xWedGIxIWGEw .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-qw26xWedGIxIWGEw .noteText,#mermaid-svg-qw26xWedGIxIWGEw .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-qw26xWedGIxIWGEw .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qw26xWedGIxIWGEw .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qw26xWedGIxIWGEw .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qw26xWedGIxIWGEw .actorPopupMenu{position:absolute;}#mermaid-svg-qw26xWedGIxIWGEw .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-qw26xWedGIxIWGEw .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qw26xWedGIxIWGEw .actor-man circle,#mermaid-svg-qw26xWedGIxIWGEw line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-qw26xWedGIxIWGEw :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}ClientGateway发送 JSON PRC 请求1将JSON RPC 响应结果发送给客户端2ClientGateway
1.3 消息
交互时一方对另一方的的操作(比如接口调用)或传递信息。用单向箭头表示：实线代表主动发出消息；虚线代表响应；末尾带「x」 表示异步消息，无需等待回应。
消息语句格式： <参与者><箭头><参与者>:<描述文本> 。 描述文本可以为空，但是: 不能省略。
**<箭头>**的写法有6种3类，其中实线表示请求，虚线表示响应：
->：无箭头的实线-->：无箭头的虚线->>：有箭头的实线(主动发出消息)-->>：有箭头的虚线(响应)-x：末尾带「x」 的实线箭头--x：末尾带「x」的虚线箭头-)：实线末端带有一个空心箭头(异步)--)：虚线末端带有一个空心箭头(异步)
画法：
```mermaidsequenceDiagramparticipant L as 老板participant A as 员工AL ->> A : "在这里我们是兄弟!"L -x A : 年底每人发一年的奖金(画大饼)A -->> L : 弱弱的鼓掌
```
效果如下：
#mermaid-svg-rtqBjwU7orsBS6VD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-rtqBjwU7orsBS6VD .error-icon{fill:#552222;}#mermaid-svg-rtqBjwU7orsBS6VD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-rtqBjwU7orsBS6VD .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-rtqBjwU7orsBS6VD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-rtqBjwU7orsBS6VD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-rtqBjwU7orsBS6VD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-rtqBjwU7orsBS6VD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-rtqBjwU7orsBS6VD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-rtqBjwU7orsBS6VD .marker.cross{stroke:#333333;}#mermaid-svg-rtqBjwU7orsBS6VD svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-rtqBjwU7orsBS6VD .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-rtqBjwU7orsBS6VD text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-rtqBjwU7orsBS6VD .actor-line{stroke:grey;}#mermaid-svg-rtqBjwU7orsBS6VD .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-rtqBjwU7orsBS6VD .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-rtqBjwU7orsBS6VD #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-rtqBjwU7orsBS6VD .sequenceNumber{fill:white;}#mermaid-svg-rtqBjwU7orsBS6VD #sequencenumber{fill:#333;}#mermaid-svg-rtqBjwU7orsBS6VD #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-rtqBjwU7orsBS6VD .messageText{fill:#333;stroke:#333;}#mermaid-svg-rtqBjwU7orsBS6VD .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-rtqBjwU7orsBS6VD .labelText,#mermaid-svg-rtqBjwU7orsBS6VD .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-rtqBjwU7orsBS6VD .loopText,#mermaid-svg-rtqBjwU7orsBS6VD .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-rtqBjwU7orsBS6VD .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-rtqBjwU7orsBS6VD .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-rtqBjwU7orsBS6VD .noteText,#mermaid-svg-rtqBjwU7orsBS6VD .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-rtqBjwU7orsBS6VD .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-rtqBjwU7orsBS6VD .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-rtqBjwU7orsBS6VD .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-rtqBjwU7orsBS6VD .actorPopupMenu{position:absolute;}#mermaid-svg-rtqBjwU7orsBS6VD .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-rtqBjwU7orsBS6VD .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-rtqBjwU7orsBS6VD .actor-man circle,#mermaid-svg-rtqBjwU7orsBS6VD line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-rtqBjwU7orsBS6VD :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}老板员工A"在这里我们是兄弟!"1年底每人发一年的奖金(画大饼)2弱弱的鼓掌3加油啊4老板员工A
1.4 激活框
从消息接收方 的时间上上标记一小段时间，表示对消息进行处理的时间间隔。有两种激活方式：
- 显示通过语法实现，会在指定对象的消息中增加；
- 直接在对象前面增加加减号(开始时用加号 +， 结束时用减号 -)。在加号对应的对象上开始，减号对应的对象上结束。他们相当于激活框的开关。
# 直接接货
开始： activate <对象>
结束： deactivate <对象># 符号激活
+<对象>
-<对象>
示例代码：
```mermaidsequenceDiagramparticipant L as 老板participant A as 员工L ->> + A : ”不仅要996，还要669“activate LA -->> - L : "鼓掌"L ->> +A : "悔创公司"A -->> L : ……deactivate L
```
效果如下
#mermaid-svg-HVayrTDgmcsvePhz {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-HVayrTDgmcsvePhz .error-icon{fill:#552222;}#mermaid-svg-HVayrTDgmcsvePhz .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-HVayrTDgmcsvePhz .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-HVayrTDgmcsvePhz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-HVayrTDgmcsvePhz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-HVayrTDgmcsvePhz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-HVayrTDgmcsvePhz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-HVayrTDgmcsvePhz .marker{fill:#333333;stroke:#333333;}#mermaid-svg-HVayrTDgmcsvePhz .marker.cross{stroke:#333333;}#mermaid-svg-HVayrTDgmcsvePhz svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-HVayrTDgmcsvePhz .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-HVayrTDgmcsvePhz text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-HVayrTDgmcsvePhz .actor-line{stroke:grey;}#mermaid-svg-HVayrTDgmcsvePhz .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-HVayrTDgmcsvePhz .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-HVayrTDgmcsvePhz #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-HVayrTDgmcsvePhz .sequenceNumber{fill:white;}#mermaid-svg-HVayrTDgmcsvePhz #sequencenumber{fill:#333;}#mermaid-svg-HVayrTDgmcsvePhz #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-HVayrTDgmcsvePhz .messageText{fill:#333;stroke:#333;}#mermaid-svg-HVayrTDgmcsvePhz .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-HVayrTDgmcsvePhz .labelText,#mermaid-svg-HVayrTDgmcsvePhz .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-HVayrTDgmcsvePhz .loopText,#mermaid-svg-HVayrTDgmcsvePhz .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-HVayrTDgmcsvePhz .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-HVayrTDgmcsvePhz .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-HVayrTDgmcsvePhz .noteText,#mermaid-svg-HVayrTDgmcsvePhz .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-HVayrTDgmcsvePhz .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HVayrTDgmcsvePhz .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HVayrTDgmcsvePhz .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HVayrTDgmcsvePhz .actorPopupMenu{position:absolute;}#mermaid-svg-HVayrTDgmcsvePhz .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-HVayrTDgmcsvePhz .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-HVayrTDgmcsvePhz .actor-man circle,#mermaid-svg-HVayrTDgmcsvePhz line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-HVayrTDgmcsvePhz :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}老板员工”不仅要996，还要669“1"鼓掌"2"悔创公司"3……4老板员工
1.5 注释
语法格式： Note [位置] [对象]： <注释内容>
注释显示的位置有三个，以被标记的对象中心为参考系，给予横跨多个时，可以用逗号分割：
- right of
- left of
- over
示例代码：
```mermaidsequenceDiagram note left of 老板 : 我是个脸盲note right of 员工 : 对钱不感兴趣note over 老板,员工: 对996感兴趣
```
效果如图
#mermaid-svg-ByAQn4GMq89tE0Xa {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ByAQn4GMq89tE0Xa .error-icon{fill:#552222;}#mermaid-svg-ByAQn4GMq89tE0Xa .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ByAQn4GMq89tE0Xa .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ByAQn4GMq89tE0Xa .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ByAQn4GMq89tE0Xa .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ByAQn4GMq89tE0Xa .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ByAQn4GMq89tE0Xa .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ByAQn4GMq89tE0Xa .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ByAQn4GMq89tE0Xa .marker.cross{stroke:#333333;}#mermaid-svg-ByAQn4GMq89tE0Xa svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ByAQn4GMq89tE0Xa .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ByAQn4GMq89tE0Xa text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-ByAQn4GMq89tE0Xa .actor-line{stroke:grey;}#mermaid-svg-ByAQn4GMq89tE0Xa .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-ByAQn4GMq89tE0Xa .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-ByAQn4GMq89tE0Xa #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-ByAQn4GMq89tE0Xa .sequenceNumber{fill:white;}#mermaid-svg-ByAQn4GMq89tE0Xa #sequencenumber{fill:#333;}#mermaid-svg-ByAQn4GMq89tE0Xa #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-ByAQn4GMq89tE0Xa .messageText{fill:#333;stroke:#333;}#mermaid-svg-ByAQn4GMq89tE0Xa .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ByAQn4GMq89tE0Xa .labelText,#mermaid-svg-ByAQn4GMq89tE0Xa .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-ByAQn4GMq89tE0Xa .loopText,#mermaid-svg-ByAQn4GMq89tE0Xa .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-ByAQn4GMq89tE0Xa .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-ByAQn4GMq89tE0Xa .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-ByAQn4GMq89tE0Xa .noteText,#mermaid-svg-ByAQn4GMq89tE0Xa .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-ByAQn4GMq89tE0Xa .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ByAQn4GMq89tE0Xa .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ByAQn4GMq89tE0Xa .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ByAQn4GMq89tE0Xa .actorPopupMenu{position:absolute;}#mermaid-svg-ByAQn4GMq89tE0Xa .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-ByAQn4GMq89tE0Xa .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ByAQn4GMq89tE0Xa .actor-man circle,#mermaid-svg-ByAQn4GMq89tE0Xa line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-ByAQn4GMq89tE0Xa :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}老板员工我是个脸盲对钱不感兴趣对996感兴趣老板员工
1.6 循环(loop)
当条件满足时，重复发出消息序列(相当于while语句)。语法格式如下：
loop 消息说明[消息流]
end
示例代码：
```mermaidsequenceDiagram网友 ->> + 某宝 : 网购喜欢的商品某宝 -->> - 网友 : 下单成功loop 一天7次网友 ->> + 某宝: 查看配送进度某宝 -->> - 网友 : 配送中end
```
效果如图：
#mermaid-svg-h47GKlHml00FiOyn {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-h47GKlHml00FiOyn .error-icon{fill:#552222;}#mermaid-svg-h47GKlHml00FiOyn .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-h47GKlHml00FiOyn .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-h47GKlHml00FiOyn .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-h47GKlHml00FiOyn .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-h47GKlHml00FiOyn .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-h47GKlHml00FiOyn .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-h47GKlHml00FiOyn .marker{fill:#333333;stroke:#333333;}#mermaid-svg-h47GKlHml00FiOyn .marker.cross{stroke:#333333;}#mermaid-svg-h47GKlHml00FiOyn svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-h47GKlHml00FiOyn .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-h47GKlHml00FiOyn text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-h47GKlHml00FiOyn .actor-line{stroke:grey;}#mermaid-svg-h47GKlHml00FiOyn .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-h47GKlHml00FiOyn .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-h47GKlHml00FiOyn #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-h47GKlHml00FiOyn .sequenceNumber{fill:white;}#mermaid-svg-h47GKlHml00FiOyn #sequencenumber{fill:#333;}#mermaid-svg-h47GKlHml00FiOyn #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-h47GKlHml00FiOyn .messageText{fill:#333;stroke:#333;}#mermaid-svg-h47GKlHml00FiOyn .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-h47GKlHml00FiOyn .labelText,#mermaid-svg-h47GKlHml00FiOyn .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-h47GKlHml00FiOyn .loopText,#mermaid-svg-h47GKlHml00FiOyn .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-h47GKlHml00FiOyn .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-h47GKlHml00FiOyn .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-h47GKlHml00FiOyn .noteText,#mermaid-svg-h47GKlHml00FiOyn .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-h47GKlHml00FiOyn .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-h47GKlHml00FiOyn .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-h47GKlHml00FiOyn .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-h47GKlHml00FiOyn .actorPopupMenu{position:absolute;}#mermaid-svg-h47GKlHml00FiOyn .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-h47GKlHml00FiOyn .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-h47GKlHml00FiOyn .actor-man circle,#mermaid-svg-h47GKlHml00FiOyn line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-h47GKlHml00FiOyn :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}网友某宝网购喜欢的商品1下单成功2查看配送进度3配送中4loop[一天7次]网友某宝
1.7 选择(alt)
在多个条件中做出判断，每个条件对应不同的消息队列(相当于if else 语句)。语法格式如下：
alt 条件说明[消息流]
else [消息流]
else [消息流]
end
示例代码：
```mermaidsequenceDiagram土豪 ->> + 取款机 : 查询余额取款机 -->> - 土豪: 余额alt 余额 > 5000 土豪 ->> 取款机 : 取上限5000块else 100 < 余额 < 5000土豪 ->> 取款机 : 有多少取多少else 余额 < 100 土豪 ->> 取款机 : 退卡end 取款机 -->> 土豪 : 退卡成功```
示例如下
#mermaid-svg-RNc2FTWeydDX2WEk {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-RNc2FTWeydDX2WEk .error-icon{fill:#552222;}#mermaid-svg-RNc2FTWeydDX2WEk .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-RNc2FTWeydDX2WEk .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-RNc2FTWeydDX2WEk .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-RNc2FTWeydDX2WEk .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-RNc2FTWeydDX2WEk .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-RNc2FTWeydDX2WEk .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-RNc2FTWeydDX2WEk .marker{fill:#333333;stroke:#333333;}#mermaid-svg-RNc2FTWeydDX2WEk .marker.cross{stroke:#333333;}#mermaid-svg-RNc2FTWeydDX2WEk svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-RNc2FTWeydDX2WEk .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-RNc2FTWeydDX2WEk text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-RNc2FTWeydDX2WEk .actor-line{stroke:grey;}#mermaid-svg-RNc2FTWeydDX2WEk .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-RNc2FTWeydDX2WEk .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-RNc2FTWeydDX2WEk #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-RNc2FTWeydDX2WEk .sequenceNumber{fill:white;}#mermaid-svg-RNc2FTWeydDX2WEk #sequencenumber{fill:#333;}#mermaid-svg-RNc2FTWeydDX2WEk #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-RNc2FTWeydDX2WEk .messageText{fill:#333;stroke:#333;}#mermaid-svg-RNc2FTWeydDX2WEk .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-RNc2FTWeydDX2WEk .labelText,#mermaid-svg-RNc2FTWeydDX2WEk .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-RNc2FTWeydDX2WEk .loopText,#mermaid-svg-RNc2FTWeydDX2WEk .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-RNc2FTWeydDX2WEk .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-RNc2FTWeydDX2WEk .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-RNc2FTWeydDX2WEk .noteText,#mermaid-svg-RNc2FTWeydDX2WEk .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-RNc2FTWeydDX2WEk .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-RNc2FTWeydDX2WEk .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-RNc2FTWeydDX2WEk .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-RNc2FTWeydDX2WEk .actorPopupMenu{position:absolute;}#mermaid-svg-RNc2FTWeydDX2WEk .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-RNc2FTWeydDX2WEk .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-RNc2FTWeydDX2WEk .actor-man circle,#mermaid-svg-RNc2FTWeydDX2WEk line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-RNc2FTWeydDX2WEk :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}土豪取款机查询余额1余额2取上限5000块3有多少取多少4退卡5alt[余额 > 5000][100 < 余额 < 5000][余额 < 100]退卡成功6土豪取款机
1.8 可选(opt)
在满足某条件的时候执行消息序列，否则不执行，相当于单个分支的if语句。 语法格式如下:
opt 条件说明[消息流]
end
示例代码：
```mermaidsequenceDiagram老板 ->> +员工 : 开始实行996opt 薪资加倍员工 -->> -老板 : no wayend
```
效果如下
#mermaid-svg-HZQPj17Ucq7Wib2Q {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-HZQPj17Ucq7Wib2Q .error-icon{fill:#552222;}#mermaid-svg-HZQPj17Ucq7Wib2Q .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-HZQPj17Ucq7Wib2Q .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-HZQPj17Ucq7Wib2Q .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-HZQPj17Ucq7Wib2Q .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-HZQPj17Ucq7Wib2Q .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-HZQPj17Ucq7Wib2Q .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-HZQPj17Ucq7Wib2Q .marker{fill:#333333;stroke:#333333;}#mermaid-svg-HZQPj17Ucq7Wib2Q .marker.cross{stroke:#333333;}#mermaid-svg-HZQPj17Ucq7Wib2Q svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-HZQPj17Ucq7Wib2Q .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-HZQPj17Ucq7Wib2Q text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-HZQPj17Ucq7Wib2Q .actor-line{stroke:grey;}#mermaid-svg-HZQPj17Ucq7Wib2Q .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-HZQPj17Ucq7Wib2Q .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-HZQPj17Ucq7Wib2Q #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-HZQPj17Ucq7Wib2Q .sequenceNumber{fill:white;}#mermaid-svg-HZQPj17Ucq7Wib2Q #sequencenumber{fill:#333;}#mermaid-svg-HZQPj17Ucq7Wib2Q #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-HZQPj17Ucq7Wib2Q .messageText{fill:#333;stroke:#333;}#mermaid-svg-HZQPj17Ucq7Wib2Q .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-HZQPj17Ucq7Wib2Q .labelText,#mermaid-svg-HZQPj17Ucq7Wib2Q .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-HZQPj17Ucq7Wib2Q .loopText,#mermaid-svg-HZQPj17Ucq7Wib2Q .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-HZQPj17Ucq7Wib2Q .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-HZQPj17Ucq7Wib2Q .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-HZQPj17Ucq7Wib2Q .noteText,#mermaid-svg-HZQPj17Ucq7Wib2Q .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-HZQPj17Ucq7Wib2Q .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HZQPj17Ucq7Wib2Q .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HZQPj17Ucq7Wib2Q .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HZQPj17Ucq7Wib2Q .actorPopupMenu{position:absolute;}#mermaid-svg-HZQPj17Ucq7Wib2Q .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-HZQPj17Ucq7Wib2Q .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-HZQPj17Ucq7Wib2Q .actor-man circle,#mermaid-svg-HZQPj17Ucq7Wib2Q line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-HZQPj17Ucq7Wib2Q :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}老板员工开始实行9961no way2opt[薪资加倍]老板员工
1.9 并行(par)
将消息序列分成多个片段，并行执行。语法格式如下：
opt 说明[消息流]
and [消息流]
and……
end
示例代码：
```mermaidsequenceDiagram老板 ->> 员工 : "开始996"par 上班时间员工 ->> 员工 : 工作and 员工 ->> 员工 : 刷微博and 员工 ->> 员工 : 刷朋友圈end员工 -->> 老板 : 下班
```
示例如下
#mermaid-svg-chs0OamDS7RCqIss {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-chs0OamDS7RCqIss .error-icon{fill:#552222;}#mermaid-svg-chs0OamDS7RCqIss .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-chs0OamDS7RCqIss .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-chs0OamDS7RCqIss .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-chs0OamDS7RCqIss .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-chs0OamDS7RCqIss .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-chs0OamDS7RCqIss .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-chs0OamDS7RCqIss .marker{fill:#333333;stroke:#333333;}#mermaid-svg-chs0OamDS7RCqIss .marker.cross{stroke:#333333;}#mermaid-svg-chs0OamDS7RCqIss svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-chs0OamDS7RCqIss .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-chs0OamDS7RCqIss text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-chs0OamDS7RCqIss .actor-line{stroke:grey;}#mermaid-svg-chs0OamDS7RCqIss .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-chs0OamDS7RCqIss .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-chs0OamDS7RCqIss #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-chs0OamDS7RCqIss .sequenceNumber{fill:white;}#mermaid-svg-chs0OamDS7RCqIss #sequencenumber{fill:#333;}#mermaid-svg-chs0OamDS7RCqIss #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-chs0OamDS7RCqIss .messageText{fill:#333;stroke:#333;}#mermaid-svg-chs0OamDS7RCqIss .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-chs0OamDS7RCqIss .labelText,#mermaid-svg-chs0OamDS7RCqIss .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-chs0OamDS7RCqIss .loopText,#mermaid-svg-chs0OamDS7RCqIss .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-chs0OamDS7RCqIss .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-chs0OamDS7RCqIss .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-chs0OamDS7RCqIss .noteText,#mermaid-svg-chs0OamDS7RCqIss .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-chs0OamDS7RCqIss .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-chs0OamDS7RCqIss .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-chs0OamDS7RCqIss .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-chs0OamDS7RCqIss .actorPopupMenu{position:absolute;}#mermaid-svg-chs0OamDS7RCqIss .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-chs0OamDS7RCqIss .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-chs0OamDS7RCqIss .actor-man circle,#mermaid-svg-chs0OamDS7RCqIss line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-chs0OamDS7RCqIss :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}老板员工"开始996"1工作2刷微博3刷朋友圈4par[上班时间]下班5老板员工
1.10 背景颜色
语法格式：
rect rgb(191, 222, 233)[消息流]
end
示例代码：
```mermaidsequenceDiagramClient ->> +Service : 发送请求rect rgb(191, 223, 255)Service ->> Service : 处理请求Service -->> Client : 发送响应end
```
示例如下
#mermaid-svg-hn8sgdx7wUfMYh4U {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hn8sgdx7wUfMYh4U .error-icon{fill:#552222;}#mermaid-svg-hn8sgdx7wUfMYh4U .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-hn8sgdx7wUfMYh4U .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-hn8sgdx7wUfMYh4U .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-hn8sgdx7wUfMYh4U .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-hn8sgdx7wUfMYh4U .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-hn8sgdx7wUfMYh4U .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-hn8sgdx7wUfMYh4U .marker{fill:#333333;stroke:#333333;}#mermaid-svg-hn8sgdx7wUfMYh4U .marker.cross{stroke:#333333;}#mermaid-svg-hn8sgdx7wUfMYh4U svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-hn8sgdx7wUfMYh4U .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-hn8sgdx7wUfMYh4U text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-hn8sgdx7wUfMYh4U .actor-line{stroke:grey;}#mermaid-svg-hn8sgdx7wUfMYh4U .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-hn8sgdx7wUfMYh4U .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-hn8sgdx7wUfMYh4U #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-hn8sgdx7wUfMYh4U .sequenceNumber{fill:white;}#mermaid-svg-hn8sgdx7wUfMYh4U #sequencenumber{fill:#333;}#mermaid-svg-hn8sgdx7wUfMYh4U #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-hn8sgdx7wUfMYh4U .messageText{fill:#333;stroke:#333;}#mermaid-svg-hn8sgdx7wUfMYh4U .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-hn8sgdx7wUfMYh4U .labelText,#mermaid-svg-hn8sgdx7wUfMYh4U .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-hn8sgdx7wUfMYh4U .loopText,#mermaid-svg-hn8sgdx7wUfMYh4U .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-hn8sgdx7wUfMYh4U .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-hn8sgdx7wUfMYh4U .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-hn8sgdx7wUfMYh4U .noteText,#mermaid-svg-hn8sgdx7wUfMYh4U .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-hn8sgdx7wUfMYh4U .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-hn8sgdx7wUfMYh4U .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-hn8sgdx7wUfMYh4U .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-hn8sgdx7wUfMYh4U .actorPopupMenu{position:absolute;}#mermaid-svg-hn8sgdx7wUfMYh4U .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-hn8sgdx7wUfMYh4U .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-hn8sgdx7wUfMYh4U .actor-man circle,#mermaid-svg-hn8sgdx7wUfMYh4U line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-hn8sgdx7wUfMYh4U :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}ClientService发送请求1处理请求2发送响应3ClientService
2. 饼图
语法格式说明：
pie showdatatitle [titleValue][dataKey1] : [dataValue1][dataKey2] : [dataValue2]……
代码示例：
```mermaidpie showDatatitle Key elements in Product X"Calcium" : 40.50"Potassium" : 45.5"Magnesium" : 10"Iron" : 5
示例如下
#mermaid-svg-RS6LeTQxvYx4zKOJ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-RS6LeTQxvYx4zKOJ .error-icon{fill:#552222;}#mermaid-svg-RS6LeTQxvYx4zKOJ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-RS6LeTQxvYx4zKOJ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-RS6LeTQxvYx4zKOJ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-RS6LeTQxvYx4zKOJ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-RS6LeTQxvYx4zKOJ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-RS6LeTQxvYx4zKOJ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-RS6LeTQxvYx4zKOJ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-RS6LeTQxvYx4zKOJ .marker.cross{stroke:#333333;}#mermaid-svg-RS6LeTQxvYx4zKOJ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-RS6LeTQxvYx4zKOJ .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-RS6LeTQxvYx4zKOJ .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-RS6LeTQxvYx4zKOJ .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-RS6LeTQxvYx4zKOJ .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-RS6LeTQxvYx4zKOJ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}40%45%10%5%Key elements in Product XCalcium [40.5]Potassium [45.5]Magnesium [10]Iron [5]
Markdown如何画时序图，一篇就够了相关推荐
- 画时序图你用什么软件？
软件设计时序图制作工具 在软件设计过程中,经常会使用到时序图来表达模块之间的交互.信息传递的动态行为或者其他软件逻辑.时序图可以清晰第表达软件层面的设计,甚至毫不夸张说是"一图顶千言&quo ...
- Mac下安装 PlantUML 插件画时序图、UML类图
1. 安装 PlantUML 插件 安装完 PlantUML 就可以画时序图.流程图了. 但是,不能画 UML 类图,还少了一个图形渲染的工具 Graphviz. 2.在 Mac 上安装 Graphv ...
- Intellij IDEA中安装使用PlantUML画时序图、类图等
转载自 https://www.jianshu.com/p/a6bd7e3048ef 一.在Intellij安装PlantUML插件 在菜单栏Intellij IDEA打开插件安装窗口(版本不一样,可 ...
- 【实用工具】Visio画时序图组件
本文由FPGA爱好者小梅哥编写,未经作者许可,本文仅允许网络论坛复制转载,且转载时请标明原作者. Visio画时序图组件,实用方法很简单,下载,解压,然后放到一个固定的位置,Visio默认的查找位置为 ...
- uml画时序图操作步骤
本人使用的是staruml工具,下载地址:https://share.weiyun.com/5HtcSvV 在日常工作中,不管是需求分析.流程设计.源码解读,通过uml工具画时序图都是一个很有效的辅助 ...
- 在线画时序图的工具：Web Sequence Diagrams ，支持实时生成预览图
因为工作需要,这两天在尝试着给手里壹些模块画时序图(Sequence Diagrams),壹般画这种图的时候,我们第壹反应会想到安装 IBM 的 Rational Rose,但是我不想为了画这种图就去 ...
- 用viso画时序图（使用步骤）
在进行时序分析时,常常需要画出时序图来更直观的观察 下面就说明怎样使用viso画时序图(版本2016) 1.打开viso,新建一个空白绘图,点击创建 2.按照下图点击更多形状->工程->电 ...
- 用代码画时序图！YYDS
前言 最近通过代码来画时序图,UML用例图,感觉很不错,所以给大家分享一下. 日常开发,一般在设计阶段,我们都需要画时序图.用例图等等.大家平时画图的时候,是用draw.io还是processOn呢? ...
- 用R画时序图、（偏）自相关图
画时序图 install.packages("readxl") library(readxl)te <- read_xls("D:/data/Rdata/tsdat ...
最新文章
- XML（一）XML大揭秘
- ZOJ-2770 Burn the Linked Camp 差分约束
- Solaris 11 安装图解（8）
- STM32之ADC多通道连续例程
- ROS : 修改ROS源代码(overlaying package)
- 我的docker随笔15：MySQL启动时自动创建数据库
- elasticearch 安装
- 关于python安装scipy模块的问题
- [CF600E]Dsu on tree
- tensorflow2 搭建LeNet5训练MINST手写数字数据集并用c++ opencv4.5.5 DNN加载模型预测结果
- Java第二十七篇：二维数组打印九九乘法表（三角形、矩形、菱形）
- (一）Multisim安装与入门
- 零基础入门STM32编程——工具篇（四）
- 工厂模式(包含3种工厂)
- 计算机数据管理应用,浅析计算机数据库管理系统的应用.pdf
- ubuntu 18.04 安装NFS 共享文件夹,Linux挂载，Mac 挂载
- 2020NPDP产品经理认证考试备考心得-郑沂
- SQL实现筛选出连续3天登录用户与窗口函数
- 企业服务总线--MuleESB简介
- Java停车场车辆管理系统车位