关于『进击的Markdown』:第三弹

建议缩放90%食用

我与神明画押，赌这弹markdown又双叒叕拖稿了
%%%Markdown!我的CSDN编辑器崩了呜呜呜

各路英雄豪杰，大家好！

我们要开始Markdown的学习了呢

Markdown 语法真香
(疯狂安利)

( 进击吧！Markdown！)

Markdown进阶系列向你开炮，请注意接收

时间就是性命，无端的空耗别人的时间，其实是无异于谋财害命的

那我们就不废话了

又叒要为大家带来 (正当时的) Markdown了呢~

不过像我们这样坐着乘风凉，谈闲天的人们，可又是例外

那正文就开始了

注：编者用的CSDN-markdown编辑器是其衍生版本，扩展了Markdown的功能，所以有些写法浏览器不支持，请见谅（CSDN编辑器它崩了呜呜呜）

声明：因为我的编辑器崩了，呜呜呜见谅呜呜呜）

UML图:序列图语法（上）

UML是一个通用的标准建模语言
UML图，包括用例图、类图、对象图、状态图、活动图、顺序图、协作图、构件图、部署图9种，包图、组合结构图、交互概览图3种
详见 -> UML图
序列图是一种交互图，它显示了进程如何相互操作以及以何种顺序运行

一.句法

(一). 参与者

参与者可以像第一个示例中那样隐式定义
参与者按在图表源文本中出现的顺序呈现
若希望以不同于他们在第一条消息中出现的顺序显示参与者。可以通过执行一些操作来指定演员的出现顺序，见第二个示例

代码(第一个示例)：

```mermaid

sequenceDiagram

罗翔–>>102: 人心隐藏着整个世界的败坏，我们每个人心中都藏着一个张三

罗翔–>>102: 其实大家会发现，读书是一个悖论

102->>罗翔: 。。。

罗翔–>>102:人是无价之宝，人永远高于动物

```

效果：

#mermaid-svg-9BpC2JLIeXz8FgiH .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .label text{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .node rect,#mermaid-svg-9BpC2JLIeXz8FgiH .node circle,#mermaid-svg-9BpC2JLIeXz8FgiH .node ellipse,#mermaid-svg-9BpC2JLIeXz8FgiH .node polygon,#mermaid-svg-9BpC2JLIeXz8FgiH .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-9BpC2JLIeXz8FgiH .node .label{text-align:center;fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .node.clickable{cursor:pointer}#mermaid-svg-9BpC2JLIeXz8FgiH .arrowheadPath{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-9BpC2JLIeXz8FgiH .flowchart-link{stroke:#333;fill:none}#mermaid-svg-9BpC2JLIeXz8FgiH .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-9BpC2JLIeXz8FgiH .edgeLabel rect{opacity:0.9}#mermaid-svg-9BpC2JLIeXz8FgiH .edgeLabel span{color:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-9BpC2JLIeXz8FgiH .cluster text{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-9BpC2JLIeXz8FgiH .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-9BpC2JLIeXz8FgiH text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-9BpC2JLIeXz8FgiH .actor-line{stroke:grey}#mermaid-svg-9BpC2JLIeXz8FgiH .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-9BpC2JLIeXz8FgiH #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .sequenceNumber{fill:#fff}#mermaid-svg-9BpC2JLIeXz8FgiH #sequencenumber{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH #crosshead path{fill:#333;stroke:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .messageText{fill:#333;stroke:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-9BpC2JLIeXz8FgiH .labelText,#mermaid-svg-9BpC2JLIeXz8FgiH .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-9BpC2JLIeXz8FgiH .loopText,#mermaid-svg-9BpC2JLIeXz8FgiH .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-9BpC2JLIeXz8FgiH .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-9BpC2JLIeXz8FgiH .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-9BpC2JLIeXz8FgiH .noteText,#mermaid-svg-9BpC2JLIeXz8FgiH .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-9BpC2JLIeXz8FgiH .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-9BpC2JLIeXz8FgiH .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-9BpC2JLIeXz8FgiH .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-9BpC2JLIeXz8FgiH .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH .section{stroke:none;opacity:0.2}#mermaid-svg-9BpC2JLIeXz8FgiH .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-9BpC2JLIeXz8FgiH .section2{fill:#fff400}#mermaid-svg-9BpC2JLIeXz8FgiH .section1,#mermaid-svg-9BpC2JLIeXz8FgiH .section3{fill:#fff;opacity:0.2}#mermaid-svg-9BpC2JLIeXz8FgiH .sectionTitle0{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .sectionTitle1{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .sectionTitle2{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .sectionTitle3{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-9BpC2JLIeXz8FgiH .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH .grid path{stroke-width:0}#mermaid-svg-9BpC2JLIeXz8FgiH .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-9BpC2JLIeXz8FgiH .task{stroke-width:2}#mermaid-svg-9BpC2JLIeXz8FgiH .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH .taskText:not([font-size]){font-size:11px}#mermaid-svg-9BpC2JLIeXz8FgiH .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-9BpC2JLIeXz8FgiH .task.clickable{cursor:pointer}#mermaid-svg-9BpC2JLIeXz8FgiH .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-9BpC2JLIeXz8FgiH .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-9BpC2JLIeXz8FgiH .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-9BpC2JLIeXz8FgiH .taskText0,#mermaid-svg-9BpC2JLIeXz8FgiH .taskText1,#mermaid-svg-9BpC2JLIeXz8FgiH .taskText2,#mermaid-svg-9BpC2JLIeXz8FgiH .taskText3{fill:#fff}#mermaid-svg-9BpC2JLIeXz8FgiH .task0,#mermaid-svg-9BpC2JLIeXz8FgiH .task1,#mermaid-svg-9BpC2JLIeXz8FgiH .task2,#mermaid-svg-9BpC2JLIeXz8FgiH .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-9BpC2JLIeXz8FgiH .taskTextOutside0,#mermaid-svg-9BpC2JLIeXz8FgiH .taskTextOutside2{fill:#000}#mermaid-svg-9BpC2JLIeXz8FgiH .taskTextOutside1,#mermaid-svg-9BpC2JLIeXz8FgiH .taskTextOutside3{fill:#000}#mermaid-svg-9BpC2JLIeXz8FgiH .active0,#mermaid-svg-9BpC2JLIeXz8FgiH .active1,#mermaid-svg-9BpC2JLIeXz8FgiH .active2,#mermaid-svg-9BpC2JLIeXz8FgiH .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-9BpC2JLIeXz8FgiH .activeText0,#mermaid-svg-9BpC2JLIeXz8FgiH .activeText1,#mermaid-svg-9BpC2JLIeXz8FgiH .activeText2,#mermaid-svg-9BpC2JLIeXz8FgiH .activeText3{fill:#000 !important}#mermaid-svg-9BpC2JLIeXz8FgiH .done0,#mermaid-svg-9BpC2JLIeXz8FgiH .done1,#mermaid-svg-9BpC2JLIeXz8FgiH .done2,#mermaid-svg-9BpC2JLIeXz8FgiH .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-9BpC2JLIeXz8FgiH .doneText0,#mermaid-svg-9BpC2JLIeXz8FgiH .doneText1,#mermaid-svg-9BpC2JLIeXz8FgiH .doneText2,#mermaid-svg-9BpC2JLIeXz8FgiH .doneText3{fill:#000 !important}#mermaid-svg-9BpC2JLIeXz8FgiH .crit0,#mermaid-svg-9BpC2JLIeXz8FgiH .crit1,#mermaid-svg-9BpC2JLIeXz8FgiH .crit2,#mermaid-svg-9BpC2JLIeXz8FgiH .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-9BpC2JLIeXz8FgiH .activeCrit0,#mermaid-svg-9BpC2JLIeXz8FgiH .activeCrit1,#mermaid-svg-9BpC2JLIeXz8FgiH .activeCrit2,#mermaid-svg-9BpC2JLIeXz8FgiH .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-9BpC2JLIeXz8FgiH .doneCrit0,#mermaid-svg-9BpC2JLIeXz8FgiH .doneCrit1,#mermaid-svg-9BpC2JLIeXz8FgiH .doneCrit2,#mermaid-svg-9BpC2JLIeXz8FgiH .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-9BpC2JLIeXz8FgiH .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-9BpC2JLIeXz8FgiH .milestoneText{font-style:italic}#mermaid-svg-9BpC2JLIeXz8FgiH .doneCritText0,#mermaid-svg-9BpC2JLIeXz8FgiH .doneCritText1,#mermaid-svg-9BpC2JLIeXz8FgiH .doneCritText2,#mermaid-svg-9BpC2JLIeXz8FgiH .doneCritText3{fill:#000 !important}#mermaid-svg-9BpC2JLIeXz8FgiH .activeCritText0,#mermaid-svg-9BpC2JLIeXz8FgiH .activeCritText1,#mermaid-svg-9BpC2JLIeXz8FgiH .activeCritText2,#mermaid-svg-9BpC2JLIeXz8FgiH .activeCritText3{fill:#000 !important}#mermaid-svg-9BpC2JLIeXz8FgiH .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-9BpC2JLIeXz8FgiH g.classGroup text .title{font-weight:bolder}#mermaid-svg-9BpC2JLIeXz8FgiH g.clickable{cursor:pointer}#mermaid-svg-9BpC2JLIeXz8FgiH g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-9BpC2JLIeXz8FgiH g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-9BpC2JLIeXz8FgiH .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-9BpC2JLIeXz8FgiH .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-9BpC2JLIeXz8FgiH .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-9BpC2JLIeXz8FgiH .dashed-line{stroke-dasharray:3}#mermaid-svg-9BpC2JLIeXz8FgiH #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9BpC2JLIeXz8FgiH #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9BpC2JLIeXz8FgiH #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-9BpC2JLIeXz8FgiH #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-9BpC2JLIeXz8FgiH #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9BpC2JLIeXz8FgiH #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9BpC2JLIeXz8FgiH #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9BpC2JLIeXz8FgiH #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9BpC2JLIeXz8FgiH .commit-id,#mermaid-svg-9BpC2JLIeXz8FgiH .commit-msg,#mermaid-svg-9BpC2JLIeXz8FgiH .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-9BpC2JLIeXz8FgiH g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-9BpC2JLIeXz8FgiH g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-9BpC2JLIeXz8FgiH g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-9BpC2JLIeXz8FgiH .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-9BpC2JLIeXz8FgiH .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-9BpC2JLIeXz8FgiH .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-9BpC2JLIeXz8FgiH .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-9BpC2JLIeXz8FgiH .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-9BpC2JLIeXz8FgiH .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-9BpC2JLIeXz8FgiH .edgeLabel text{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9BpC2JLIeXz8FgiH .node circle.state-start{fill:black;stroke:black}#mermaid-svg-9BpC2JLIeXz8FgiH .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-9BpC2JLIeXz8FgiH #statediagram-barbEnd{fill:#9370db}#mermaid-svg-9BpC2JLIeXz8FgiH .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-9BpC2JLIeXz8FgiH .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-9BpC2JLIeXz8FgiH .statediagram-state .divider{stroke:#9370db}#mermaid-svg-9BpC2JLIeXz8FgiH .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-9BpC2JLIeXz8FgiH .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-9BpC2JLIeXz8FgiH .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-9BpC2JLIeXz8FgiH .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-9BpC2JLIeXz8FgiH .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-9BpC2JLIeXz8FgiH .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-9BpC2JLIeXz8FgiH .note-edge{stroke-dasharray:5}#mermaid-svg-9BpC2JLIeXz8FgiH .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-9BpC2JLIeXz8FgiH .error-icon{fill:#522}#mermaid-svg-9BpC2JLIeXz8FgiH .error-text{fill:#522;stroke:#522}#mermaid-svg-9BpC2JLIeXz8FgiH .edge-thickness-normal{stroke-width:2px}#mermaid-svg-9BpC2JLIeXz8FgiH .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-9BpC2JLIeXz8FgiH .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-9BpC2JLIeXz8FgiH .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-9BpC2JLIeXz8FgiH .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-9BpC2JLIeXz8FgiH .marker{fill:#333}#mermaid-svg-9BpC2JLIeXz8FgiH .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-9BpC2JLIeXz8FgiH {
color: rgba(0, 0, 0, 0.75);
font: ;
}

102

罗翔

人心隐藏着整个世界的败坏，我们每个人心中都藏着一个张三

其实大家会发现，读书是一个悖论

。。。

人是无价之宝，人永远高于动物

102

罗翔

代码(第二个示例)：

```mermaid

sequenceDiagram

participant Mary

participant Lily

Mary->>Lily: Hello,girl!

Lily–>>Mary:Hi!

Mary->>Lily: How are you today？

Lily–>>Mary: I’m fine.Thanks.

```

效果：

#mermaid-svg-NdSW9qlXpdqLdIZ8 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .label text{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .node rect,#mermaid-svg-NdSW9qlXpdqLdIZ8 .node circle,#mermaid-svg-NdSW9qlXpdqLdIZ8 .node ellipse,#mermaid-svg-NdSW9qlXpdqLdIZ8 .node polygon,#mermaid-svg-NdSW9qlXpdqLdIZ8 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .node .label{text-align:center;fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .node.clickable{cursor:pointer}#mermaid-svg-NdSW9qlXpdqLdIZ8 .arrowheadPath{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .flowchart-link{stroke:#333;fill:none}#mermaid-svg-NdSW9qlXpdqLdIZ8 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-NdSW9qlXpdqLdIZ8 .edgeLabel rect{opacity:0.9}#mermaid-svg-NdSW9qlXpdqLdIZ8 .edgeLabel span{color:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .cluster text{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-NdSW9qlXpdqLdIZ8 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-NdSW9qlXpdqLdIZ8 text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-NdSW9qlXpdqLdIZ8 .actor-line{stroke:grey}#mermaid-svg-NdSW9qlXpdqLdIZ8 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .sequenceNumber{fill:#fff}#mermaid-svg-NdSW9qlXpdqLdIZ8 #sequencenumber{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 #crosshead path{fill:#333;stroke:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .messageText{fill:#333;stroke:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-NdSW9qlXpdqLdIZ8 .labelText,#mermaid-svg-NdSW9qlXpdqLdIZ8 .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-NdSW9qlXpdqLdIZ8 .loopText,#mermaid-svg-NdSW9qlXpdqLdIZ8 .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-NdSW9qlXpdqLdIZ8 .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-NdSW9qlXpdqLdIZ8 .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-NdSW9qlXpdqLdIZ8 .noteText,#mermaid-svg-NdSW9qlXpdqLdIZ8 .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-NdSW9qlXpdqLdIZ8 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-NdSW9qlXpdqLdIZ8 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-NdSW9qlXpdqLdIZ8 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-NdSW9qlXpdqLdIZ8 .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 .section{stroke:none;opacity:0.2}#mermaid-svg-NdSW9qlXpdqLdIZ8 .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-NdSW9qlXpdqLdIZ8 .section2{fill:#fff400}#mermaid-svg-NdSW9qlXpdqLdIZ8 .section1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .section3{fill:#fff;opacity:0.2}#mermaid-svg-NdSW9qlXpdqLdIZ8 .sectionTitle0{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .sectionTitle1{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .sectionTitle2{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .sectionTitle3{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-NdSW9qlXpdqLdIZ8 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 .grid path{stroke-width:0}#mermaid-svg-NdSW9qlXpdqLdIZ8 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .task{stroke-width:2}#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskText:not([font-size]){font-size:11px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .task.clickable{cursor:pointer}#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskText0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskText1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskText2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskText3{fill:#fff}#mermaid-svg-NdSW9qlXpdqLdIZ8 .task0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .task1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .task2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskTextOutside0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskTextOutside2{fill:#000}#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskTextOutside1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .taskTextOutside3{fill:#000}#mermaid-svg-NdSW9qlXpdqLdIZ8 .active0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .active1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .active2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeText0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeText1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeText2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeText3{fill:#000 !important}#mermaid-svg-NdSW9qlXpdqLdIZ8 .done0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .done1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .done2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneText0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneText1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneText2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneText3{fill:#000 !important}#mermaid-svg-NdSW9qlXpdqLdIZ8 .crit0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .crit1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .crit2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeCrit0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeCrit1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeCrit2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneCrit0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneCrit1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneCrit2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-NdSW9qlXpdqLdIZ8 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-NdSW9qlXpdqLdIZ8 .milestoneText{font-style:italic}#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneCritText0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneCritText1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneCritText2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .doneCritText3{fill:#000 !important}#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeCritText0,#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeCritText1,#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeCritText2,#mermaid-svg-NdSW9qlXpdqLdIZ8 .activeCritText3{fill:#000 !important}#mermaid-svg-NdSW9qlXpdqLdIZ8 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.classGroup text .title{font-weight:bolder}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.clickable{cursor:pointer}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-NdSW9qlXpdqLdIZ8 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-NdSW9qlXpdqLdIZ8 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-NdSW9qlXpdqLdIZ8 .dashed-line{stroke-dasharray:3}#mermaid-svg-NdSW9qlXpdqLdIZ8 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-NdSW9qlXpdqLdIZ8 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-NdSW9qlXpdqLdIZ8 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-NdSW9qlXpdqLdIZ8 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-NdSW9qlXpdqLdIZ8 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-NdSW9qlXpdqLdIZ8 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-NdSW9qlXpdqLdIZ8 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-NdSW9qlXpdqLdIZ8 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-NdSW9qlXpdqLdIZ8 .commit-id,#mermaid-svg-NdSW9qlXpdqLdIZ8 .commit-msg,#mermaid-svg-NdSW9qlXpdqLdIZ8 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-NdSW9qlXpdqLdIZ8 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-NdSW9qlXpdqLdIZ8 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-NdSW9qlXpdqLdIZ8 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-NdSW9qlXpdqLdIZ8 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-NdSW9qlXpdqLdIZ8 .edgeLabel text{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-NdSW9qlXpdqLdIZ8 .node circle.state-start{fill:black;stroke:black}#mermaid-svg-NdSW9qlXpdqLdIZ8 .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-NdSW9qlXpdqLdIZ8 #statediagram-barbEnd{fill:#9370db}#mermaid-svg-NdSW9qlXpdqLdIZ8 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .statediagram-state .divider{stroke:#9370db}#mermaid-svg-NdSW9qlXpdqLdIZ8 .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-NdSW9qlXpdqLdIZ8 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-NdSW9qlXpdqLdIZ8 .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-NdSW9qlXpdqLdIZ8 .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-NdSW9qlXpdqLdIZ8 .note-edge{stroke-dasharray:5}#mermaid-svg-NdSW9qlXpdqLdIZ8 .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-NdSW9qlXpdqLdIZ8 .error-icon{fill:#522}#mermaid-svg-NdSW9qlXpdqLdIZ8 .error-text{fill:#522;stroke:#522}#mermaid-svg-NdSW9qlXpdqLdIZ8 .edge-thickness-normal{stroke-width:2px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-NdSW9qlXpdqLdIZ8 .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-NdSW9qlXpdqLdIZ8 .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-NdSW9qlXpdqLdIZ8 .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-NdSW9qlXpdqLdIZ8 .marker{fill:#333}#mermaid-svg-NdSW9qlXpdqLdIZ8 .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-NdSW9qlXpdqLdIZ8 {
color: rgba(0, 0, 0, 0.75);
font: ;
}

Mary

Lily

Hello,girl!

Hi!

How are you today？

I'm fine.Thanks.

Mary

Lily

(二). 别名

参与者可以有一个方便的标识符和一个描述性标签。

代码：

```mermaid

sequenceDiagram

participant A as Alice

participant J as John

A->>J: Hello John, how are you?

J->>A: Great!

```

效果：

#mermaid-svg-q1u7XFP7oZhVKLsa .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .label text{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .node rect,#mermaid-svg-q1u7XFP7oZhVKLsa .node circle,#mermaid-svg-q1u7XFP7oZhVKLsa .node ellipse,#mermaid-svg-q1u7XFP7oZhVKLsa .node polygon,#mermaid-svg-q1u7XFP7oZhVKLsa .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-q1u7XFP7oZhVKLsa .node .label{text-align:center;fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .node.clickable{cursor:pointer}#mermaid-svg-q1u7XFP7oZhVKLsa .arrowheadPath{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-q1u7XFP7oZhVKLsa .flowchart-link{stroke:#333;fill:none}#mermaid-svg-q1u7XFP7oZhVKLsa .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-q1u7XFP7oZhVKLsa .edgeLabel rect{opacity:0.9}#mermaid-svg-q1u7XFP7oZhVKLsa .edgeLabel span{color:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-q1u7XFP7oZhVKLsa .cluster text{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-q1u7XFP7oZhVKLsa .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-q1u7XFP7oZhVKLsa text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-q1u7XFP7oZhVKLsa .actor-line{stroke:grey}#mermaid-svg-q1u7XFP7oZhVKLsa .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-q1u7XFP7oZhVKLsa #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .sequenceNumber{fill:#fff}#mermaid-svg-q1u7XFP7oZhVKLsa #sequencenumber{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa #crosshead path{fill:#333;stroke:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .messageText{fill:#333;stroke:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-q1u7XFP7oZhVKLsa .labelText,#mermaid-svg-q1u7XFP7oZhVKLsa .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-q1u7XFP7oZhVKLsa .loopText,#mermaid-svg-q1u7XFP7oZhVKLsa .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-q1u7XFP7oZhVKLsa .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-q1u7XFP7oZhVKLsa .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-q1u7XFP7oZhVKLsa .noteText,#mermaid-svg-q1u7XFP7oZhVKLsa .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-q1u7XFP7oZhVKLsa .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-q1u7XFP7oZhVKLsa .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-q1u7XFP7oZhVKLsa .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-q1u7XFP7oZhVKLsa .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa .section{stroke:none;opacity:0.2}#mermaid-svg-q1u7XFP7oZhVKLsa .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-q1u7XFP7oZhVKLsa .section2{fill:#fff400}#mermaid-svg-q1u7XFP7oZhVKLsa .section1,#mermaid-svg-q1u7XFP7oZhVKLsa .section3{fill:#fff;opacity:0.2}#mermaid-svg-q1u7XFP7oZhVKLsa .sectionTitle0{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .sectionTitle1{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .sectionTitle2{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .sectionTitle3{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-q1u7XFP7oZhVKLsa .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa .grid path{stroke-width:0}#mermaid-svg-q1u7XFP7oZhVKLsa .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-q1u7XFP7oZhVKLsa .task{stroke-width:2}#mermaid-svg-q1u7XFP7oZhVKLsa .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa .taskText:not([font-size]){font-size:11px}#mermaid-svg-q1u7XFP7oZhVKLsa .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-q1u7XFP7oZhVKLsa .task.clickable{cursor:pointer}#mermaid-svg-q1u7XFP7oZhVKLsa .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-q1u7XFP7oZhVKLsa .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-q1u7XFP7oZhVKLsa .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-q1u7XFP7oZhVKLsa .taskText0,#mermaid-svg-q1u7XFP7oZhVKLsa .taskText1,#mermaid-svg-q1u7XFP7oZhVKLsa .taskText2,#mermaid-svg-q1u7XFP7oZhVKLsa .taskText3{fill:#fff}#mermaid-svg-q1u7XFP7oZhVKLsa .task0,#mermaid-svg-q1u7XFP7oZhVKLsa .task1,#mermaid-svg-q1u7XFP7oZhVKLsa .task2,#mermaid-svg-q1u7XFP7oZhVKLsa .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-q1u7XFP7oZhVKLsa .taskTextOutside0,#mermaid-svg-q1u7XFP7oZhVKLsa .taskTextOutside2{fill:#000}#mermaid-svg-q1u7XFP7oZhVKLsa .taskTextOutside1,#mermaid-svg-q1u7XFP7oZhVKLsa .taskTextOutside3{fill:#000}#mermaid-svg-q1u7XFP7oZhVKLsa .active0,#mermaid-svg-q1u7XFP7oZhVKLsa .active1,#mermaid-svg-q1u7XFP7oZhVKLsa .active2,#mermaid-svg-q1u7XFP7oZhVKLsa .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-q1u7XFP7oZhVKLsa .activeText0,#mermaid-svg-q1u7XFP7oZhVKLsa .activeText1,#mermaid-svg-q1u7XFP7oZhVKLsa .activeText2,#mermaid-svg-q1u7XFP7oZhVKLsa .activeText3{fill:#000 !important}#mermaid-svg-q1u7XFP7oZhVKLsa .done0,#mermaid-svg-q1u7XFP7oZhVKLsa .done1,#mermaid-svg-q1u7XFP7oZhVKLsa .done2,#mermaid-svg-q1u7XFP7oZhVKLsa .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-q1u7XFP7oZhVKLsa .doneText0,#mermaid-svg-q1u7XFP7oZhVKLsa .doneText1,#mermaid-svg-q1u7XFP7oZhVKLsa .doneText2,#mermaid-svg-q1u7XFP7oZhVKLsa .doneText3{fill:#000 !important}#mermaid-svg-q1u7XFP7oZhVKLsa .crit0,#mermaid-svg-q1u7XFP7oZhVKLsa .crit1,#mermaid-svg-q1u7XFP7oZhVKLsa .crit2,#mermaid-svg-q1u7XFP7oZhVKLsa .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-q1u7XFP7oZhVKLsa .activeCrit0,#mermaid-svg-q1u7XFP7oZhVKLsa .activeCrit1,#mermaid-svg-q1u7XFP7oZhVKLsa .activeCrit2,#mermaid-svg-q1u7XFP7oZhVKLsa .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-q1u7XFP7oZhVKLsa .doneCrit0,#mermaid-svg-q1u7XFP7oZhVKLsa .doneCrit1,#mermaid-svg-q1u7XFP7oZhVKLsa .doneCrit2,#mermaid-svg-q1u7XFP7oZhVKLsa .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-q1u7XFP7oZhVKLsa .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-q1u7XFP7oZhVKLsa .milestoneText{font-style:italic}#mermaid-svg-q1u7XFP7oZhVKLsa .doneCritText0,#mermaid-svg-q1u7XFP7oZhVKLsa .doneCritText1,#mermaid-svg-q1u7XFP7oZhVKLsa .doneCritText2,#mermaid-svg-q1u7XFP7oZhVKLsa .doneCritText3{fill:#000 !important}#mermaid-svg-q1u7XFP7oZhVKLsa .activeCritText0,#mermaid-svg-q1u7XFP7oZhVKLsa .activeCritText1,#mermaid-svg-q1u7XFP7oZhVKLsa .activeCritText2,#mermaid-svg-q1u7XFP7oZhVKLsa .activeCritText3{fill:#000 !important}#mermaid-svg-q1u7XFP7oZhVKLsa .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-q1u7XFP7oZhVKLsa g.classGroup text .title{font-weight:bolder}#mermaid-svg-q1u7XFP7oZhVKLsa g.clickable{cursor:pointer}#mermaid-svg-q1u7XFP7oZhVKLsa g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-q1u7XFP7oZhVKLsa g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-q1u7XFP7oZhVKLsa .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-q1u7XFP7oZhVKLsa .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-q1u7XFP7oZhVKLsa .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-q1u7XFP7oZhVKLsa .dashed-line{stroke-dasharray:3}#mermaid-svg-q1u7XFP7oZhVKLsa #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1u7XFP7oZhVKLsa #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1u7XFP7oZhVKLsa #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-q1u7XFP7oZhVKLsa #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-q1u7XFP7oZhVKLsa #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1u7XFP7oZhVKLsa #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1u7XFP7oZhVKLsa #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1u7XFP7oZhVKLsa #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1u7XFP7oZhVKLsa .commit-id,#mermaid-svg-q1u7XFP7oZhVKLsa .commit-msg,#mermaid-svg-q1u7XFP7oZhVKLsa .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-q1u7XFP7oZhVKLsa g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-q1u7XFP7oZhVKLsa g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-q1u7XFP7oZhVKLsa g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-q1u7XFP7oZhVKLsa .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-q1u7XFP7oZhVKLsa .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-q1u7XFP7oZhVKLsa .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-q1u7XFP7oZhVKLsa .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-q1u7XFP7oZhVKLsa .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-q1u7XFP7oZhVKLsa .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-q1u7XFP7oZhVKLsa .edgeLabel text{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1u7XFP7oZhVKLsa .node circle.state-start{fill:black;stroke:black}#mermaid-svg-q1u7XFP7oZhVKLsa .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-q1u7XFP7oZhVKLsa #statediagram-barbEnd{fill:#9370db}#mermaid-svg-q1u7XFP7oZhVKLsa .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-q1u7XFP7oZhVKLsa .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-q1u7XFP7oZhVKLsa .statediagram-state .divider{stroke:#9370db}#mermaid-svg-q1u7XFP7oZhVKLsa .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-q1u7XFP7oZhVKLsa .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-q1u7XFP7oZhVKLsa .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-q1u7XFP7oZhVKLsa .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-q1u7XFP7oZhVKLsa .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-q1u7XFP7oZhVKLsa .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-q1u7XFP7oZhVKLsa .note-edge{stroke-dasharray:5}#mermaid-svg-q1u7XFP7oZhVKLsa .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-q1u7XFP7oZhVKLsa .error-icon{fill:#522}#mermaid-svg-q1u7XFP7oZhVKLsa .error-text{fill:#522;stroke:#522}#mermaid-svg-q1u7XFP7oZhVKLsa .edge-thickness-normal{stroke-width:2px}#mermaid-svg-q1u7XFP7oZhVKLsa .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-q1u7XFP7oZhVKLsa .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-q1u7XFP7oZhVKLsa .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-q1u7XFP7oZhVKLsa .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-q1u7XFP7oZhVKLsa .marker{fill:#333}#mermaid-svg-q1u7XFP7oZhVKLsa .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-q1u7XFP7oZhVKLsa {
color: rgba(0, 0, 0, 0.75);
font: ;
}

Alice

John

Hello John, how are you?

Great!

Alice

John

二. 留言

消息可以显示两条实线或虚线

类型	说明
->	没有箭头的实线
–>	没有箭头的虚线
->>	带箭头的实线
–>>	带箭头的虚线
-X	实线末尾有一个十字
–x	末端带有十字的虚线
-)	实线末尾有一个开放箭头（异步）
–)	末尾带有开放箭头的虚线（异步）

三. 激活

可以激活和停用参与者
(de)activation 是专用声明

代码：

```mermaid

sequenceDiagram

Alice->>John: Hello John, how are you?

activate John

John–>>Alice: Great!

deactivate John

```

效果：

#mermaid-svg-eq8OKYCHvqx7bR9G .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .label text{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .node rect,#mermaid-svg-eq8OKYCHvqx7bR9G .node circle,#mermaid-svg-eq8OKYCHvqx7bR9G .node ellipse,#mermaid-svg-eq8OKYCHvqx7bR9G .node polygon,#mermaid-svg-eq8OKYCHvqx7bR9G .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-eq8OKYCHvqx7bR9G .node .label{text-align:center;fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .node.clickable{cursor:pointer}#mermaid-svg-eq8OKYCHvqx7bR9G .arrowheadPath{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-eq8OKYCHvqx7bR9G .flowchart-link{stroke:#333;fill:none}#mermaid-svg-eq8OKYCHvqx7bR9G .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-eq8OKYCHvqx7bR9G .edgeLabel rect{opacity:0.9}#mermaid-svg-eq8OKYCHvqx7bR9G .edgeLabel span{color:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-eq8OKYCHvqx7bR9G .cluster text{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-eq8OKYCHvqx7bR9G .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-eq8OKYCHvqx7bR9G text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-eq8OKYCHvqx7bR9G .actor-line{stroke:grey}#mermaid-svg-eq8OKYCHvqx7bR9G .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-eq8OKYCHvqx7bR9G #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .sequenceNumber{fill:#fff}#mermaid-svg-eq8OKYCHvqx7bR9G #sequencenumber{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G #crosshead path{fill:#333;stroke:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .messageText{fill:#333;stroke:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-eq8OKYCHvqx7bR9G .labelText,#mermaid-svg-eq8OKYCHvqx7bR9G .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-eq8OKYCHvqx7bR9G .loopText,#mermaid-svg-eq8OKYCHvqx7bR9G .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-eq8OKYCHvqx7bR9G .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-eq8OKYCHvqx7bR9G .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-eq8OKYCHvqx7bR9G .noteText,#mermaid-svg-eq8OKYCHvqx7bR9G .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-eq8OKYCHvqx7bR9G .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-eq8OKYCHvqx7bR9G .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-eq8OKYCHvqx7bR9G .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-eq8OKYCHvqx7bR9G .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G .section{stroke:none;opacity:0.2}#mermaid-svg-eq8OKYCHvqx7bR9G .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-eq8OKYCHvqx7bR9G .section2{fill:#fff400}#mermaid-svg-eq8OKYCHvqx7bR9G .section1,#mermaid-svg-eq8OKYCHvqx7bR9G .section3{fill:#fff;opacity:0.2}#mermaid-svg-eq8OKYCHvqx7bR9G .sectionTitle0{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .sectionTitle1{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .sectionTitle2{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .sectionTitle3{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-eq8OKYCHvqx7bR9G .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G .grid path{stroke-width:0}#mermaid-svg-eq8OKYCHvqx7bR9G .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-eq8OKYCHvqx7bR9G .task{stroke-width:2}#mermaid-svg-eq8OKYCHvqx7bR9G .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G .taskText:not([font-size]){font-size:11px}#mermaid-svg-eq8OKYCHvqx7bR9G .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-eq8OKYCHvqx7bR9G .task.clickable{cursor:pointer}#mermaid-svg-eq8OKYCHvqx7bR9G .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-eq8OKYCHvqx7bR9G .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-eq8OKYCHvqx7bR9G .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-eq8OKYCHvqx7bR9G .taskText0,#mermaid-svg-eq8OKYCHvqx7bR9G .taskText1,#mermaid-svg-eq8OKYCHvqx7bR9G .taskText2,#mermaid-svg-eq8OKYCHvqx7bR9G .taskText3{fill:#fff}#mermaid-svg-eq8OKYCHvqx7bR9G .task0,#mermaid-svg-eq8OKYCHvqx7bR9G .task1,#mermaid-svg-eq8OKYCHvqx7bR9G .task2,#mermaid-svg-eq8OKYCHvqx7bR9G .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-eq8OKYCHvqx7bR9G .taskTextOutside0,#mermaid-svg-eq8OKYCHvqx7bR9G .taskTextOutside2{fill:#000}#mermaid-svg-eq8OKYCHvqx7bR9G .taskTextOutside1,#mermaid-svg-eq8OKYCHvqx7bR9G .taskTextOutside3{fill:#000}#mermaid-svg-eq8OKYCHvqx7bR9G .active0,#mermaid-svg-eq8OKYCHvqx7bR9G .active1,#mermaid-svg-eq8OKYCHvqx7bR9G .active2,#mermaid-svg-eq8OKYCHvqx7bR9G .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-eq8OKYCHvqx7bR9G .activeText0,#mermaid-svg-eq8OKYCHvqx7bR9G .activeText1,#mermaid-svg-eq8OKYCHvqx7bR9G .activeText2,#mermaid-svg-eq8OKYCHvqx7bR9G .activeText3{fill:#000 !important}#mermaid-svg-eq8OKYCHvqx7bR9G .done0,#mermaid-svg-eq8OKYCHvqx7bR9G .done1,#mermaid-svg-eq8OKYCHvqx7bR9G .done2,#mermaid-svg-eq8OKYCHvqx7bR9G .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-eq8OKYCHvqx7bR9G .doneText0,#mermaid-svg-eq8OKYCHvqx7bR9G .doneText1,#mermaid-svg-eq8OKYCHvqx7bR9G .doneText2,#mermaid-svg-eq8OKYCHvqx7bR9G .doneText3{fill:#000 !important}#mermaid-svg-eq8OKYCHvqx7bR9G .crit0,#mermaid-svg-eq8OKYCHvqx7bR9G .crit1,#mermaid-svg-eq8OKYCHvqx7bR9G .crit2,#mermaid-svg-eq8OKYCHvqx7bR9G .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-eq8OKYCHvqx7bR9G .activeCrit0,#mermaid-svg-eq8OKYCHvqx7bR9G .activeCrit1,#mermaid-svg-eq8OKYCHvqx7bR9G .activeCrit2,#mermaid-svg-eq8OKYCHvqx7bR9G .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-eq8OKYCHvqx7bR9G .doneCrit0,#mermaid-svg-eq8OKYCHvqx7bR9G .doneCrit1,#mermaid-svg-eq8OKYCHvqx7bR9G .doneCrit2,#mermaid-svg-eq8OKYCHvqx7bR9G .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-eq8OKYCHvqx7bR9G .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-eq8OKYCHvqx7bR9G .milestoneText{font-style:italic}#mermaid-svg-eq8OKYCHvqx7bR9G .doneCritText0,#mermaid-svg-eq8OKYCHvqx7bR9G .doneCritText1,#mermaid-svg-eq8OKYCHvqx7bR9G .doneCritText2,#mermaid-svg-eq8OKYCHvqx7bR9G .doneCritText3{fill:#000 !important}#mermaid-svg-eq8OKYCHvqx7bR9G .activeCritText0,#mermaid-svg-eq8OKYCHvqx7bR9G .activeCritText1,#mermaid-svg-eq8OKYCHvqx7bR9G .activeCritText2,#mermaid-svg-eq8OKYCHvqx7bR9G .activeCritText3{fill:#000 !important}#mermaid-svg-eq8OKYCHvqx7bR9G .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-eq8OKYCHvqx7bR9G g.classGroup text .title{font-weight:bolder}#mermaid-svg-eq8OKYCHvqx7bR9G g.clickable{cursor:pointer}#mermaid-svg-eq8OKYCHvqx7bR9G g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-eq8OKYCHvqx7bR9G g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-eq8OKYCHvqx7bR9G .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-eq8OKYCHvqx7bR9G .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-eq8OKYCHvqx7bR9G .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-eq8OKYCHvqx7bR9G .dashed-line{stroke-dasharray:3}#mermaid-svg-eq8OKYCHvqx7bR9G #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-eq8OKYCHvqx7bR9G #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-eq8OKYCHvqx7bR9G #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-eq8OKYCHvqx7bR9G #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-eq8OKYCHvqx7bR9G #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-eq8OKYCHvqx7bR9G #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-eq8OKYCHvqx7bR9G #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-eq8OKYCHvqx7bR9G #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-eq8OKYCHvqx7bR9G .commit-id,#mermaid-svg-eq8OKYCHvqx7bR9G .commit-msg,#mermaid-svg-eq8OKYCHvqx7bR9G .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-eq8OKYCHvqx7bR9G g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-eq8OKYCHvqx7bR9G g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-eq8OKYCHvqx7bR9G g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-eq8OKYCHvqx7bR9G .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-eq8OKYCHvqx7bR9G .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-eq8OKYCHvqx7bR9G .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-eq8OKYCHvqx7bR9G .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-eq8OKYCHvqx7bR9G .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-eq8OKYCHvqx7bR9G .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-eq8OKYCHvqx7bR9G .edgeLabel text{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-eq8OKYCHvqx7bR9G .node circle.state-start{fill:black;stroke:black}#mermaid-svg-eq8OKYCHvqx7bR9G .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-eq8OKYCHvqx7bR9G #statediagram-barbEnd{fill:#9370db}#mermaid-svg-eq8OKYCHvqx7bR9G .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-eq8OKYCHvqx7bR9G .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-eq8OKYCHvqx7bR9G .statediagram-state .divider{stroke:#9370db}#mermaid-svg-eq8OKYCHvqx7bR9G .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-eq8OKYCHvqx7bR9G .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-eq8OKYCHvqx7bR9G .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-eq8OKYCHvqx7bR9G .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-eq8OKYCHvqx7bR9G .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-eq8OKYCHvqx7bR9G .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-eq8OKYCHvqx7bR9G .note-edge{stroke-dasharray:5}#mermaid-svg-eq8OKYCHvqx7bR9G .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-eq8OKYCHvqx7bR9G .error-icon{fill:#522}#mermaid-svg-eq8OKYCHvqx7bR9G .error-text{fill:#522;stroke:#522}#mermaid-svg-eq8OKYCHvqx7bR9G .edge-thickness-normal{stroke-width:2px}#mermaid-svg-eq8OKYCHvqx7bR9G .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-eq8OKYCHvqx7bR9G .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-eq8OKYCHvqx7bR9G .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-eq8OKYCHvqx7bR9G .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-eq8OKYCHvqx7bR9G .marker{fill:#333}#mermaid-svg-eq8OKYCHvqx7bR9G .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-eq8OKYCHvqx7bR9G {
color: rgba(0, 0, 0, 0.75);
font: ;
}

Alice

John

Hello John, how are you?

Great!

Alice

John

通过在消息箭头后附加 + / - 后缀，还有一个快捷表示法：

代码：

```mermaid

sequenceDiagram

Alice->>+John: Hello John, how are you?

John–>>-Alice: Great!

```

效果：

#mermaid-svg-yuaqSzH9DtxZejiC .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-yuaqSzH9DtxZejiC .label text{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC .node rect,#mermaid-svg-yuaqSzH9DtxZejiC .node circle,#mermaid-svg-yuaqSzH9DtxZejiC .node ellipse,#mermaid-svg-yuaqSzH9DtxZejiC .node polygon,#mermaid-svg-yuaqSzH9DtxZejiC .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-yuaqSzH9DtxZejiC .node .label{text-align:center;fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC .node.clickable{cursor:pointer}#mermaid-svg-yuaqSzH9DtxZejiC .arrowheadPath{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-yuaqSzH9DtxZejiC .flowchart-link{stroke:#333;fill:none}#mermaid-svg-yuaqSzH9DtxZejiC .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-yuaqSzH9DtxZejiC .edgeLabel rect{opacity:0.9}#mermaid-svg-yuaqSzH9DtxZejiC .edgeLabel span{color:#333}#mermaid-svg-yuaqSzH9DtxZejiC .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-yuaqSzH9DtxZejiC .cluster text{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-yuaqSzH9DtxZejiC .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-yuaqSzH9DtxZejiC text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-yuaqSzH9DtxZejiC .actor-line{stroke:grey}#mermaid-svg-yuaqSzH9DtxZejiC .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-yuaqSzH9DtxZejiC .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-yuaqSzH9DtxZejiC #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-yuaqSzH9DtxZejiC .sequenceNumber{fill:#fff}#mermaid-svg-yuaqSzH9DtxZejiC #sequencenumber{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC #crosshead path{fill:#333;stroke:#333}#mermaid-svg-yuaqSzH9DtxZejiC .messageText{fill:#333;stroke:#333}#mermaid-svg-yuaqSzH9DtxZejiC .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-yuaqSzH9DtxZejiC .labelText,#mermaid-svg-yuaqSzH9DtxZejiC .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-yuaqSzH9DtxZejiC .loopText,#mermaid-svg-yuaqSzH9DtxZejiC .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-yuaqSzH9DtxZejiC .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-yuaqSzH9DtxZejiC .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-yuaqSzH9DtxZejiC .noteText,#mermaid-svg-yuaqSzH9DtxZejiC .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-yuaqSzH9DtxZejiC .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-yuaqSzH9DtxZejiC .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-yuaqSzH9DtxZejiC .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-yuaqSzH9DtxZejiC .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC .section{stroke:none;opacity:0.2}#mermaid-svg-yuaqSzH9DtxZejiC .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-yuaqSzH9DtxZejiC .section2{fill:#fff400}#mermaid-svg-yuaqSzH9DtxZejiC .section1,#mermaid-svg-yuaqSzH9DtxZejiC .section3{fill:#fff;opacity:0.2}#mermaid-svg-yuaqSzH9DtxZejiC .sectionTitle0{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC .sectionTitle1{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC .sectionTitle2{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC .sectionTitle3{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-yuaqSzH9DtxZejiC .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC .grid path{stroke-width:0}#mermaid-svg-yuaqSzH9DtxZejiC .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-yuaqSzH9DtxZejiC .task{stroke-width:2}#mermaid-svg-yuaqSzH9DtxZejiC .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC .taskText:not([font-size]){font-size:11px}#mermaid-svg-yuaqSzH9DtxZejiC .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-yuaqSzH9DtxZejiC .task.clickable{cursor:pointer}#mermaid-svg-yuaqSzH9DtxZejiC .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-yuaqSzH9DtxZejiC .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-yuaqSzH9DtxZejiC .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-yuaqSzH9DtxZejiC .taskText0,#mermaid-svg-yuaqSzH9DtxZejiC .taskText1,#mermaid-svg-yuaqSzH9DtxZejiC .taskText2,#mermaid-svg-yuaqSzH9DtxZejiC .taskText3{fill:#fff}#mermaid-svg-yuaqSzH9DtxZejiC .task0,#mermaid-svg-yuaqSzH9DtxZejiC .task1,#mermaid-svg-yuaqSzH9DtxZejiC .task2,#mermaid-svg-yuaqSzH9DtxZejiC .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-yuaqSzH9DtxZejiC .taskTextOutside0,#mermaid-svg-yuaqSzH9DtxZejiC .taskTextOutside2{fill:#000}#mermaid-svg-yuaqSzH9DtxZejiC .taskTextOutside1,#mermaid-svg-yuaqSzH9DtxZejiC .taskTextOutside3{fill:#000}#mermaid-svg-yuaqSzH9DtxZejiC .active0,#mermaid-svg-yuaqSzH9DtxZejiC .active1,#mermaid-svg-yuaqSzH9DtxZejiC .active2,#mermaid-svg-yuaqSzH9DtxZejiC .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-yuaqSzH9DtxZejiC .activeText0,#mermaid-svg-yuaqSzH9DtxZejiC .activeText1,#mermaid-svg-yuaqSzH9DtxZejiC .activeText2,#mermaid-svg-yuaqSzH9DtxZejiC .activeText3{fill:#000 !important}#mermaid-svg-yuaqSzH9DtxZejiC .done0,#mermaid-svg-yuaqSzH9DtxZejiC .done1,#mermaid-svg-yuaqSzH9DtxZejiC .done2,#mermaid-svg-yuaqSzH9DtxZejiC .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-yuaqSzH9DtxZejiC .doneText0,#mermaid-svg-yuaqSzH9DtxZejiC .doneText1,#mermaid-svg-yuaqSzH9DtxZejiC .doneText2,#mermaid-svg-yuaqSzH9DtxZejiC .doneText3{fill:#000 !important}#mermaid-svg-yuaqSzH9DtxZejiC .crit0,#mermaid-svg-yuaqSzH9DtxZejiC .crit1,#mermaid-svg-yuaqSzH9DtxZejiC .crit2,#mermaid-svg-yuaqSzH9DtxZejiC .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-yuaqSzH9DtxZejiC .activeCrit0,#mermaid-svg-yuaqSzH9DtxZejiC .activeCrit1,#mermaid-svg-yuaqSzH9DtxZejiC .activeCrit2,#mermaid-svg-yuaqSzH9DtxZejiC .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-yuaqSzH9DtxZejiC .doneCrit0,#mermaid-svg-yuaqSzH9DtxZejiC .doneCrit1,#mermaid-svg-yuaqSzH9DtxZejiC .doneCrit2,#mermaid-svg-yuaqSzH9DtxZejiC .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-yuaqSzH9DtxZejiC .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-yuaqSzH9DtxZejiC .milestoneText{font-style:italic}#mermaid-svg-yuaqSzH9DtxZejiC .doneCritText0,#mermaid-svg-yuaqSzH9DtxZejiC .doneCritText1,#mermaid-svg-yuaqSzH9DtxZejiC .doneCritText2,#mermaid-svg-yuaqSzH9DtxZejiC .doneCritText3{fill:#000 !important}#mermaid-svg-yuaqSzH9DtxZejiC .activeCritText0,#mermaid-svg-yuaqSzH9DtxZejiC .activeCritText1,#mermaid-svg-yuaqSzH9DtxZejiC .activeCritText2,#mermaid-svg-yuaqSzH9DtxZejiC .activeCritText3{fill:#000 !important}#mermaid-svg-yuaqSzH9DtxZejiC .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-yuaqSzH9DtxZejiC g.classGroup text .title{font-weight:bolder}#mermaid-svg-yuaqSzH9DtxZejiC g.clickable{cursor:pointer}#mermaid-svg-yuaqSzH9DtxZejiC g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-yuaqSzH9DtxZejiC g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-yuaqSzH9DtxZejiC .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-yuaqSzH9DtxZejiC .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-yuaqSzH9DtxZejiC .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-yuaqSzH9DtxZejiC .dashed-line{stroke-dasharray:3}#mermaid-svg-yuaqSzH9DtxZejiC #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yuaqSzH9DtxZejiC #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yuaqSzH9DtxZejiC #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-yuaqSzH9DtxZejiC #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-yuaqSzH9DtxZejiC #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yuaqSzH9DtxZejiC #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yuaqSzH9DtxZejiC #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yuaqSzH9DtxZejiC #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yuaqSzH9DtxZejiC .commit-id,#mermaid-svg-yuaqSzH9DtxZejiC .commit-msg,#mermaid-svg-yuaqSzH9DtxZejiC .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-yuaqSzH9DtxZejiC g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-yuaqSzH9DtxZejiC g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-yuaqSzH9DtxZejiC g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-yuaqSzH9DtxZejiC .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-yuaqSzH9DtxZejiC .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-yuaqSzH9DtxZejiC .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-yuaqSzH9DtxZejiC .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-yuaqSzH9DtxZejiC .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-yuaqSzH9DtxZejiC .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-yuaqSzH9DtxZejiC .edgeLabel text{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-yuaqSzH9DtxZejiC .node circle.state-start{fill:black;stroke:black}#mermaid-svg-yuaqSzH9DtxZejiC .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-yuaqSzH9DtxZejiC #statediagram-barbEnd{fill:#9370db}#mermaid-svg-yuaqSzH9DtxZejiC .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-yuaqSzH9DtxZejiC .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-yuaqSzH9DtxZejiC .statediagram-state .divider{stroke:#9370db}#mermaid-svg-yuaqSzH9DtxZejiC .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-yuaqSzH9DtxZejiC .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-yuaqSzH9DtxZejiC .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-yuaqSzH9DtxZejiC .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-yuaqSzH9DtxZejiC .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-yuaqSzH9DtxZejiC .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-yuaqSzH9DtxZejiC .note-edge{stroke-dasharray:5}#mermaid-svg-yuaqSzH9DtxZejiC .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-yuaqSzH9DtxZejiC .error-icon{fill:#522}#mermaid-svg-yuaqSzH9DtxZejiC .error-text{fill:#522;stroke:#522}#mermaid-svg-yuaqSzH9DtxZejiC .edge-thickness-normal{stroke-width:2px}#mermaid-svg-yuaqSzH9DtxZejiC .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-yuaqSzH9DtxZejiC .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-yuaqSzH9DtxZejiC .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-yuaqSzH9DtxZejiC .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-yuaqSzH9DtxZejiC .marker{fill:#333}#mermaid-svg-yuaqSzH9DtxZejiC .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-yuaqSzH9DtxZejiC {
color: rgba(0, 0, 0, 0.75);
font: ;
}

Alice

John

Hello John, how are you?

Great!

Alice

John

可以为同一参与者堆叠激活:
代码：

```mermaid

sequenceDiagram

Alice->>+John: Hello John, how are you?

Alice->>+John: John, can you hear me?

John–>>-Alice: Great!

John–>>-Alice: I feel great!

```

效果：

#mermaid-svg-rbFMxyurkmcZ0xJo .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .label text{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .node rect,#mermaid-svg-rbFMxyurkmcZ0xJo .node circle,#mermaid-svg-rbFMxyurkmcZ0xJo .node ellipse,#mermaid-svg-rbFMxyurkmcZ0xJo .node polygon,#mermaid-svg-rbFMxyurkmcZ0xJo .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-rbFMxyurkmcZ0xJo .node .label{text-align:center;fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .node.clickable{cursor:pointer}#mermaid-svg-rbFMxyurkmcZ0xJo .arrowheadPath{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-rbFMxyurkmcZ0xJo .flowchart-link{stroke:#333;fill:none}#mermaid-svg-rbFMxyurkmcZ0xJo .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-rbFMxyurkmcZ0xJo .edgeLabel rect{opacity:0.9}#mermaid-svg-rbFMxyurkmcZ0xJo .edgeLabel span{color:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-rbFMxyurkmcZ0xJo .cluster text{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-rbFMxyurkmcZ0xJo .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-rbFMxyurkmcZ0xJo text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-rbFMxyurkmcZ0xJo .actor-line{stroke:grey}#mermaid-svg-rbFMxyurkmcZ0xJo .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-rbFMxyurkmcZ0xJo #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .sequenceNumber{fill:#fff}#mermaid-svg-rbFMxyurkmcZ0xJo #sequencenumber{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo #crosshead path{fill:#333;stroke:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .messageText{fill:#333;stroke:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-rbFMxyurkmcZ0xJo .labelText,#mermaid-svg-rbFMxyurkmcZ0xJo .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-rbFMxyurkmcZ0xJo .loopText,#mermaid-svg-rbFMxyurkmcZ0xJo .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-rbFMxyurkmcZ0xJo .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-rbFMxyurkmcZ0xJo .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-rbFMxyurkmcZ0xJo .noteText,#mermaid-svg-rbFMxyurkmcZ0xJo .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-rbFMxyurkmcZ0xJo .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-rbFMxyurkmcZ0xJo .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-rbFMxyurkmcZ0xJo .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-rbFMxyurkmcZ0xJo .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo .section{stroke:none;opacity:0.2}#mermaid-svg-rbFMxyurkmcZ0xJo .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-rbFMxyurkmcZ0xJo .section2{fill:#fff400}#mermaid-svg-rbFMxyurkmcZ0xJo .section1,#mermaid-svg-rbFMxyurkmcZ0xJo .section3{fill:#fff;opacity:0.2}#mermaid-svg-rbFMxyurkmcZ0xJo .sectionTitle0{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .sectionTitle1{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .sectionTitle2{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .sectionTitle3{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-rbFMxyurkmcZ0xJo .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo .grid path{stroke-width:0}#mermaid-svg-rbFMxyurkmcZ0xJo .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-rbFMxyurkmcZ0xJo .task{stroke-width:2}#mermaid-svg-rbFMxyurkmcZ0xJo .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo .taskText:not([font-size]){font-size:11px}#mermaid-svg-rbFMxyurkmcZ0xJo .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-rbFMxyurkmcZ0xJo .task.clickable{cursor:pointer}#mermaid-svg-rbFMxyurkmcZ0xJo .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-rbFMxyurkmcZ0xJo .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-rbFMxyurkmcZ0xJo .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-rbFMxyurkmcZ0xJo .taskText0,#mermaid-svg-rbFMxyurkmcZ0xJo .taskText1,#mermaid-svg-rbFMxyurkmcZ0xJo .taskText2,#mermaid-svg-rbFMxyurkmcZ0xJo .taskText3{fill:#fff}#mermaid-svg-rbFMxyurkmcZ0xJo .task0,#mermaid-svg-rbFMxyurkmcZ0xJo .task1,#mermaid-svg-rbFMxyurkmcZ0xJo .task2,#mermaid-svg-rbFMxyurkmcZ0xJo .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-rbFMxyurkmcZ0xJo .taskTextOutside0,#mermaid-svg-rbFMxyurkmcZ0xJo .taskTextOutside2{fill:#000}#mermaid-svg-rbFMxyurkmcZ0xJo .taskTextOutside1,#mermaid-svg-rbFMxyurkmcZ0xJo .taskTextOutside3{fill:#000}#mermaid-svg-rbFMxyurkmcZ0xJo .active0,#mermaid-svg-rbFMxyurkmcZ0xJo .active1,#mermaid-svg-rbFMxyurkmcZ0xJo .active2,#mermaid-svg-rbFMxyurkmcZ0xJo .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-rbFMxyurkmcZ0xJo .activeText0,#mermaid-svg-rbFMxyurkmcZ0xJo .activeText1,#mermaid-svg-rbFMxyurkmcZ0xJo .activeText2,#mermaid-svg-rbFMxyurkmcZ0xJo .activeText3{fill:#000 !important}#mermaid-svg-rbFMxyurkmcZ0xJo .done0,#mermaid-svg-rbFMxyurkmcZ0xJo .done1,#mermaid-svg-rbFMxyurkmcZ0xJo .done2,#mermaid-svg-rbFMxyurkmcZ0xJo .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-rbFMxyurkmcZ0xJo .doneText0,#mermaid-svg-rbFMxyurkmcZ0xJo .doneText1,#mermaid-svg-rbFMxyurkmcZ0xJo .doneText2,#mermaid-svg-rbFMxyurkmcZ0xJo .doneText3{fill:#000 !important}#mermaid-svg-rbFMxyurkmcZ0xJo .crit0,#mermaid-svg-rbFMxyurkmcZ0xJo .crit1,#mermaid-svg-rbFMxyurkmcZ0xJo .crit2,#mermaid-svg-rbFMxyurkmcZ0xJo .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-rbFMxyurkmcZ0xJo .activeCrit0,#mermaid-svg-rbFMxyurkmcZ0xJo .activeCrit1,#mermaid-svg-rbFMxyurkmcZ0xJo .activeCrit2,#mermaid-svg-rbFMxyurkmcZ0xJo .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-rbFMxyurkmcZ0xJo .doneCrit0,#mermaid-svg-rbFMxyurkmcZ0xJo .doneCrit1,#mermaid-svg-rbFMxyurkmcZ0xJo .doneCrit2,#mermaid-svg-rbFMxyurkmcZ0xJo .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-rbFMxyurkmcZ0xJo .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-rbFMxyurkmcZ0xJo .milestoneText{font-style:italic}#mermaid-svg-rbFMxyurkmcZ0xJo .doneCritText0,#mermaid-svg-rbFMxyurkmcZ0xJo .doneCritText1,#mermaid-svg-rbFMxyurkmcZ0xJo .doneCritText2,#mermaid-svg-rbFMxyurkmcZ0xJo .doneCritText3{fill:#000 !important}#mermaid-svg-rbFMxyurkmcZ0xJo .activeCritText0,#mermaid-svg-rbFMxyurkmcZ0xJo .activeCritText1,#mermaid-svg-rbFMxyurkmcZ0xJo .activeCritText2,#mermaid-svg-rbFMxyurkmcZ0xJo .activeCritText3{fill:#000 !important}#mermaid-svg-rbFMxyurkmcZ0xJo .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-rbFMxyurkmcZ0xJo g.classGroup text .title{font-weight:bolder}#mermaid-svg-rbFMxyurkmcZ0xJo g.clickable{cursor:pointer}#mermaid-svg-rbFMxyurkmcZ0xJo g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-rbFMxyurkmcZ0xJo g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-rbFMxyurkmcZ0xJo .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-rbFMxyurkmcZ0xJo .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-rbFMxyurkmcZ0xJo .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-rbFMxyurkmcZ0xJo .dashed-line{stroke-dasharray:3}#mermaid-svg-rbFMxyurkmcZ0xJo #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-rbFMxyurkmcZ0xJo #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-rbFMxyurkmcZ0xJo #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-rbFMxyurkmcZ0xJo #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-rbFMxyurkmcZ0xJo #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-rbFMxyurkmcZ0xJo #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-rbFMxyurkmcZ0xJo #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-rbFMxyurkmcZ0xJo #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-rbFMxyurkmcZ0xJo .commit-id,#mermaid-svg-rbFMxyurkmcZ0xJo .commit-msg,#mermaid-svg-rbFMxyurkmcZ0xJo .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-rbFMxyurkmcZ0xJo g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-rbFMxyurkmcZ0xJo g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-rbFMxyurkmcZ0xJo g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-rbFMxyurkmcZ0xJo .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-rbFMxyurkmcZ0xJo .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-rbFMxyurkmcZ0xJo .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-rbFMxyurkmcZ0xJo .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-rbFMxyurkmcZ0xJo .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-rbFMxyurkmcZ0xJo .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-rbFMxyurkmcZ0xJo .edgeLabel text{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-rbFMxyurkmcZ0xJo .node circle.state-start{fill:black;stroke:black}#mermaid-svg-rbFMxyurkmcZ0xJo .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-rbFMxyurkmcZ0xJo #statediagram-barbEnd{fill:#9370db}#mermaid-svg-rbFMxyurkmcZ0xJo .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-rbFMxyurkmcZ0xJo .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-rbFMxyurkmcZ0xJo .statediagram-state .divider{stroke:#9370db}#mermaid-svg-rbFMxyurkmcZ0xJo .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-rbFMxyurkmcZ0xJo .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-rbFMxyurkmcZ0xJo .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-rbFMxyurkmcZ0xJo .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-rbFMxyurkmcZ0xJo .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-rbFMxyurkmcZ0xJo .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-rbFMxyurkmcZ0xJo .note-edge{stroke-dasharray:5}#mermaid-svg-rbFMxyurkmcZ0xJo .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-rbFMxyurkmcZ0xJo .error-icon{fill:#522}#mermaid-svg-rbFMxyurkmcZ0xJo .error-text{fill:#522;stroke:#522}#mermaid-svg-rbFMxyurkmcZ0xJo .edge-thickness-normal{stroke-width:2px}#mermaid-svg-rbFMxyurkmcZ0xJo .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-rbFMxyurkmcZ0xJo .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-rbFMxyurkmcZ0xJo .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-rbFMxyurkmcZ0xJo .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-rbFMxyurkmcZ0xJo .marker{fill:#333}#mermaid-svg-rbFMxyurkmcZ0xJo .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-rbFMxyurkmcZ0xJo {
color: rgba(0, 0, 0, 0.75);
font: ;
}

Alice

John

Hello John, how are you?

John, can you hear me?

Great!

I feel great!

Alice

John

四. 注释

可以向序列图中添加注释

格式：

Note right of 参与者:

Note left of 参与者:

Note over 参与者:

注：right 在右边添加，left在左边添加,over在下方添加

代码：

```mermaid

sequenceDiagram

participant John

Note left of John: Text in note

```

#mermaid-svg-Exm3sHEQK85RumgK .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-Exm3sHEQK85RumgK .label text{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK .node rect,#mermaid-svg-Exm3sHEQK85RumgK .node circle,#mermaid-svg-Exm3sHEQK85RumgK .node ellipse,#mermaid-svg-Exm3sHEQK85RumgK .node polygon,#mermaid-svg-Exm3sHEQK85RumgK .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-Exm3sHEQK85RumgK .node .label{text-align:center;fill:#333}#mermaid-svg-Exm3sHEQK85RumgK .node.clickable{cursor:pointer}#mermaid-svg-Exm3sHEQK85RumgK .arrowheadPath{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-Exm3sHEQK85RumgK .flowchart-link{stroke:#333;fill:none}#mermaid-svg-Exm3sHEQK85RumgK .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-Exm3sHEQK85RumgK .edgeLabel rect{opacity:0.9}#mermaid-svg-Exm3sHEQK85RumgK .edgeLabel span{color:#333}#mermaid-svg-Exm3sHEQK85RumgK .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-Exm3sHEQK85RumgK .cluster text{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-Exm3sHEQK85RumgK .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-Exm3sHEQK85RumgK text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-Exm3sHEQK85RumgK .actor-line{stroke:grey}#mermaid-svg-Exm3sHEQK85RumgK .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-Exm3sHEQK85RumgK .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-Exm3sHEQK85RumgK #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-Exm3sHEQK85RumgK .sequenceNumber{fill:#fff}#mermaid-svg-Exm3sHEQK85RumgK #sequencenumber{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK #crosshead path{fill:#333;stroke:#333}#mermaid-svg-Exm3sHEQK85RumgK .messageText{fill:#333;stroke:#333}#mermaid-svg-Exm3sHEQK85RumgK .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-Exm3sHEQK85RumgK .labelText,#mermaid-svg-Exm3sHEQK85RumgK .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-Exm3sHEQK85RumgK .loopText,#mermaid-svg-Exm3sHEQK85RumgK .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-Exm3sHEQK85RumgK .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-Exm3sHEQK85RumgK .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-Exm3sHEQK85RumgK .noteText,#mermaid-svg-Exm3sHEQK85RumgK .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-Exm3sHEQK85RumgK .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-Exm3sHEQK85RumgK .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-Exm3sHEQK85RumgK .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-Exm3sHEQK85RumgK .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK .section{stroke:none;opacity:0.2}#mermaid-svg-Exm3sHEQK85RumgK .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-Exm3sHEQK85RumgK .section2{fill:#fff400}#mermaid-svg-Exm3sHEQK85RumgK .section1,#mermaid-svg-Exm3sHEQK85RumgK .section3{fill:#fff;opacity:0.2}#mermaid-svg-Exm3sHEQK85RumgK .sectionTitle0{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK .sectionTitle1{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK .sectionTitle2{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK .sectionTitle3{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-Exm3sHEQK85RumgK .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK .grid path{stroke-width:0}#mermaid-svg-Exm3sHEQK85RumgK .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-Exm3sHEQK85RumgK .task{stroke-width:2}#mermaid-svg-Exm3sHEQK85RumgK .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK .taskText:not([font-size]){font-size:11px}#mermaid-svg-Exm3sHEQK85RumgK .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-Exm3sHEQK85RumgK .task.clickable{cursor:pointer}#mermaid-svg-Exm3sHEQK85RumgK .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-Exm3sHEQK85RumgK .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-Exm3sHEQK85RumgK .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-Exm3sHEQK85RumgK .taskText0,#mermaid-svg-Exm3sHEQK85RumgK .taskText1,#mermaid-svg-Exm3sHEQK85RumgK .taskText2,#mermaid-svg-Exm3sHEQK85RumgK .taskText3{fill:#fff}#mermaid-svg-Exm3sHEQK85RumgK .task0,#mermaid-svg-Exm3sHEQK85RumgK .task1,#mermaid-svg-Exm3sHEQK85RumgK .task2,#mermaid-svg-Exm3sHEQK85RumgK .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-Exm3sHEQK85RumgK .taskTextOutside0,#mermaid-svg-Exm3sHEQK85RumgK .taskTextOutside2{fill:#000}#mermaid-svg-Exm3sHEQK85RumgK .taskTextOutside1,#mermaid-svg-Exm3sHEQK85RumgK .taskTextOutside3{fill:#000}#mermaid-svg-Exm3sHEQK85RumgK .active0,#mermaid-svg-Exm3sHEQK85RumgK .active1,#mermaid-svg-Exm3sHEQK85RumgK .active2,#mermaid-svg-Exm3sHEQK85RumgK .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-Exm3sHEQK85RumgK .activeText0,#mermaid-svg-Exm3sHEQK85RumgK .activeText1,#mermaid-svg-Exm3sHEQK85RumgK .activeText2,#mermaid-svg-Exm3sHEQK85RumgK .activeText3{fill:#000 !important}#mermaid-svg-Exm3sHEQK85RumgK .done0,#mermaid-svg-Exm3sHEQK85RumgK .done1,#mermaid-svg-Exm3sHEQK85RumgK .done2,#mermaid-svg-Exm3sHEQK85RumgK .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-Exm3sHEQK85RumgK .doneText0,#mermaid-svg-Exm3sHEQK85RumgK .doneText1,#mermaid-svg-Exm3sHEQK85RumgK .doneText2,#mermaid-svg-Exm3sHEQK85RumgK .doneText3{fill:#000 !important}#mermaid-svg-Exm3sHEQK85RumgK .crit0,#mermaid-svg-Exm3sHEQK85RumgK .crit1,#mermaid-svg-Exm3sHEQK85RumgK .crit2,#mermaid-svg-Exm3sHEQK85RumgK .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-Exm3sHEQK85RumgK .activeCrit0,#mermaid-svg-Exm3sHEQK85RumgK .activeCrit1,#mermaid-svg-Exm3sHEQK85RumgK .activeCrit2,#mermaid-svg-Exm3sHEQK85RumgK .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-Exm3sHEQK85RumgK .doneCrit0,#mermaid-svg-Exm3sHEQK85RumgK .doneCrit1,#mermaid-svg-Exm3sHEQK85RumgK .doneCrit2,#mermaid-svg-Exm3sHEQK85RumgK .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-Exm3sHEQK85RumgK .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-Exm3sHEQK85RumgK .milestoneText{font-style:italic}#mermaid-svg-Exm3sHEQK85RumgK .doneCritText0,#mermaid-svg-Exm3sHEQK85RumgK .doneCritText1,#mermaid-svg-Exm3sHEQK85RumgK .doneCritText2,#mermaid-svg-Exm3sHEQK85RumgK .doneCritText3{fill:#000 !important}#mermaid-svg-Exm3sHEQK85RumgK .activeCritText0,#mermaid-svg-Exm3sHEQK85RumgK .activeCritText1,#mermaid-svg-Exm3sHEQK85RumgK .activeCritText2,#mermaid-svg-Exm3sHEQK85RumgK .activeCritText3{fill:#000 !important}#mermaid-svg-Exm3sHEQK85RumgK .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-Exm3sHEQK85RumgK g.classGroup text .title{font-weight:bolder}#mermaid-svg-Exm3sHEQK85RumgK g.clickable{cursor:pointer}#mermaid-svg-Exm3sHEQK85RumgK g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-Exm3sHEQK85RumgK g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-Exm3sHEQK85RumgK .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-Exm3sHEQK85RumgK .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-Exm3sHEQK85RumgK .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-Exm3sHEQK85RumgK .dashed-line{stroke-dasharray:3}#mermaid-svg-Exm3sHEQK85RumgK #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Exm3sHEQK85RumgK #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Exm3sHEQK85RumgK #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-Exm3sHEQK85RumgK #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-Exm3sHEQK85RumgK #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Exm3sHEQK85RumgK #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Exm3sHEQK85RumgK #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Exm3sHEQK85RumgK #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Exm3sHEQK85RumgK .commit-id,#mermaid-svg-Exm3sHEQK85RumgK .commit-msg,#mermaid-svg-Exm3sHEQK85RumgK .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-Exm3sHEQK85RumgK g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-Exm3sHEQK85RumgK g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-Exm3sHEQK85RumgK g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-Exm3sHEQK85RumgK .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-Exm3sHEQK85RumgK .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-Exm3sHEQK85RumgK .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-Exm3sHEQK85RumgK .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-Exm3sHEQK85RumgK .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-Exm3sHEQK85RumgK .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-Exm3sHEQK85RumgK .edgeLabel text{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Exm3sHEQK85RumgK .node circle.state-start{fill:black;stroke:black}#mermaid-svg-Exm3sHEQK85RumgK .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-Exm3sHEQK85RumgK #statediagram-barbEnd{fill:#9370db}#mermaid-svg-Exm3sHEQK85RumgK .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-Exm3sHEQK85RumgK .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-Exm3sHEQK85RumgK .statediagram-state .divider{stroke:#9370db}#mermaid-svg-Exm3sHEQK85RumgK .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-Exm3sHEQK85RumgK .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-Exm3sHEQK85RumgK .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-Exm3sHEQK85RumgK .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-Exm3sHEQK85RumgK .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-Exm3sHEQK85RumgK .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-Exm3sHEQK85RumgK .note-edge{stroke-dasharray:5}#mermaid-svg-Exm3sHEQK85RumgK .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-Exm3sHEQK85RumgK .error-icon{fill:#522}#mermaid-svg-Exm3sHEQK85RumgK .error-text{fill:#522;stroke:#522}#mermaid-svg-Exm3sHEQK85RumgK .edge-thickness-normal{stroke-width:2px}#mermaid-svg-Exm3sHEQK85RumgK .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-Exm3sHEQK85RumgK .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-Exm3sHEQK85RumgK .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-Exm3sHEQK85RumgK .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-Exm3sHEQK85RumgK .marker{fill:#333}#mermaid-svg-Exm3sHEQK85RumgK .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-Exm3sHEQK85RumgK {
color: rgba(0, 0, 0, 0.75);
font: ;
}

John

Text in note

John

还可以创建跨越两个参与者的笔记：

代码：

```mermaid

sequenceDiagram

participant John

Note left of John: Text in note

```

效果：

#mermaid-svg-4dfBm8QjON0fI6Eu .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .label text{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .node rect,#mermaid-svg-4dfBm8QjON0fI6Eu .node circle,#mermaid-svg-4dfBm8QjON0fI6Eu .node ellipse,#mermaid-svg-4dfBm8QjON0fI6Eu .node polygon,#mermaid-svg-4dfBm8QjON0fI6Eu .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-4dfBm8QjON0fI6Eu .node .label{text-align:center;fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .node.clickable{cursor:pointer}#mermaid-svg-4dfBm8QjON0fI6Eu .arrowheadPath{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-4dfBm8QjON0fI6Eu .flowchart-link{stroke:#333;fill:none}#mermaid-svg-4dfBm8QjON0fI6Eu .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-4dfBm8QjON0fI6Eu .edgeLabel rect{opacity:0.9}#mermaid-svg-4dfBm8QjON0fI6Eu .edgeLabel span{color:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-4dfBm8QjON0fI6Eu .cluster text{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-4dfBm8QjON0fI6Eu .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-4dfBm8QjON0fI6Eu text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-4dfBm8QjON0fI6Eu .actor-line{stroke:grey}#mermaid-svg-4dfBm8QjON0fI6Eu .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-4dfBm8QjON0fI6Eu #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .sequenceNumber{fill:#fff}#mermaid-svg-4dfBm8QjON0fI6Eu #sequencenumber{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu #crosshead path{fill:#333;stroke:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .messageText{fill:#333;stroke:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-4dfBm8QjON0fI6Eu .labelText,#mermaid-svg-4dfBm8QjON0fI6Eu .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-4dfBm8QjON0fI6Eu .loopText,#mermaid-svg-4dfBm8QjON0fI6Eu .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-4dfBm8QjON0fI6Eu .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-4dfBm8QjON0fI6Eu .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-4dfBm8QjON0fI6Eu .noteText,#mermaid-svg-4dfBm8QjON0fI6Eu .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-4dfBm8QjON0fI6Eu .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-4dfBm8QjON0fI6Eu .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-4dfBm8QjON0fI6Eu .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-4dfBm8QjON0fI6Eu .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu .section{stroke:none;opacity:0.2}#mermaid-svg-4dfBm8QjON0fI6Eu .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-4dfBm8QjON0fI6Eu .section2{fill:#fff400}#mermaid-svg-4dfBm8QjON0fI6Eu .section1,#mermaid-svg-4dfBm8QjON0fI6Eu .section3{fill:#fff;opacity:0.2}#mermaid-svg-4dfBm8QjON0fI6Eu .sectionTitle0{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .sectionTitle1{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .sectionTitle2{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .sectionTitle3{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-4dfBm8QjON0fI6Eu .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu .grid path{stroke-width:0}#mermaid-svg-4dfBm8QjON0fI6Eu .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-4dfBm8QjON0fI6Eu .task{stroke-width:2}#mermaid-svg-4dfBm8QjON0fI6Eu .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu .taskText:not([font-size]){font-size:11px}#mermaid-svg-4dfBm8QjON0fI6Eu .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-4dfBm8QjON0fI6Eu .task.clickable{cursor:pointer}#mermaid-svg-4dfBm8QjON0fI6Eu .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-4dfBm8QjON0fI6Eu .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-4dfBm8QjON0fI6Eu .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-4dfBm8QjON0fI6Eu .taskText0,#mermaid-svg-4dfBm8QjON0fI6Eu .taskText1,#mermaid-svg-4dfBm8QjON0fI6Eu .taskText2,#mermaid-svg-4dfBm8QjON0fI6Eu .taskText3{fill:#fff}#mermaid-svg-4dfBm8QjON0fI6Eu .task0,#mermaid-svg-4dfBm8QjON0fI6Eu .task1,#mermaid-svg-4dfBm8QjON0fI6Eu .task2,#mermaid-svg-4dfBm8QjON0fI6Eu .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-4dfBm8QjON0fI6Eu .taskTextOutside0,#mermaid-svg-4dfBm8QjON0fI6Eu .taskTextOutside2{fill:#000}#mermaid-svg-4dfBm8QjON0fI6Eu .taskTextOutside1,#mermaid-svg-4dfBm8QjON0fI6Eu .taskTextOutside3{fill:#000}#mermaid-svg-4dfBm8QjON0fI6Eu .active0,#mermaid-svg-4dfBm8QjON0fI6Eu .active1,#mermaid-svg-4dfBm8QjON0fI6Eu .active2,#mermaid-svg-4dfBm8QjON0fI6Eu .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-4dfBm8QjON0fI6Eu .activeText0,#mermaid-svg-4dfBm8QjON0fI6Eu .activeText1,#mermaid-svg-4dfBm8QjON0fI6Eu .activeText2,#mermaid-svg-4dfBm8QjON0fI6Eu .activeText3{fill:#000 !important}#mermaid-svg-4dfBm8QjON0fI6Eu .done0,#mermaid-svg-4dfBm8QjON0fI6Eu .done1,#mermaid-svg-4dfBm8QjON0fI6Eu .done2,#mermaid-svg-4dfBm8QjON0fI6Eu .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-4dfBm8QjON0fI6Eu .doneText0,#mermaid-svg-4dfBm8QjON0fI6Eu .doneText1,#mermaid-svg-4dfBm8QjON0fI6Eu .doneText2,#mermaid-svg-4dfBm8QjON0fI6Eu .doneText3{fill:#000 !important}#mermaid-svg-4dfBm8QjON0fI6Eu .crit0,#mermaid-svg-4dfBm8QjON0fI6Eu .crit1,#mermaid-svg-4dfBm8QjON0fI6Eu .crit2,#mermaid-svg-4dfBm8QjON0fI6Eu .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-4dfBm8QjON0fI6Eu .activeCrit0,#mermaid-svg-4dfBm8QjON0fI6Eu .activeCrit1,#mermaid-svg-4dfBm8QjON0fI6Eu .activeCrit2,#mermaid-svg-4dfBm8QjON0fI6Eu .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-4dfBm8QjON0fI6Eu .doneCrit0,#mermaid-svg-4dfBm8QjON0fI6Eu .doneCrit1,#mermaid-svg-4dfBm8QjON0fI6Eu .doneCrit2,#mermaid-svg-4dfBm8QjON0fI6Eu .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-4dfBm8QjON0fI6Eu .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-4dfBm8QjON0fI6Eu .milestoneText{font-style:italic}#mermaid-svg-4dfBm8QjON0fI6Eu .doneCritText0,#mermaid-svg-4dfBm8QjON0fI6Eu .doneCritText1,#mermaid-svg-4dfBm8QjON0fI6Eu .doneCritText2,#mermaid-svg-4dfBm8QjON0fI6Eu .doneCritText3{fill:#000 !important}#mermaid-svg-4dfBm8QjON0fI6Eu .activeCritText0,#mermaid-svg-4dfBm8QjON0fI6Eu .activeCritText1,#mermaid-svg-4dfBm8QjON0fI6Eu .activeCritText2,#mermaid-svg-4dfBm8QjON0fI6Eu .activeCritText3{fill:#000 !important}#mermaid-svg-4dfBm8QjON0fI6Eu .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-4dfBm8QjON0fI6Eu g.classGroup text .title{font-weight:bolder}#mermaid-svg-4dfBm8QjON0fI6Eu g.clickable{cursor:pointer}#mermaid-svg-4dfBm8QjON0fI6Eu g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-4dfBm8QjON0fI6Eu g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-4dfBm8QjON0fI6Eu .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-4dfBm8QjON0fI6Eu .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-4dfBm8QjON0fI6Eu .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-4dfBm8QjON0fI6Eu .dashed-line{stroke-dasharray:3}#mermaid-svg-4dfBm8QjON0fI6Eu #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4dfBm8QjON0fI6Eu #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4dfBm8QjON0fI6Eu #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-4dfBm8QjON0fI6Eu #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-4dfBm8QjON0fI6Eu #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4dfBm8QjON0fI6Eu #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4dfBm8QjON0fI6Eu #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4dfBm8QjON0fI6Eu #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4dfBm8QjON0fI6Eu .commit-id,#mermaid-svg-4dfBm8QjON0fI6Eu .commit-msg,#mermaid-svg-4dfBm8QjON0fI6Eu .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-4dfBm8QjON0fI6Eu g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-4dfBm8QjON0fI6Eu g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-4dfBm8QjON0fI6Eu g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-4dfBm8QjON0fI6Eu .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-4dfBm8QjON0fI6Eu .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-4dfBm8QjON0fI6Eu .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-4dfBm8QjON0fI6Eu .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-4dfBm8QjON0fI6Eu .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-4dfBm8QjON0fI6Eu .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-4dfBm8QjON0fI6Eu .edgeLabel text{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4dfBm8QjON0fI6Eu .node circle.state-start{fill:black;stroke:black}#mermaid-svg-4dfBm8QjON0fI6Eu .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-4dfBm8QjON0fI6Eu #statediagram-barbEnd{fill:#9370db}#mermaid-svg-4dfBm8QjON0fI6Eu .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-4dfBm8QjON0fI6Eu .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-4dfBm8QjON0fI6Eu .statediagram-state .divider{stroke:#9370db}#mermaid-svg-4dfBm8QjON0fI6Eu .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-4dfBm8QjON0fI6Eu .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-4dfBm8QjON0fI6Eu .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-4dfBm8QjON0fI6Eu .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-4dfBm8QjON0fI6Eu .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-4dfBm8QjON0fI6Eu .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-4dfBm8QjON0fI6Eu .note-edge{stroke-dasharray:5}#mermaid-svg-4dfBm8QjON0fI6Eu .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-4dfBm8QjON0fI6Eu .error-icon{fill:#522}#mermaid-svg-4dfBm8QjON0fI6Eu .error-text{fill:#522;stroke:#522}#mermaid-svg-4dfBm8QjON0fI6Eu .edge-thickness-normal{stroke-width:2px}#mermaid-svg-4dfBm8QjON0fI6Eu .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-4dfBm8QjON0fI6Eu .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-4dfBm8QjON0fI6Eu .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-4dfBm8QjON0fI6Eu .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-4dfBm8QjON0fI6Eu .marker{fill:#333}#mermaid-svg-4dfBm8QjON0fI6Eu .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-4dfBm8QjON0fI6Eu {
color: rgba(0, 0, 0, 0.75);
font: ;
}

Alice

John

Hello John, how are you?

A typical interaction

Alice

John

五. 循环

可以在序列图中表达循环

格式：

loop Loop text

… 代码 …

end

代码：

```mermaid

sequenceDiagram

participant John

Note left of John: Text in note

```

#mermaid-svg-XxZdXIgzL6lRzYhN .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .label text{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .node rect,#mermaid-svg-XxZdXIgzL6lRzYhN .node circle,#mermaid-svg-XxZdXIgzL6lRzYhN .node ellipse,#mermaid-svg-XxZdXIgzL6lRzYhN .node polygon,#mermaid-svg-XxZdXIgzL6lRzYhN .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-XxZdXIgzL6lRzYhN .node .label{text-align:center;fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .node.clickable{cursor:pointer}#mermaid-svg-XxZdXIgzL6lRzYhN .arrowheadPath{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-XxZdXIgzL6lRzYhN .flowchart-link{stroke:#333;fill:none}#mermaid-svg-XxZdXIgzL6lRzYhN .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-XxZdXIgzL6lRzYhN .edgeLabel rect{opacity:0.9}#mermaid-svg-XxZdXIgzL6lRzYhN .edgeLabel span{color:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-XxZdXIgzL6lRzYhN .cluster text{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-XxZdXIgzL6lRzYhN .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-XxZdXIgzL6lRzYhN text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-XxZdXIgzL6lRzYhN .actor-line{stroke:grey}#mermaid-svg-XxZdXIgzL6lRzYhN .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-XxZdXIgzL6lRzYhN #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .sequenceNumber{fill:#fff}#mermaid-svg-XxZdXIgzL6lRzYhN #sequencenumber{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN #crosshead path{fill:#333;stroke:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .messageText{fill:#333;stroke:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-XxZdXIgzL6lRzYhN .labelText,#mermaid-svg-XxZdXIgzL6lRzYhN .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-XxZdXIgzL6lRzYhN .loopText,#mermaid-svg-XxZdXIgzL6lRzYhN .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-XxZdXIgzL6lRzYhN .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-XxZdXIgzL6lRzYhN .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-XxZdXIgzL6lRzYhN .noteText,#mermaid-svg-XxZdXIgzL6lRzYhN .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-XxZdXIgzL6lRzYhN .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-XxZdXIgzL6lRzYhN .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-XxZdXIgzL6lRzYhN .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-XxZdXIgzL6lRzYhN .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN .section{stroke:none;opacity:0.2}#mermaid-svg-XxZdXIgzL6lRzYhN .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-XxZdXIgzL6lRzYhN .section2{fill:#fff400}#mermaid-svg-XxZdXIgzL6lRzYhN .section1,#mermaid-svg-XxZdXIgzL6lRzYhN .section3{fill:#fff;opacity:0.2}#mermaid-svg-XxZdXIgzL6lRzYhN .sectionTitle0{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .sectionTitle1{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .sectionTitle2{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .sectionTitle3{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-XxZdXIgzL6lRzYhN .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN .grid path{stroke-width:0}#mermaid-svg-XxZdXIgzL6lRzYhN .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-XxZdXIgzL6lRzYhN .task{stroke-width:2}#mermaid-svg-XxZdXIgzL6lRzYhN .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN .taskText:not([font-size]){font-size:11px}#mermaid-svg-XxZdXIgzL6lRzYhN .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-XxZdXIgzL6lRzYhN .task.clickable{cursor:pointer}#mermaid-svg-XxZdXIgzL6lRzYhN .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-XxZdXIgzL6lRzYhN .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-XxZdXIgzL6lRzYhN .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-XxZdXIgzL6lRzYhN .taskText0,#mermaid-svg-XxZdXIgzL6lRzYhN .taskText1,#mermaid-svg-XxZdXIgzL6lRzYhN .taskText2,#mermaid-svg-XxZdXIgzL6lRzYhN .taskText3{fill:#fff}#mermaid-svg-XxZdXIgzL6lRzYhN .task0,#mermaid-svg-XxZdXIgzL6lRzYhN .task1,#mermaid-svg-XxZdXIgzL6lRzYhN .task2,#mermaid-svg-XxZdXIgzL6lRzYhN .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-XxZdXIgzL6lRzYhN .taskTextOutside0,#mermaid-svg-XxZdXIgzL6lRzYhN .taskTextOutside2{fill:#000}#mermaid-svg-XxZdXIgzL6lRzYhN .taskTextOutside1,#mermaid-svg-XxZdXIgzL6lRzYhN .taskTextOutside3{fill:#000}#mermaid-svg-XxZdXIgzL6lRzYhN .active0,#mermaid-svg-XxZdXIgzL6lRzYhN .active1,#mermaid-svg-XxZdXIgzL6lRzYhN .active2,#mermaid-svg-XxZdXIgzL6lRzYhN .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-XxZdXIgzL6lRzYhN .activeText0,#mermaid-svg-XxZdXIgzL6lRzYhN .activeText1,#mermaid-svg-XxZdXIgzL6lRzYhN .activeText2,#mermaid-svg-XxZdXIgzL6lRzYhN .activeText3{fill:#000 !important}#mermaid-svg-XxZdXIgzL6lRzYhN .done0,#mermaid-svg-XxZdXIgzL6lRzYhN .done1,#mermaid-svg-XxZdXIgzL6lRzYhN .done2,#mermaid-svg-XxZdXIgzL6lRzYhN .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-XxZdXIgzL6lRzYhN .doneText0,#mermaid-svg-XxZdXIgzL6lRzYhN .doneText1,#mermaid-svg-XxZdXIgzL6lRzYhN .doneText2,#mermaid-svg-XxZdXIgzL6lRzYhN .doneText3{fill:#000 !important}#mermaid-svg-XxZdXIgzL6lRzYhN .crit0,#mermaid-svg-XxZdXIgzL6lRzYhN .crit1,#mermaid-svg-XxZdXIgzL6lRzYhN .crit2,#mermaid-svg-XxZdXIgzL6lRzYhN .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-XxZdXIgzL6lRzYhN .activeCrit0,#mermaid-svg-XxZdXIgzL6lRzYhN .activeCrit1,#mermaid-svg-XxZdXIgzL6lRzYhN .activeCrit2,#mermaid-svg-XxZdXIgzL6lRzYhN .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-XxZdXIgzL6lRzYhN .doneCrit0,#mermaid-svg-XxZdXIgzL6lRzYhN .doneCrit1,#mermaid-svg-XxZdXIgzL6lRzYhN .doneCrit2,#mermaid-svg-XxZdXIgzL6lRzYhN .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-XxZdXIgzL6lRzYhN .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-XxZdXIgzL6lRzYhN .milestoneText{font-style:italic}#mermaid-svg-XxZdXIgzL6lRzYhN .doneCritText0,#mermaid-svg-XxZdXIgzL6lRzYhN .doneCritText1,#mermaid-svg-XxZdXIgzL6lRzYhN .doneCritText2,#mermaid-svg-XxZdXIgzL6lRzYhN .doneCritText3{fill:#000 !important}#mermaid-svg-XxZdXIgzL6lRzYhN .activeCritText0,#mermaid-svg-XxZdXIgzL6lRzYhN .activeCritText1,#mermaid-svg-XxZdXIgzL6lRzYhN .activeCritText2,#mermaid-svg-XxZdXIgzL6lRzYhN .activeCritText3{fill:#000 !important}#mermaid-svg-XxZdXIgzL6lRzYhN .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-XxZdXIgzL6lRzYhN g.classGroup text .title{font-weight:bolder}#mermaid-svg-XxZdXIgzL6lRzYhN g.clickable{cursor:pointer}#mermaid-svg-XxZdXIgzL6lRzYhN g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-XxZdXIgzL6lRzYhN g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-XxZdXIgzL6lRzYhN .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-XxZdXIgzL6lRzYhN .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-XxZdXIgzL6lRzYhN .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-XxZdXIgzL6lRzYhN .dashed-line{stroke-dasharray:3}#mermaid-svg-XxZdXIgzL6lRzYhN #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XxZdXIgzL6lRzYhN #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XxZdXIgzL6lRzYhN #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-XxZdXIgzL6lRzYhN #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-XxZdXIgzL6lRzYhN #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XxZdXIgzL6lRzYhN #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XxZdXIgzL6lRzYhN #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XxZdXIgzL6lRzYhN #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XxZdXIgzL6lRzYhN .commit-id,#mermaid-svg-XxZdXIgzL6lRzYhN .commit-msg,#mermaid-svg-XxZdXIgzL6lRzYhN .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-XxZdXIgzL6lRzYhN g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-XxZdXIgzL6lRzYhN g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-XxZdXIgzL6lRzYhN g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-XxZdXIgzL6lRzYhN .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-XxZdXIgzL6lRzYhN .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-XxZdXIgzL6lRzYhN .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-XxZdXIgzL6lRzYhN .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-XxZdXIgzL6lRzYhN .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-XxZdXIgzL6lRzYhN .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-XxZdXIgzL6lRzYhN .edgeLabel text{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XxZdXIgzL6lRzYhN .node circle.state-start{fill:black;stroke:black}#mermaid-svg-XxZdXIgzL6lRzYhN .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-XxZdXIgzL6lRzYhN #statediagram-barbEnd{fill:#9370db}#mermaid-svg-XxZdXIgzL6lRzYhN .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-XxZdXIgzL6lRzYhN .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-XxZdXIgzL6lRzYhN .statediagram-state .divider{stroke:#9370db}#mermaid-svg-XxZdXIgzL6lRzYhN .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-XxZdXIgzL6lRzYhN .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-XxZdXIgzL6lRzYhN .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-XxZdXIgzL6lRzYhN .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-XxZdXIgzL6lRzYhN .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-XxZdXIgzL6lRzYhN .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-XxZdXIgzL6lRzYhN .note-edge{stroke-dasharray:5}#mermaid-svg-XxZdXIgzL6lRzYhN .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-XxZdXIgzL6lRzYhN .error-icon{fill:#522}#mermaid-svg-XxZdXIgzL6lRzYhN .error-text{fill:#522;stroke:#522}#mermaid-svg-XxZdXIgzL6lRzYhN .edge-thickness-normal{stroke-width:2px}#mermaid-svg-XxZdXIgzL6lRzYhN .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-XxZdXIgzL6lRzYhN .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-XxZdXIgzL6lRzYhN .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-XxZdXIgzL6lRzYhN .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-XxZdXIgzL6lRzYhN .marker{fill:#333}#mermaid-svg-XxZdXIgzL6lRzYhN .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-XxZdXIgzL6lRzYhN {
color: rgba(0, 0, 0, 0.75);
font: ;
}

Alice

John

Hello John, how are you?

Great!

loop

[Every minute]

Alice

John

六. 替代

可以在序列图中表达替代路径

格式：

lalt Describing text

… statements …

else

… statements …

end

或者如果有可选的序列（如果没有其他）

格式：

opt Describing text

… statements …

end

代码：

```mermaid

sequenceDiagram

Alice->>Bob: Hello Bob, how are you?

alt is sick

Bob->>Alice: Not so good

else is well

endfresh like a daisy

```

效果：

#mermaid-svg-VW9Gdk8SgagRYXeN .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .label text{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .node rect,#mermaid-svg-VW9Gdk8SgagRYXeN .node circle,#mermaid-svg-VW9Gdk8SgagRYXeN .node ellipse,#mermaid-svg-VW9Gdk8SgagRYXeN .node polygon,#mermaid-svg-VW9Gdk8SgagRYXeN .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-VW9Gdk8SgagRYXeN .node .label{text-align:center;fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .node.clickable{cursor:pointer}#mermaid-svg-VW9Gdk8SgagRYXeN .arrowheadPath{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-VW9Gdk8SgagRYXeN .flowchart-link{stroke:#333;fill:none}#mermaid-svg-VW9Gdk8SgagRYXeN .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-VW9Gdk8SgagRYXeN .edgeLabel rect{opacity:0.9}#mermaid-svg-VW9Gdk8SgagRYXeN .edgeLabel span{color:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-VW9Gdk8SgagRYXeN .cluster text{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-VW9Gdk8SgagRYXeN .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-VW9Gdk8SgagRYXeN text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-VW9Gdk8SgagRYXeN .actor-line{stroke:grey}#mermaid-svg-VW9Gdk8SgagRYXeN .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-VW9Gdk8SgagRYXeN #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .sequenceNumber{fill:#fff}#mermaid-svg-VW9Gdk8SgagRYXeN #sequencenumber{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN #crosshead path{fill:#333;stroke:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .messageText{fill:#333;stroke:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-VW9Gdk8SgagRYXeN .labelText,#mermaid-svg-VW9Gdk8SgagRYXeN .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-VW9Gdk8SgagRYXeN .loopText,#mermaid-svg-VW9Gdk8SgagRYXeN .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-VW9Gdk8SgagRYXeN .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-VW9Gdk8SgagRYXeN .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-VW9Gdk8SgagRYXeN .noteText,#mermaid-svg-VW9Gdk8SgagRYXeN .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-VW9Gdk8SgagRYXeN .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-VW9Gdk8SgagRYXeN .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-VW9Gdk8SgagRYXeN .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-VW9Gdk8SgagRYXeN .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN .section{stroke:none;opacity:0.2}#mermaid-svg-VW9Gdk8SgagRYXeN .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-VW9Gdk8SgagRYXeN .section2{fill:#fff400}#mermaid-svg-VW9Gdk8SgagRYXeN .section1,#mermaid-svg-VW9Gdk8SgagRYXeN .section3{fill:#fff;opacity:0.2}#mermaid-svg-VW9Gdk8SgagRYXeN .sectionTitle0{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .sectionTitle1{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .sectionTitle2{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .sectionTitle3{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-VW9Gdk8SgagRYXeN .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN .grid path{stroke-width:0}#mermaid-svg-VW9Gdk8SgagRYXeN .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-VW9Gdk8SgagRYXeN .task{stroke-width:2}#mermaid-svg-VW9Gdk8SgagRYXeN .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN .taskText:not([font-size]){font-size:11px}#mermaid-svg-VW9Gdk8SgagRYXeN .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-VW9Gdk8SgagRYXeN .task.clickable{cursor:pointer}#mermaid-svg-VW9Gdk8SgagRYXeN .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-VW9Gdk8SgagRYXeN .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-VW9Gdk8SgagRYXeN .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-VW9Gdk8SgagRYXeN .taskText0,#mermaid-svg-VW9Gdk8SgagRYXeN .taskText1,#mermaid-svg-VW9Gdk8SgagRYXeN .taskText2,#mermaid-svg-VW9Gdk8SgagRYXeN .taskText3{fill:#fff}#mermaid-svg-VW9Gdk8SgagRYXeN .task0,#mermaid-svg-VW9Gdk8SgagRYXeN .task1,#mermaid-svg-VW9Gdk8SgagRYXeN .task2,#mermaid-svg-VW9Gdk8SgagRYXeN .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-VW9Gdk8SgagRYXeN .taskTextOutside0,#mermaid-svg-VW9Gdk8SgagRYXeN .taskTextOutside2{fill:#000}#mermaid-svg-VW9Gdk8SgagRYXeN .taskTextOutside1,#mermaid-svg-VW9Gdk8SgagRYXeN .taskTextOutside3{fill:#000}#mermaid-svg-VW9Gdk8SgagRYXeN .active0,#mermaid-svg-VW9Gdk8SgagRYXeN .active1,#mermaid-svg-VW9Gdk8SgagRYXeN .active2,#mermaid-svg-VW9Gdk8SgagRYXeN .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-VW9Gdk8SgagRYXeN .activeText0,#mermaid-svg-VW9Gdk8SgagRYXeN .activeText1,#mermaid-svg-VW9Gdk8SgagRYXeN .activeText2,#mermaid-svg-VW9Gdk8SgagRYXeN .activeText3{fill:#000 !important}#mermaid-svg-VW9Gdk8SgagRYXeN .done0,#mermaid-svg-VW9Gdk8SgagRYXeN .done1,#mermaid-svg-VW9Gdk8SgagRYXeN .done2,#mermaid-svg-VW9Gdk8SgagRYXeN .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-VW9Gdk8SgagRYXeN .doneText0,#mermaid-svg-VW9Gdk8SgagRYXeN .doneText1,#mermaid-svg-VW9Gdk8SgagRYXeN .doneText2,#mermaid-svg-VW9Gdk8SgagRYXeN .doneText3{fill:#000 !important}#mermaid-svg-VW9Gdk8SgagRYXeN .crit0,#mermaid-svg-VW9Gdk8SgagRYXeN .crit1,#mermaid-svg-VW9Gdk8SgagRYXeN .crit2,#mermaid-svg-VW9Gdk8SgagRYXeN .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-VW9Gdk8SgagRYXeN .activeCrit0,#mermaid-svg-VW9Gdk8SgagRYXeN .activeCrit1,#mermaid-svg-VW9Gdk8SgagRYXeN .activeCrit2,#mermaid-svg-VW9Gdk8SgagRYXeN .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-VW9Gdk8SgagRYXeN .doneCrit0,#mermaid-svg-VW9Gdk8SgagRYXeN .doneCrit1,#mermaid-svg-VW9Gdk8SgagRYXeN .doneCrit2,#mermaid-svg-VW9Gdk8SgagRYXeN .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-VW9Gdk8SgagRYXeN .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-VW9Gdk8SgagRYXeN .milestoneText{font-style:italic}#mermaid-svg-VW9Gdk8SgagRYXeN .doneCritText0,#mermaid-svg-VW9Gdk8SgagRYXeN .doneCritText1,#mermaid-svg-VW9Gdk8SgagRYXeN .doneCritText2,#mermaid-svg-VW9Gdk8SgagRYXeN .doneCritText3{fill:#000 !important}#mermaid-svg-VW9Gdk8SgagRYXeN .activeCritText0,#mermaid-svg-VW9Gdk8SgagRYXeN .activeCritText1,#mermaid-svg-VW9Gdk8SgagRYXeN .activeCritText2,#mermaid-svg-VW9Gdk8SgagRYXeN .activeCritText3{fill:#000 !important}#mermaid-svg-VW9Gdk8SgagRYXeN .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-VW9Gdk8SgagRYXeN g.classGroup text .title{font-weight:bolder}#mermaid-svg-VW9Gdk8SgagRYXeN g.clickable{cursor:pointer}#mermaid-svg-VW9Gdk8SgagRYXeN g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-VW9Gdk8SgagRYXeN g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-VW9Gdk8SgagRYXeN .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-VW9Gdk8SgagRYXeN .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-VW9Gdk8SgagRYXeN .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-VW9Gdk8SgagRYXeN .dashed-line{stroke-dasharray:3}#mermaid-svg-VW9Gdk8SgagRYXeN #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-VW9Gdk8SgagRYXeN #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-VW9Gdk8SgagRYXeN #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-VW9Gdk8SgagRYXeN #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-VW9Gdk8SgagRYXeN #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-VW9Gdk8SgagRYXeN #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-VW9Gdk8SgagRYXeN #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-VW9Gdk8SgagRYXeN #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-VW9Gdk8SgagRYXeN .commit-id,#mermaid-svg-VW9Gdk8SgagRYXeN .commit-msg,#mermaid-svg-VW9Gdk8SgagRYXeN .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-VW9Gdk8SgagRYXeN g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-VW9Gdk8SgagRYXeN g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-VW9Gdk8SgagRYXeN g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-VW9Gdk8SgagRYXeN .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-VW9Gdk8SgagRYXeN .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-VW9Gdk8SgagRYXeN .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-VW9Gdk8SgagRYXeN .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-VW9Gdk8SgagRYXeN .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-VW9Gdk8SgagRYXeN .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-VW9Gdk8SgagRYXeN .edgeLabel text{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-VW9Gdk8SgagRYXeN .node circle.state-start{fill:black;stroke:black}#mermaid-svg-VW9Gdk8SgagRYXeN .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-VW9Gdk8SgagRYXeN #statediagram-barbEnd{fill:#9370db}#mermaid-svg-VW9Gdk8SgagRYXeN .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-VW9Gdk8SgagRYXeN .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-VW9Gdk8SgagRYXeN .statediagram-state .divider{stroke:#9370db}#mermaid-svg-VW9Gdk8SgagRYXeN .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-VW9Gdk8SgagRYXeN .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-VW9Gdk8SgagRYXeN .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-VW9Gdk8SgagRYXeN .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-VW9Gdk8SgagRYXeN .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-VW9Gdk8SgagRYXeN .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-VW9Gdk8SgagRYXeN .note-edge{stroke-dasharray:5}#mermaid-svg-VW9Gdk8SgagRYXeN .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-VW9Gdk8SgagRYXeN .error-icon{fill:#522}#mermaid-svg-VW9Gdk8SgagRYXeN .error-text{fill:#522;stroke:#522}#mermaid-svg-VW9Gdk8SgagRYXeN .edge-thickness-normal{stroke-width:2px}#mermaid-svg-VW9Gdk8SgagRYXeN .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-VW9Gdk8SgagRYXeN .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-VW9Gdk8SgagRYXeN .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-VW9Gdk8SgagRYXeN .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-VW9Gdk8SgagRYXeN .marker{fill:#333}#mermaid-svg-VW9Gdk8SgagRYXeN .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-VW9Gdk8SgagRYXeN {
color: rgba(0, 0, 0, 0.75);
font: ;
}

Alice

Bob

Hello Bob, how are you?

Not so good 🙁

Feeling fresh like a daisy

alt

[is sick]

[is well]

Thanks for asking

opt

[Extra response]

Alice

Bob

七. 平行线

可以显示并行发生的操作

格式：

par [Action 1]

… 代码 …

and [Action 2]

… 代码 …

and [Action N]

… 代码 …

end

代码：

相信你一定能举一反三哒

也可以嵌套并行块

代码：

相信你一定能举一反三哒

八. 背景高亮

可以通过提供彩色背景矩形来突出显示流
颜色使用 rgb 和 rgba 语法定义

格式：

rect rgb(0, 255, 0)

… 内容 …

end

rect rgba(0, 0, 255, .1)

… 内容 …

end

代码：

相信你一定能举一反三哒

九. 注释

可以在序列图中输入注释，解析器将忽略这些注释。注释需要在自己的行上，并且必须以%%（双百分号）开头。下一个换行符的注释开始之后的任何文本都将被视为注释

格式：

%% 注释

代码：

注释应该不需要代码教吧。。。

十. 转义字符

转义字符表传送门

十一. 序列号

可以在序列图中的每个箭头上附加一个序列号

添加：

<script>

mermaid.initialize({

sequence: { showSequenceNumbers: true },

});

</script>

它也可以通过图表代码打开

代码：

```mermaid

sequenceDiagram

autonumber

Alice->>John: Hello John, how are you?

loop Healthcheck

John->>John: Fight against hypochondria

end

Note right of John: Rational thoughts!

John–>>Alice: Great!

John->>Bob: How about you?

Bob–>>John: Jolly good!

```

效果：

#mermaid-svg-cJOEurHgDI4Hg3xC .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .label text{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .node rect,#mermaid-svg-cJOEurHgDI4Hg3xC .node circle,#mermaid-svg-cJOEurHgDI4Hg3xC .node ellipse,#mermaid-svg-cJOEurHgDI4Hg3xC .node polygon,#mermaid-svg-cJOEurHgDI4Hg3xC .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-cJOEurHgDI4Hg3xC .node .label{text-align:center;fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .node.clickable{cursor:pointer}#mermaid-svg-cJOEurHgDI4Hg3xC .arrowheadPath{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-cJOEurHgDI4Hg3xC .flowchart-link{stroke:#333;fill:none}#mermaid-svg-cJOEurHgDI4Hg3xC .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-cJOEurHgDI4Hg3xC .edgeLabel rect{opacity:0.9}#mermaid-svg-cJOEurHgDI4Hg3xC .edgeLabel span{color:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-cJOEurHgDI4Hg3xC .cluster text{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-cJOEurHgDI4Hg3xC .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-cJOEurHgDI4Hg3xC text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-cJOEurHgDI4Hg3xC .actor-line{stroke:grey}#mermaid-svg-cJOEurHgDI4Hg3xC .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-cJOEurHgDI4Hg3xC #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .sequenceNumber{fill:#fff}#mermaid-svg-cJOEurHgDI4Hg3xC #sequencenumber{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC #crosshead path{fill:#333;stroke:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .messageText{fill:#333;stroke:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-cJOEurHgDI4Hg3xC .labelText,#mermaid-svg-cJOEurHgDI4Hg3xC .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-cJOEurHgDI4Hg3xC .loopText,#mermaid-svg-cJOEurHgDI4Hg3xC .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-cJOEurHgDI4Hg3xC .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-cJOEurHgDI4Hg3xC .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-cJOEurHgDI4Hg3xC .noteText,#mermaid-svg-cJOEurHgDI4Hg3xC .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-cJOEurHgDI4Hg3xC .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-cJOEurHgDI4Hg3xC .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-cJOEurHgDI4Hg3xC .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-cJOEurHgDI4Hg3xC .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC .section{stroke:none;opacity:0.2}#mermaid-svg-cJOEurHgDI4Hg3xC .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-cJOEurHgDI4Hg3xC .section2{fill:#fff400}#mermaid-svg-cJOEurHgDI4Hg3xC .section1,#mermaid-svg-cJOEurHgDI4Hg3xC .section3{fill:#fff;opacity:0.2}#mermaid-svg-cJOEurHgDI4Hg3xC .sectionTitle0{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .sectionTitle1{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .sectionTitle2{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .sectionTitle3{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-cJOEurHgDI4Hg3xC .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC .grid path{stroke-width:0}#mermaid-svg-cJOEurHgDI4Hg3xC .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-cJOEurHgDI4Hg3xC .task{stroke-width:2}#mermaid-svg-cJOEurHgDI4Hg3xC .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC .taskText:not([font-size]){font-size:11px}#mermaid-svg-cJOEurHgDI4Hg3xC .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-cJOEurHgDI4Hg3xC .task.clickable{cursor:pointer}#mermaid-svg-cJOEurHgDI4Hg3xC .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cJOEurHgDI4Hg3xC .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cJOEurHgDI4Hg3xC .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cJOEurHgDI4Hg3xC .taskText0,#mermaid-svg-cJOEurHgDI4Hg3xC .taskText1,#mermaid-svg-cJOEurHgDI4Hg3xC .taskText2,#mermaid-svg-cJOEurHgDI4Hg3xC .taskText3{fill:#fff}#mermaid-svg-cJOEurHgDI4Hg3xC .task0,#mermaid-svg-cJOEurHgDI4Hg3xC .task1,#mermaid-svg-cJOEurHgDI4Hg3xC .task2,#mermaid-svg-cJOEurHgDI4Hg3xC .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-cJOEurHgDI4Hg3xC .taskTextOutside0,#mermaid-svg-cJOEurHgDI4Hg3xC .taskTextOutside2{fill:#000}#mermaid-svg-cJOEurHgDI4Hg3xC .taskTextOutside1,#mermaid-svg-cJOEurHgDI4Hg3xC .taskTextOutside3{fill:#000}#mermaid-svg-cJOEurHgDI4Hg3xC .active0,#mermaid-svg-cJOEurHgDI4Hg3xC .active1,#mermaid-svg-cJOEurHgDI4Hg3xC .active2,#mermaid-svg-cJOEurHgDI4Hg3xC .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-cJOEurHgDI4Hg3xC .activeText0,#mermaid-svg-cJOEurHgDI4Hg3xC .activeText1,#mermaid-svg-cJOEurHgDI4Hg3xC .activeText2,#mermaid-svg-cJOEurHgDI4Hg3xC .activeText3{fill:#000 !important}#mermaid-svg-cJOEurHgDI4Hg3xC .done0,#mermaid-svg-cJOEurHgDI4Hg3xC .done1,#mermaid-svg-cJOEurHgDI4Hg3xC .done2,#mermaid-svg-cJOEurHgDI4Hg3xC .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-cJOEurHgDI4Hg3xC .doneText0,#mermaid-svg-cJOEurHgDI4Hg3xC .doneText1,#mermaid-svg-cJOEurHgDI4Hg3xC .doneText2,#mermaid-svg-cJOEurHgDI4Hg3xC .doneText3{fill:#000 !important}#mermaid-svg-cJOEurHgDI4Hg3xC .crit0,#mermaid-svg-cJOEurHgDI4Hg3xC .crit1,#mermaid-svg-cJOEurHgDI4Hg3xC .crit2,#mermaid-svg-cJOEurHgDI4Hg3xC .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-cJOEurHgDI4Hg3xC .activeCrit0,#mermaid-svg-cJOEurHgDI4Hg3xC .activeCrit1,#mermaid-svg-cJOEurHgDI4Hg3xC .activeCrit2,#mermaid-svg-cJOEurHgDI4Hg3xC .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-cJOEurHgDI4Hg3xC .doneCrit0,#mermaid-svg-cJOEurHgDI4Hg3xC .doneCrit1,#mermaid-svg-cJOEurHgDI4Hg3xC .doneCrit2,#mermaid-svg-cJOEurHgDI4Hg3xC .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-cJOEurHgDI4Hg3xC .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-cJOEurHgDI4Hg3xC .milestoneText{font-style:italic}#mermaid-svg-cJOEurHgDI4Hg3xC .doneCritText0,#mermaid-svg-cJOEurHgDI4Hg3xC .doneCritText1,#mermaid-svg-cJOEurHgDI4Hg3xC .doneCritText2,#mermaid-svg-cJOEurHgDI4Hg3xC .doneCritText3{fill:#000 !important}#mermaid-svg-cJOEurHgDI4Hg3xC .activeCritText0,#mermaid-svg-cJOEurHgDI4Hg3xC .activeCritText1,#mermaid-svg-cJOEurHgDI4Hg3xC .activeCritText2,#mermaid-svg-cJOEurHgDI4Hg3xC .activeCritText3{fill:#000 !important}#mermaid-svg-cJOEurHgDI4Hg3xC .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-cJOEurHgDI4Hg3xC g.classGroup text .title{font-weight:bolder}#mermaid-svg-cJOEurHgDI4Hg3xC g.clickable{cursor:pointer}#mermaid-svg-cJOEurHgDI4Hg3xC g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-cJOEurHgDI4Hg3xC g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-cJOEurHgDI4Hg3xC .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-cJOEurHgDI4Hg3xC .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-cJOEurHgDI4Hg3xC .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-cJOEurHgDI4Hg3xC .dashed-line{stroke-dasharray:3}#mermaid-svg-cJOEurHgDI4Hg3xC #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cJOEurHgDI4Hg3xC #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cJOEurHgDI4Hg3xC #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-cJOEurHgDI4Hg3xC #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-cJOEurHgDI4Hg3xC #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cJOEurHgDI4Hg3xC #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cJOEurHgDI4Hg3xC #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cJOEurHgDI4Hg3xC #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cJOEurHgDI4Hg3xC .commit-id,#mermaid-svg-cJOEurHgDI4Hg3xC .commit-msg,#mermaid-svg-cJOEurHgDI4Hg3xC .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-cJOEurHgDI4Hg3xC g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-cJOEurHgDI4Hg3xC g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-cJOEurHgDI4Hg3xC g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-cJOEurHgDI4Hg3xC .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-cJOEurHgDI4Hg3xC .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-cJOEurHgDI4Hg3xC .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-cJOEurHgDI4Hg3xC .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-cJOEurHgDI4Hg3xC .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-cJOEurHgDI4Hg3xC .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-cJOEurHgDI4Hg3xC .edgeLabel text{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cJOEurHgDI4Hg3xC .node circle.state-start{fill:black;stroke:black}#mermaid-svg-cJOEurHgDI4Hg3xC .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-cJOEurHgDI4Hg3xC #statediagram-barbEnd{fill:#9370db}#mermaid-svg-cJOEurHgDI4Hg3xC .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-cJOEurHgDI4Hg3xC .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-cJOEurHgDI4Hg3xC .statediagram-state .divider{stroke:#9370db}#mermaid-svg-cJOEurHgDI4Hg3xC .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-cJOEurHgDI4Hg3xC .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-cJOEurHgDI4Hg3xC .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-cJOEurHgDI4Hg3xC .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-cJOEurHgDI4Hg3xC .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-cJOEurHgDI4Hg3xC .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-cJOEurHgDI4Hg3xC .note-edge{stroke-dasharray:5}#mermaid-svg-cJOEurHgDI4Hg3xC .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-cJOEurHgDI4Hg3xC .error-icon{fill:#522}#mermaid-svg-cJOEurHgDI4Hg3xC .error-text{fill:#522;stroke:#522}#mermaid-svg-cJOEurHgDI4Hg3xC .edge-thickness-normal{stroke-width:2px}#mermaid-svg-cJOEurHgDI4Hg3xC .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-cJOEurHgDI4Hg3xC .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-cJOEurHgDI4Hg3xC .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-cJOEurHgDI4Hg3xC .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-cJOEurHgDI4Hg3xC .marker{fill:#333}#mermaid-svg-cJOEurHgDI4Hg3xC .marker.cross{stroke:#333}

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-cJOEurHgDI4Hg3xC {
color: rgba(0, 0, 0, 0.75);
font: ;
}

Alice

John

Bob

Hello John, how are you?

Fight against hypochondria

loop

[Healthcheck]

Rational thoughts!

Great!

How about you?

Jolly good!

Alice

John

Bob

关于『进击的Markdown』:第三弹完结啦 []_(￣▽￣)

(这个部分实在有些庞大手要废了呜呜呜，我尽量挑大多数人能理解的在讲了呜呜呜)

填坑.ING

坑越挖越大

不愧是我

关于『进击的Markdown』:第三弹

UML图:序列图语法（上）

一.句法

(一). 参与者

(二). 别名

二. 留言

三. 激活

四. 注释

五. 循环

六. 替代

七. 平行线

八. 背景高亮

九. 注释

十. 转义字符

十一. 序列号

关于『进击的Markdown』:第三弹完结啦 []_(￣▽￣)

填坑.ING

关于『进击的Markdown』:第三弹就酱紫结束啦~ 叭叭~(′▽`~)

关于『进击的Markdown』:第三弹的相关教程结束。

相关推荐

Markdown中有序列表和无序列表

Markdown常用的格式

第3章. markdown语法

markdown插入图片、音频视频

测试MarkDown的代码示例分析

我的第一篇Markdown博客

在线编写Markdown

JavaScript怎么将HTML转成Markdown

关于『进击的Markdown』:第三弹

UML图:序列图语法（上）

一.句法

(一). 参与者

(二). 别名

二. 留言

三. 激活

四. 注释

五. 循环

六. 替代

七. 平行线

八. 背景高亮

九. 注释

十. 转义字符

十一. 序列号

关于『进击的Markdown』:第三弹完结啦 [](￣▽￣)

填坑.ING

关于『进击的Markdown』:第三弹 就酱紫结束啦~ 叭叭~(′▽`~)

关于『进击的Markdown』:第三弹的相关教程结束。

相关推荐

Markdown中有序列表和无序列表

Markdown常用的格式

第3章. markdown语法

markdown插入图片、音频视频

测试MarkDown的代码示例分析

我的第一篇Markdown博客

在线编写Markdown

JavaScript怎么将HTML转成Markdown

关于『进击的Markdown』:第三弹完结啦 []_(￣▽￣)

关于『进击的Markdown』:第三弹就酱紫结束啦~ 叭叭~(′▽`~)