前言
之前一直使用plantuml，Graphviz来绘图，这两个工具可以直接使用文本生成图形。但是在写markdown文档时，经常要先生成图片，再上传插入到文档中，有点麻烦。后来发现一个Typora和csdn都支持的工具mermaid。 mermaid(美人鱼), 是一个类似 Graphviz ，用文本语法来描述各种图(流程图、 时序图、甘特图)的工具，可以在markdown文档中嵌入一段 mermaid 文本来生成 SVG 形式的图片。
官方文档:https://mermaid-js.github.io/mermaid/#/在线工具:https://mermaidjs.github.io/mermaid-live-editor/
使用
mermaid最新版支持以下8种图，如果使用typora不能显示，需要更新最新版
1. 饼图
#mermaid-svg-SPJxcZFRjuUQX34a .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-SPJxcZFRjuUQX34a .label text{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a .node rect,#mermaid-svg-SPJxcZFRjuUQX34a .node circle,#mermaid-svg-SPJxcZFRjuUQX34a .node ellipse,#mermaid-svg-SPJxcZFRjuUQX34a .node polygon,#mermaid-svg-SPJxcZFRjuUQX34a .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-SPJxcZFRjuUQX34a .node .label{text-align:center;fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a .node.clickable{cursor:pointer}#mermaid-svg-SPJxcZFRjuUQX34a .arrowheadPath{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-SPJxcZFRjuUQX34a .flowchart-link{stroke:#333;fill:none}#mermaid-svg-SPJxcZFRjuUQX34a .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-SPJxcZFRjuUQX34a .edgeLabel rect{opacity:0.9}#mermaid-svg-SPJxcZFRjuUQX34a .edgeLabel span{color:#333}#mermaid-svg-SPJxcZFRjuUQX34a .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-SPJxcZFRjuUQX34a .cluster text{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a 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-SPJxcZFRjuUQX34a .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-SPJxcZFRjuUQX34a text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-SPJxcZFRjuUQX34a .actor-line{stroke:grey}#mermaid-svg-SPJxcZFRjuUQX34a .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-SPJxcZFRjuUQX34a .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-SPJxcZFRjuUQX34a #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-SPJxcZFRjuUQX34a .sequenceNumber{fill:#fff}#mermaid-svg-SPJxcZFRjuUQX34a #sequencenumber{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a #crosshead path{fill:#333;stroke:#333}#mermaid-svg-SPJxcZFRjuUQX34a .messageText{fill:#333;stroke:#333}#mermaid-svg-SPJxcZFRjuUQX34a .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-SPJxcZFRjuUQX34a .labelText,#mermaid-svg-SPJxcZFRjuUQX34a .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-SPJxcZFRjuUQX34a .loopText,#mermaid-svg-SPJxcZFRjuUQX34a .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-SPJxcZFRjuUQX34a .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-SPJxcZFRjuUQX34a .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-SPJxcZFRjuUQX34a .noteText,#mermaid-svg-SPJxcZFRjuUQX34a .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-SPJxcZFRjuUQX34a .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-SPJxcZFRjuUQX34a .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-SPJxcZFRjuUQX34a .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-SPJxcZFRjuUQX34a .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a .section{stroke:none;opacity:0.2}#mermaid-svg-SPJxcZFRjuUQX34a .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-SPJxcZFRjuUQX34a .section2{fill:#fff400}#mermaid-svg-SPJxcZFRjuUQX34a .section1,#mermaid-svg-SPJxcZFRjuUQX34a .section3{fill:#fff;opacity:0.2}#mermaid-svg-SPJxcZFRjuUQX34a .sectionTitle0{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a .sectionTitle1{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a .sectionTitle2{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a .sectionTitle3{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-SPJxcZFRjuUQX34a .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a .grid path{stroke-width:0}#mermaid-svg-SPJxcZFRjuUQX34a .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-SPJxcZFRjuUQX34a .task{stroke-width:2}#mermaid-svg-SPJxcZFRjuUQX34a .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a .taskText:not([font-size]){font-size:11px}#mermaid-svg-SPJxcZFRjuUQX34a .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-SPJxcZFRjuUQX34a .task.clickable{cursor:pointer}#mermaid-svg-SPJxcZFRjuUQX34a .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-SPJxcZFRjuUQX34a .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-SPJxcZFRjuUQX34a .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-SPJxcZFRjuUQX34a .taskText0,#mermaid-svg-SPJxcZFRjuUQX34a .taskText1,#mermaid-svg-SPJxcZFRjuUQX34a .taskText2,#mermaid-svg-SPJxcZFRjuUQX34a .taskText3{fill:#fff}#mermaid-svg-SPJxcZFRjuUQX34a .task0,#mermaid-svg-SPJxcZFRjuUQX34a .task1,#mermaid-svg-SPJxcZFRjuUQX34a .task2,#mermaid-svg-SPJxcZFRjuUQX34a .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-SPJxcZFRjuUQX34a .taskTextOutside0,#mermaid-svg-SPJxcZFRjuUQX34a .taskTextOutside2{fill:#000}#mermaid-svg-SPJxcZFRjuUQX34a .taskTextOutside1,#mermaid-svg-SPJxcZFRjuUQX34a .taskTextOutside3{fill:#000}#mermaid-svg-SPJxcZFRjuUQX34a .active0,#mermaid-svg-SPJxcZFRjuUQX34a .active1,#mermaid-svg-SPJxcZFRjuUQX34a .active2,#mermaid-svg-SPJxcZFRjuUQX34a .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-SPJxcZFRjuUQX34a .activeText0,#mermaid-svg-SPJxcZFRjuUQX34a .activeText1,#mermaid-svg-SPJxcZFRjuUQX34a .activeText2,#mermaid-svg-SPJxcZFRjuUQX34a .activeText3{fill:#000 !important}#mermaid-svg-SPJxcZFRjuUQX34a .done0,#mermaid-svg-SPJxcZFRjuUQX34a .done1,#mermaid-svg-SPJxcZFRjuUQX34a .done2,#mermaid-svg-SPJxcZFRjuUQX34a .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-SPJxcZFRjuUQX34a .doneText0,#mermaid-svg-SPJxcZFRjuUQX34a .doneText1,#mermaid-svg-SPJxcZFRjuUQX34a .doneText2,#mermaid-svg-SPJxcZFRjuUQX34a .doneText3{fill:#000 !important}#mermaid-svg-SPJxcZFRjuUQX34a .crit0,#mermaid-svg-SPJxcZFRjuUQX34a .crit1,#mermaid-svg-SPJxcZFRjuUQX34a .crit2,#mermaid-svg-SPJxcZFRjuUQX34a .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-SPJxcZFRjuUQX34a .activeCrit0,#mermaid-svg-SPJxcZFRjuUQX34a .activeCrit1,#mermaid-svg-SPJxcZFRjuUQX34a .activeCrit2,#mermaid-svg-SPJxcZFRjuUQX34a .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-SPJxcZFRjuUQX34a .doneCrit0,#mermaid-svg-SPJxcZFRjuUQX34a .doneCrit1,#mermaid-svg-SPJxcZFRjuUQX34a .doneCrit2,#mermaid-svg-SPJxcZFRjuUQX34a .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-SPJxcZFRjuUQX34a .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-SPJxcZFRjuUQX34a .milestoneText{font-style:italic}#mermaid-svg-SPJxcZFRjuUQX34a .doneCritText0,#mermaid-svg-SPJxcZFRjuUQX34a .doneCritText1,#mermaid-svg-SPJxcZFRjuUQX34a .doneCritText2,#mermaid-svg-SPJxcZFRjuUQX34a .doneCritText3{fill:#000 !important}#mermaid-svg-SPJxcZFRjuUQX34a .activeCritText0,#mermaid-svg-SPJxcZFRjuUQX34a .activeCritText1,#mermaid-svg-SPJxcZFRjuUQX34a .activeCritText2,#mermaid-svg-SPJxcZFRjuUQX34a .activeCritText3{fill:#000 !important}#mermaid-svg-SPJxcZFRjuUQX34a .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-SPJxcZFRjuUQX34a g.classGroup text .title{font-weight:bolder}#mermaid-svg-SPJxcZFRjuUQX34a g.clickable{cursor:pointer}#mermaid-svg-SPJxcZFRjuUQX34a g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-SPJxcZFRjuUQX34a g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-SPJxcZFRjuUQX34a .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-SPJxcZFRjuUQX34a .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-SPJxcZFRjuUQX34a .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-SPJxcZFRjuUQX34a .dashed-line{stroke-dasharray:3}#mermaid-svg-SPJxcZFRjuUQX34a #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SPJxcZFRjuUQX34a #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SPJxcZFRjuUQX34a #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-SPJxcZFRjuUQX34a #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-SPJxcZFRjuUQX34a #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SPJxcZFRjuUQX34a #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SPJxcZFRjuUQX34a #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SPJxcZFRjuUQX34a #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-SPJxcZFRjuUQX34a .commit-id,#mermaid-svg-SPJxcZFRjuUQX34a .commit-msg,#mermaid-svg-SPJxcZFRjuUQX34a .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-SPJxcZFRjuUQX34a g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-SPJxcZFRjuUQX34a g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-SPJxcZFRjuUQX34a g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-SPJxcZFRjuUQX34a .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-SPJxcZFRjuUQX34a .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-SPJxcZFRjuUQX34a .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-SPJxcZFRjuUQX34a .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-SPJxcZFRjuUQX34a .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-SPJxcZFRjuUQX34a .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-SPJxcZFRjuUQX34a .edgeLabel text{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-SPJxcZFRjuUQX34a .node circle.state-start{fill:black;stroke:black}#mermaid-svg-SPJxcZFRjuUQX34a .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-SPJxcZFRjuUQX34a #statediagram-barbEnd{fill:#9370db}#mermaid-svg-SPJxcZFRjuUQX34a .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-SPJxcZFRjuUQX34a .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-SPJxcZFRjuUQX34a .statediagram-state .divider{stroke:#9370db}#mermaid-svg-SPJxcZFRjuUQX34a .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-SPJxcZFRjuUQX34a .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-SPJxcZFRjuUQX34a .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-SPJxcZFRjuUQX34a .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-SPJxcZFRjuUQX34a .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-SPJxcZFRjuUQX34a .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-SPJxcZFRjuUQX34a .note-edge{stroke-dasharray:5}#mermaid-svg-SPJxcZFRjuUQX34a .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-SPJxcZFRjuUQX34a .error-icon{fill:#522}#mermaid-svg-SPJxcZFRjuUQX34a .error-text{fill:#522;stroke:#522}#mermaid-svg-SPJxcZFRjuUQX34a .edge-thickness-normal{stroke-width:2px}#mermaid-svg-SPJxcZFRjuUQX34a .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-SPJxcZFRjuUQX34a .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-SPJxcZFRjuUQX34a .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-SPJxcZFRjuUQX34a .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-SPJxcZFRjuUQX34a .marker{fill:#333}#mermaid-svg-SPJxcZFRjuUQX34a .marker.cross{stroke:#333}
:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-SPJxcZFRjuUQX34a {
color: rgba(0, 0, 0, 0.75);
font: ;
}
42%
50%
3%
5%
请假类型
年假
事假
婚假
其他
pie
title 请假类型
"年假" : 42
"事假" : 50
"婚假" : 3
"其他" : 5
2. 序列图
#mermaid-svg-2ctVNE2EBg63Gcvl .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .label text{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .node rect,#mermaid-svg-2ctVNE2EBg63Gcvl .node circle,#mermaid-svg-2ctVNE2EBg63Gcvl .node ellipse,#mermaid-svg-2ctVNE2EBg63Gcvl .node polygon,#mermaid-svg-2ctVNE2EBg63Gcvl .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-2ctVNE2EBg63Gcvl .node .label{text-align:center;fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .node.clickable{cursor:pointer}#mermaid-svg-2ctVNE2EBg63Gcvl .arrowheadPath{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-2ctVNE2EBg63Gcvl .flowchart-link{stroke:#333;fill:none}#mermaid-svg-2ctVNE2EBg63Gcvl .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-2ctVNE2EBg63Gcvl .edgeLabel rect{opacity:0.9}#mermaid-svg-2ctVNE2EBg63Gcvl .edgeLabel span{color:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-2ctVNE2EBg63Gcvl .cluster text{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl 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-2ctVNE2EBg63Gcvl .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-2ctVNE2EBg63Gcvl text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-2ctVNE2EBg63Gcvl .actor-line{stroke:grey}#mermaid-svg-2ctVNE2EBg63Gcvl .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-2ctVNE2EBg63Gcvl #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .sequenceNumber{fill:#fff}#mermaid-svg-2ctVNE2EBg63Gcvl #sequencenumber{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl #crosshead path{fill:#333;stroke:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .messageText{fill:#333;stroke:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-2ctVNE2EBg63Gcvl .labelText,#mermaid-svg-2ctVNE2EBg63Gcvl .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-2ctVNE2EBg63Gcvl .loopText,#mermaid-svg-2ctVNE2EBg63Gcvl .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-2ctVNE2EBg63Gcvl .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-2ctVNE2EBg63Gcvl .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-2ctVNE2EBg63Gcvl .noteText,#mermaid-svg-2ctVNE2EBg63Gcvl .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-2ctVNE2EBg63Gcvl .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-2ctVNE2EBg63Gcvl .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-2ctVNE2EBg63Gcvl .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-2ctVNE2EBg63Gcvl .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl .section{stroke:none;opacity:0.2}#mermaid-svg-2ctVNE2EBg63Gcvl .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-2ctVNE2EBg63Gcvl .section2{fill:#fff400}#mermaid-svg-2ctVNE2EBg63Gcvl .section1,#mermaid-svg-2ctVNE2EBg63Gcvl .section3{fill:#fff;opacity:0.2}#mermaid-svg-2ctVNE2EBg63Gcvl .sectionTitle0{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .sectionTitle1{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .sectionTitle2{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .sectionTitle3{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-2ctVNE2EBg63Gcvl .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl .grid path{stroke-width:0}#mermaid-svg-2ctVNE2EBg63Gcvl .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-2ctVNE2EBg63Gcvl .task{stroke-width:2}#mermaid-svg-2ctVNE2EBg63Gcvl .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl .taskText:not([font-size]){font-size:11px}#mermaid-svg-2ctVNE2EBg63Gcvl .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-2ctVNE2EBg63Gcvl .task.clickable{cursor:pointer}#mermaid-svg-2ctVNE2EBg63Gcvl .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-2ctVNE2EBg63Gcvl .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-2ctVNE2EBg63Gcvl .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-2ctVNE2EBg63Gcvl .taskText0,#mermaid-svg-2ctVNE2EBg63Gcvl .taskText1,#mermaid-svg-2ctVNE2EBg63Gcvl .taskText2,#mermaid-svg-2ctVNE2EBg63Gcvl .taskText3{fill:#fff}#mermaid-svg-2ctVNE2EBg63Gcvl .task0,#mermaid-svg-2ctVNE2EBg63Gcvl .task1,#mermaid-svg-2ctVNE2EBg63Gcvl .task2,#mermaid-svg-2ctVNE2EBg63Gcvl .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-2ctVNE2EBg63Gcvl .taskTextOutside0,#mermaid-svg-2ctVNE2EBg63Gcvl .taskTextOutside2{fill:#000}#mermaid-svg-2ctVNE2EBg63Gcvl .taskTextOutside1,#mermaid-svg-2ctVNE2EBg63Gcvl .taskTextOutside3{fill:#000}#mermaid-svg-2ctVNE2EBg63Gcvl .active0,#mermaid-svg-2ctVNE2EBg63Gcvl .active1,#mermaid-svg-2ctVNE2EBg63Gcvl .active2,#mermaid-svg-2ctVNE2EBg63Gcvl .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-2ctVNE2EBg63Gcvl .activeText0,#mermaid-svg-2ctVNE2EBg63Gcvl .activeText1,#mermaid-svg-2ctVNE2EBg63Gcvl .activeText2,#mermaid-svg-2ctVNE2EBg63Gcvl .activeText3{fill:#000 !important}#mermaid-svg-2ctVNE2EBg63Gcvl .done0,#mermaid-svg-2ctVNE2EBg63Gcvl .done1,#mermaid-svg-2ctVNE2EBg63Gcvl .done2,#mermaid-svg-2ctVNE2EBg63Gcvl .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-2ctVNE2EBg63Gcvl .doneText0,#mermaid-svg-2ctVNE2EBg63Gcvl .doneText1,#mermaid-svg-2ctVNE2EBg63Gcvl .doneText2,#mermaid-svg-2ctVNE2EBg63Gcvl .doneText3{fill:#000 !important}#mermaid-svg-2ctVNE2EBg63Gcvl .crit0,#mermaid-svg-2ctVNE2EBg63Gcvl .crit1,#mermaid-svg-2ctVNE2EBg63Gcvl .crit2,#mermaid-svg-2ctVNE2EBg63Gcvl .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-2ctVNE2EBg63Gcvl .activeCrit0,#mermaid-svg-2ctVNE2EBg63Gcvl .activeCrit1,#mermaid-svg-2ctVNE2EBg63Gcvl .activeCrit2,#mermaid-svg-2ctVNE2EBg63Gcvl .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-2ctVNE2EBg63Gcvl .doneCrit0,#mermaid-svg-2ctVNE2EBg63Gcvl .doneCrit1,#mermaid-svg-2ctVNE2EBg63Gcvl .doneCrit2,#mermaid-svg-2ctVNE2EBg63Gcvl .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-2ctVNE2EBg63Gcvl .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-2ctVNE2EBg63Gcvl .milestoneText{font-style:italic}#mermaid-svg-2ctVNE2EBg63Gcvl .doneCritText0,#mermaid-svg-2ctVNE2EBg63Gcvl .doneCritText1,#mermaid-svg-2ctVNE2EBg63Gcvl .doneCritText2,#mermaid-svg-2ctVNE2EBg63Gcvl .doneCritText3{fill:#000 !important}#mermaid-svg-2ctVNE2EBg63Gcvl .activeCritText0,#mermaid-svg-2ctVNE2EBg63Gcvl .activeCritText1,#mermaid-svg-2ctVNE2EBg63Gcvl .activeCritText2,#mermaid-svg-2ctVNE2EBg63Gcvl .activeCritText3{fill:#000 !important}#mermaid-svg-2ctVNE2EBg63Gcvl .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-2ctVNE2EBg63Gcvl g.classGroup text .title{font-weight:bolder}#mermaid-svg-2ctVNE2EBg63Gcvl g.clickable{cursor:pointer}#mermaid-svg-2ctVNE2EBg63Gcvl g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-2ctVNE2EBg63Gcvl g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-2ctVNE2EBg63Gcvl .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-2ctVNE2EBg63Gcvl .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-2ctVNE2EBg63Gcvl .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-2ctVNE2EBg63Gcvl .dashed-line{stroke-dasharray:3}#mermaid-svg-2ctVNE2EBg63Gcvl #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-2ctVNE2EBg63Gcvl #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-2ctVNE2EBg63Gcvl #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-2ctVNE2EBg63Gcvl #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-2ctVNE2EBg63Gcvl #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-2ctVNE2EBg63Gcvl #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-2ctVNE2EBg63Gcvl #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-2ctVNE2EBg63Gcvl #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-2ctVNE2EBg63Gcvl .commit-id,#mermaid-svg-2ctVNE2EBg63Gcvl .commit-msg,#mermaid-svg-2ctVNE2EBg63Gcvl .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-2ctVNE2EBg63Gcvl g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-2ctVNE2EBg63Gcvl g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-2ctVNE2EBg63Gcvl g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-2ctVNE2EBg63Gcvl .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-2ctVNE2EBg63Gcvl .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-2ctVNE2EBg63Gcvl .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-2ctVNE2EBg63Gcvl .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-2ctVNE2EBg63Gcvl .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-2ctVNE2EBg63Gcvl .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-2ctVNE2EBg63Gcvl .edgeLabel text{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-2ctVNE2EBg63Gcvl .node circle.state-start{fill:black;stroke:black}#mermaid-svg-2ctVNE2EBg63Gcvl .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-2ctVNE2EBg63Gcvl #statediagram-barbEnd{fill:#9370db}#mermaid-svg-2ctVNE2EBg63Gcvl .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-2ctVNE2EBg63Gcvl .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-2ctVNE2EBg63Gcvl .statediagram-state .divider{stroke:#9370db}#mermaid-svg-2ctVNE2EBg63Gcvl .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-2ctVNE2EBg63Gcvl .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-2ctVNE2EBg63Gcvl .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-2ctVNE2EBg63Gcvl .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-2ctVNE2EBg63Gcvl .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-2ctVNE2EBg63Gcvl .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-2ctVNE2EBg63Gcvl .note-edge{stroke-dasharray:5}#mermaid-svg-2ctVNE2EBg63Gcvl .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-2ctVNE2EBg63Gcvl .error-icon{fill:#522}#mermaid-svg-2ctVNE2EBg63Gcvl .error-text{fill:#522;stroke:#522}#mermaid-svg-2ctVNE2EBg63Gcvl .edge-thickness-normal{stroke-width:2px}#mermaid-svg-2ctVNE2EBg63Gcvl .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-2ctVNE2EBg63Gcvl .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-2ctVNE2EBg63Gcvl .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-2ctVNE2EBg63Gcvl .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-2ctVNE2EBg63Gcvl .marker{fill:#333}#mermaid-svg-2ctVNE2EBg63Gcvl .marker.cross{stroke:#333}
:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-2ctVNE2EBg63Gcvl {
color: rgba(0, 0, 0, 0.75);
font: ;
}
客户端
服务器
发送SYN=J
收到客户端SYN信号
返回SYN=K,ACK=J+1
收到服务器信号
回复ACK=K+1
客户端
服务器
TCP三次握手
sequenceDiagram
title: TCP三次握手
客户端 ->> 服务器: 发送SYN=J
note over 服务器: 收到客户端SYN信号
服务器 ->> 客户端:返回SYN=K,ACK=J+1
note over 客户端: 收到服务器信号
客户端 ->> 服务器:回复ACK=K+1
3. 流程图
#mermaid-svg-1DyjUtMk2ksLG0Dr .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .label text{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .node rect,#mermaid-svg-1DyjUtMk2ksLG0Dr .node circle,#mermaid-svg-1DyjUtMk2ksLG0Dr .node ellipse,#mermaid-svg-1DyjUtMk2ksLG0Dr .node polygon,#mermaid-svg-1DyjUtMk2ksLG0Dr .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-1DyjUtMk2ksLG0Dr .node .label{text-align:center;fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .node.clickable{cursor:pointer}#mermaid-svg-1DyjUtMk2ksLG0Dr .arrowheadPath{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-1DyjUtMk2ksLG0Dr .flowchart-link{stroke:#333;fill:none}#mermaid-svg-1DyjUtMk2ksLG0Dr .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-1DyjUtMk2ksLG0Dr .edgeLabel rect{opacity:0.9}#mermaid-svg-1DyjUtMk2ksLG0Dr .edgeLabel span{color:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-1DyjUtMk2ksLG0Dr .cluster text{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr 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-1DyjUtMk2ksLG0Dr .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-1DyjUtMk2ksLG0Dr text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-1DyjUtMk2ksLG0Dr .actor-line{stroke:grey}#mermaid-svg-1DyjUtMk2ksLG0Dr .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .sequenceNumber{fill:#fff}#mermaid-svg-1DyjUtMk2ksLG0Dr #sequencenumber{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr #crosshead path{fill:#333;stroke:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .messageText{fill:#333;stroke:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-1DyjUtMk2ksLG0Dr .labelText,#mermaid-svg-1DyjUtMk2ksLG0Dr .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-1DyjUtMk2ksLG0Dr .loopText,#mermaid-svg-1DyjUtMk2ksLG0Dr .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-1DyjUtMk2ksLG0Dr .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-1DyjUtMk2ksLG0Dr .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-1DyjUtMk2ksLG0Dr .noteText,#mermaid-svg-1DyjUtMk2ksLG0Dr .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-1DyjUtMk2ksLG0Dr .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-1DyjUtMk2ksLG0Dr .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-1DyjUtMk2ksLG0Dr .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-1DyjUtMk2ksLG0Dr .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr .section{stroke:none;opacity:0.2}#mermaid-svg-1DyjUtMk2ksLG0Dr .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-1DyjUtMk2ksLG0Dr .section2{fill:#fff400}#mermaid-svg-1DyjUtMk2ksLG0Dr .section1,#mermaid-svg-1DyjUtMk2ksLG0Dr .section3{fill:#fff;opacity:0.2}#mermaid-svg-1DyjUtMk2ksLG0Dr .sectionTitle0{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .sectionTitle1{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .sectionTitle2{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .sectionTitle3{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-1DyjUtMk2ksLG0Dr .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr .grid path{stroke-width:0}#mermaid-svg-1DyjUtMk2ksLG0Dr .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-1DyjUtMk2ksLG0Dr .task{stroke-width:2}#mermaid-svg-1DyjUtMk2ksLG0Dr .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr .taskText:not([font-size]){font-size:11px}#mermaid-svg-1DyjUtMk2ksLG0Dr .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-1DyjUtMk2ksLG0Dr .task.clickable{cursor:pointer}#mermaid-svg-1DyjUtMk2ksLG0Dr .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-1DyjUtMk2ksLG0Dr .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-1DyjUtMk2ksLG0Dr .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-1DyjUtMk2ksLG0Dr .taskText0,#mermaid-svg-1DyjUtMk2ksLG0Dr .taskText1,#mermaid-svg-1DyjUtMk2ksLG0Dr .taskText2,#mermaid-svg-1DyjUtMk2ksLG0Dr .taskText3{fill:#fff}#mermaid-svg-1DyjUtMk2ksLG0Dr .task0,#mermaid-svg-1DyjUtMk2ksLG0Dr .task1,#mermaid-svg-1DyjUtMk2ksLG0Dr .task2,#mermaid-svg-1DyjUtMk2ksLG0Dr .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-1DyjUtMk2ksLG0Dr .taskTextOutside0,#mermaid-svg-1DyjUtMk2ksLG0Dr .taskTextOutside2{fill:#000}#mermaid-svg-1DyjUtMk2ksLG0Dr .taskTextOutside1,#mermaid-svg-1DyjUtMk2ksLG0Dr .taskTextOutside3{fill:#000}#mermaid-svg-1DyjUtMk2ksLG0Dr .active0,#mermaid-svg-1DyjUtMk2ksLG0Dr .active1,#mermaid-svg-1DyjUtMk2ksLG0Dr .active2,#mermaid-svg-1DyjUtMk2ksLG0Dr .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-1DyjUtMk2ksLG0Dr .activeText0,#mermaid-svg-1DyjUtMk2ksLG0Dr .activeText1,#mermaid-svg-1DyjUtMk2ksLG0Dr .activeText2,#mermaid-svg-1DyjUtMk2ksLG0Dr .activeText3{fill:#000 !important}#mermaid-svg-1DyjUtMk2ksLG0Dr .done0,#mermaid-svg-1DyjUtMk2ksLG0Dr .done1,#mermaid-svg-1DyjUtMk2ksLG0Dr .done2,#mermaid-svg-1DyjUtMk2ksLG0Dr .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-1DyjUtMk2ksLG0Dr .doneText0,#mermaid-svg-1DyjUtMk2ksLG0Dr .doneText1,#mermaid-svg-1DyjUtMk2ksLG0Dr .doneText2,#mermaid-svg-1DyjUtMk2ksLG0Dr .doneText3{fill:#000 !important}#mermaid-svg-1DyjUtMk2ksLG0Dr .crit0,#mermaid-svg-1DyjUtMk2ksLG0Dr .crit1,#mermaid-svg-1DyjUtMk2ksLG0Dr .crit2,#mermaid-svg-1DyjUtMk2ksLG0Dr .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-1DyjUtMk2ksLG0Dr .activeCrit0,#mermaid-svg-1DyjUtMk2ksLG0Dr .activeCrit1,#mermaid-svg-1DyjUtMk2ksLG0Dr .activeCrit2,#mermaid-svg-1DyjUtMk2ksLG0Dr .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-1DyjUtMk2ksLG0Dr .doneCrit0,#mermaid-svg-1DyjUtMk2ksLG0Dr .doneCrit1,#mermaid-svg-1DyjUtMk2ksLG0Dr .doneCrit2,#mermaid-svg-1DyjUtMk2ksLG0Dr .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-1DyjUtMk2ksLG0Dr .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-1DyjUtMk2ksLG0Dr .milestoneText{font-style:italic}#mermaid-svg-1DyjUtMk2ksLG0Dr .doneCritText0,#mermaid-svg-1DyjUtMk2ksLG0Dr .doneCritText1,#mermaid-svg-1DyjUtMk2ksLG0Dr .doneCritText2,#mermaid-svg-1DyjUtMk2ksLG0Dr .doneCritText3{fill:#000 !important}#mermaid-svg-1DyjUtMk2ksLG0Dr .activeCritText0,#mermaid-svg-1DyjUtMk2ksLG0Dr .activeCritText1,#mermaid-svg-1DyjUtMk2ksLG0Dr .activeCritText2,#mermaid-svg-1DyjUtMk2ksLG0Dr .activeCritText3{fill:#000 !important}#mermaid-svg-1DyjUtMk2ksLG0Dr .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-1DyjUtMk2ksLG0Dr g.classGroup text .title{font-weight:bolder}#mermaid-svg-1DyjUtMk2ksLG0Dr g.clickable{cursor:pointer}#mermaid-svg-1DyjUtMk2ksLG0Dr g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-1DyjUtMk2ksLG0Dr g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-1DyjUtMk2ksLG0Dr .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-1DyjUtMk2ksLG0Dr .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-1DyjUtMk2ksLG0Dr .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-1DyjUtMk2ksLG0Dr .dashed-line{stroke-dasharray:3}#mermaid-svg-1DyjUtMk2ksLG0Dr #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-1DyjUtMk2ksLG0Dr #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-1DyjUtMk2ksLG0Dr #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-1DyjUtMk2ksLG0Dr #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-1DyjUtMk2ksLG0Dr #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-1DyjUtMk2ksLG0Dr #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-1DyjUtMk2ksLG0Dr #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-1DyjUtMk2ksLG0Dr #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-1DyjUtMk2ksLG0Dr .commit-id,#mermaid-svg-1DyjUtMk2ksLG0Dr .commit-msg,#mermaid-svg-1DyjUtMk2ksLG0Dr .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-1DyjUtMk2ksLG0Dr g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-1DyjUtMk2ksLG0Dr g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-1DyjUtMk2ksLG0Dr g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-1DyjUtMk2ksLG0Dr .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-1DyjUtMk2ksLG0Dr .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-1DyjUtMk2ksLG0Dr .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-1DyjUtMk2ksLG0Dr .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-1DyjUtMk2ksLG0Dr .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-1DyjUtMk2ksLG0Dr .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-1DyjUtMk2ksLG0Dr .edgeLabel text{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-1DyjUtMk2ksLG0Dr .node circle.state-start{fill:black;stroke:black}#mermaid-svg-1DyjUtMk2ksLG0Dr .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-1DyjUtMk2ksLG0Dr #statediagram-barbEnd{fill:#9370db}#mermaid-svg-1DyjUtMk2ksLG0Dr .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-1DyjUtMk2ksLG0Dr .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-1DyjUtMk2ksLG0Dr .statediagram-state .divider{stroke:#9370db}#mermaid-svg-1DyjUtMk2ksLG0Dr .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-1DyjUtMk2ksLG0Dr .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-1DyjUtMk2ksLG0Dr .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-1DyjUtMk2ksLG0Dr .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-1DyjUtMk2ksLG0Dr .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-1DyjUtMk2ksLG0Dr .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-1DyjUtMk2ksLG0Dr .note-edge{stroke-dasharray:5}#mermaid-svg-1DyjUtMk2ksLG0Dr .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-1DyjUtMk2ksLG0Dr .error-icon{fill:#522}#mermaid-svg-1DyjUtMk2ksLG0Dr .error-text{fill:#522;stroke:#522}#mermaid-svg-1DyjUtMk2ksLG0Dr .edge-thickness-normal{stroke-width:2px}#mermaid-svg-1DyjUtMk2ksLG0Dr .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-1DyjUtMk2ksLG0Dr .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-1DyjUtMk2ksLG0Dr .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-1DyjUtMk2ksLG0Dr .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-1DyjUtMk2ksLG0Dr .marker{fill:#333}#mermaid-svg-1DyjUtMk2ksLG0Dr .marker.cross{stroke:#333}
:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-1DyjUtMk2ksLG0Dr {
color: rgba(0, 0, 0, 0.75);
font: ;
}
同意
拒绝
是
同意
拒绝
否
开始
员工发起请假
部门经理审批
大于3天
发送拒绝邮件通知
总经理审批
同意邮件通知
结束
graph LR
START([开始]) --> A[员工发起请假]
A -->B{部门经理审批}
B-->|同意|C{大于3天}
B-->|拒绝|F[发送拒绝邮件通知]
C -->|是|D{总经理审批}
D -->|同意|G[同意邮件通知]
D -->|拒绝|F
C -->|否|G
F -->END([结束])
G-->END
4. 类图
#mermaid-svg-UXDk5TxNnFyKDHmO .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .label text{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .node rect,#mermaid-svg-UXDk5TxNnFyKDHmO .node circle,#mermaid-svg-UXDk5TxNnFyKDHmO .node ellipse,#mermaid-svg-UXDk5TxNnFyKDHmO .node polygon,#mermaid-svg-UXDk5TxNnFyKDHmO .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-UXDk5TxNnFyKDHmO .node .label{text-align:center;fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .node.clickable{cursor:pointer}#mermaid-svg-UXDk5TxNnFyKDHmO .arrowheadPath{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-UXDk5TxNnFyKDHmO .flowchart-link{stroke:#333;fill:none}#mermaid-svg-UXDk5TxNnFyKDHmO .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-UXDk5TxNnFyKDHmO .edgeLabel rect{opacity:0.9}#mermaid-svg-UXDk5TxNnFyKDHmO .edgeLabel span{color:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-UXDk5TxNnFyKDHmO .cluster text{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO 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-UXDk5TxNnFyKDHmO .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-UXDk5TxNnFyKDHmO text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-UXDk5TxNnFyKDHmO .actor-line{stroke:grey}#mermaid-svg-UXDk5TxNnFyKDHmO .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-UXDk5TxNnFyKDHmO #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .sequenceNumber{fill:#fff}#mermaid-svg-UXDk5TxNnFyKDHmO #sequencenumber{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO #crosshead path{fill:#333;stroke:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .messageText{fill:#333;stroke:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-UXDk5TxNnFyKDHmO .labelText,#mermaid-svg-UXDk5TxNnFyKDHmO .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-UXDk5TxNnFyKDHmO .loopText,#mermaid-svg-UXDk5TxNnFyKDHmO .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-UXDk5TxNnFyKDHmO .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-UXDk5TxNnFyKDHmO .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-UXDk5TxNnFyKDHmO .noteText,#mermaid-svg-UXDk5TxNnFyKDHmO .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-UXDk5TxNnFyKDHmO .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-UXDk5TxNnFyKDHmO .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-UXDk5TxNnFyKDHmO .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-UXDk5TxNnFyKDHmO .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO .section{stroke:none;opacity:0.2}#mermaid-svg-UXDk5TxNnFyKDHmO .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-UXDk5TxNnFyKDHmO .section2{fill:#fff400}#mermaid-svg-UXDk5TxNnFyKDHmO .section1,#mermaid-svg-UXDk5TxNnFyKDHmO .section3{fill:#fff;opacity:0.2}#mermaid-svg-UXDk5TxNnFyKDHmO .sectionTitle0{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .sectionTitle1{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .sectionTitle2{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .sectionTitle3{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-UXDk5TxNnFyKDHmO .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO .grid path{stroke-width:0}#mermaid-svg-UXDk5TxNnFyKDHmO .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-UXDk5TxNnFyKDHmO .task{stroke-width:2}#mermaid-svg-UXDk5TxNnFyKDHmO .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO .taskText:not([font-size]){font-size:11px}#mermaid-svg-UXDk5TxNnFyKDHmO .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-UXDk5TxNnFyKDHmO .task.clickable{cursor:pointer}#mermaid-svg-UXDk5TxNnFyKDHmO .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-UXDk5TxNnFyKDHmO .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-UXDk5TxNnFyKDHmO .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-UXDk5TxNnFyKDHmO .taskText0,#mermaid-svg-UXDk5TxNnFyKDHmO .taskText1,#mermaid-svg-UXDk5TxNnFyKDHmO .taskText2,#mermaid-svg-UXDk5TxNnFyKDHmO .taskText3{fill:#fff}#mermaid-svg-UXDk5TxNnFyKDHmO .task0,#mermaid-svg-UXDk5TxNnFyKDHmO .task1,#mermaid-svg-UXDk5TxNnFyKDHmO .task2,#mermaid-svg-UXDk5TxNnFyKDHmO .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-UXDk5TxNnFyKDHmO .taskTextOutside0,#mermaid-svg-UXDk5TxNnFyKDHmO .taskTextOutside2{fill:#000}#mermaid-svg-UXDk5TxNnFyKDHmO .taskTextOutside1,#mermaid-svg-UXDk5TxNnFyKDHmO .taskTextOutside3{fill:#000}#mermaid-svg-UXDk5TxNnFyKDHmO .active0,#mermaid-svg-UXDk5TxNnFyKDHmO .active1,#mermaid-svg-UXDk5TxNnFyKDHmO .active2,#mermaid-svg-UXDk5TxNnFyKDHmO .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-UXDk5TxNnFyKDHmO .activeText0,#mermaid-svg-UXDk5TxNnFyKDHmO .activeText1,#mermaid-svg-UXDk5TxNnFyKDHmO .activeText2,#mermaid-svg-UXDk5TxNnFyKDHmO .activeText3{fill:#000 !important}#mermaid-svg-UXDk5TxNnFyKDHmO .done0,#mermaid-svg-UXDk5TxNnFyKDHmO .done1,#mermaid-svg-UXDk5TxNnFyKDHmO .done2,#mermaid-svg-UXDk5TxNnFyKDHmO .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-UXDk5TxNnFyKDHmO .doneText0,#mermaid-svg-UXDk5TxNnFyKDHmO .doneText1,#mermaid-svg-UXDk5TxNnFyKDHmO .doneText2,#mermaid-svg-UXDk5TxNnFyKDHmO .doneText3{fill:#000 !important}#mermaid-svg-UXDk5TxNnFyKDHmO .crit0,#mermaid-svg-UXDk5TxNnFyKDHmO .crit1,#mermaid-svg-UXDk5TxNnFyKDHmO .crit2,#mermaid-svg-UXDk5TxNnFyKDHmO .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-UXDk5TxNnFyKDHmO .activeCrit0,#mermaid-svg-UXDk5TxNnFyKDHmO .activeCrit1,#mermaid-svg-UXDk5TxNnFyKDHmO .activeCrit2,#mermaid-svg-UXDk5TxNnFyKDHmO .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-UXDk5TxNnFyKDHmO .doneCrit0,#mermaid-svg-UXDk5TxNnFyKDHmO .doneCrit1,#mermaid-svg-UXDk5TxNnFyKDHmO .doneCrit2,#mermaid-svg-UXDk5TxNnFyKDHmO .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-UXDk5TxNnFyKDHmO .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-UXDk5TxNnFyKDHmO .milestoneText{font-style:italic}#mermaid-svg-UXDk5TxNnFyKDHmO .doneCritText0,#mermaid-svg-UXDk5TxNnFyKDHmO .doneCritText1,#mermaid-svg-UXDk5TxNnFyKDHmO .doneCritText2,#mermaid-svg-UXDk5TxNnFyKDHmO .doneCritText3{fill:#000 !important}#mermaid-svg-UXDk5TxNnFyKDHmO .activeCritText0,#mermaid-svg-UXDk5TxNnFyKDHmO .activeCritText1,#mermaid-svg-UXDk5TxNnFyKDHmO .activeCritText2,#mermaid-svg-UXDk5TxNnFyKDHmO .activeCritText3{fill:#000 !important}#mermaid-svg-UXDk5TxNnFyKDHmO .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-UXDk5TxNnFyKDHmO g.classGroup text .title{font-weight:bolder}#mermaid-svg-UXDk5TxNnFyKDHmO g.clickable{cursor:pointer}#mermaid-svg-UXDk5TxNnFyKDHmO g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-UXDk5TxNnFyKDHmO g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-UXDk5TxNnFyKDHmO .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-UXDk5TxNnFyKDHmO .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-UXDk5TxNnFyKDHmO .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-UXDk5TxNnFyKDHmO .dashed-line{stroke-dasharray:3}#mermaid-svg-UXDk5TxNnFyKDHmO #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-UXDk5TxNnFyKDHmO #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-UXDk5TxNnFyKDHmO #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-UXDk5TxNnFyKDHmO #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-UXDk5TxNnFyKDHmO #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-UXDk5TxNnFyKDHmO #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-UXDk5TxNnFyKDHmO #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-UXDk5TxNnFyKDHmO #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-UXDk5TxNnFyKDHmO .commit-id,#mermaid-svg-UXDk5TxNnFyKDHmO .commit-msg,#mermaid-svg-UXDk5TxNnFyKDHmO .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-UXDk5TxNnFyKDHmO g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-UXDk5TxNnFyKDHmO g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-UXDk5TxNnFyKDHmO g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-UXDk5TxNnFyKDHmO .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-UXDk5TxNnFyKDHmO .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-UXDk5TxNnFyKDHmO .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-UXDk5TxNnFyKDHmO .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-UXDk5TxNnFyKDHmO .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-UXDk5TxNnFyKDHmO .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-UXDk5TxNnFyKDHmO .edgeLabel text{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-UXDk5TxNnFyKDHmO .node circle.state-start{fill:black;stroke:black}#mermaid-svg-UXDk5TxNnFyKDHmO .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-UXDk5TxNnFyKDHmO #statediagram-barbEnd{fill:#9370db}#mermaid-svg-UXDk5TxNnFyKDHmO .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-UXDk5TxNnFyKDHmO .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-UXDk5TxNnFyKDHmO .statediagram-state .divider{stroke:#9370db}#mermaid-svg-UXDk5TxNnFyKDHmO .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-UXDk5TxNnFyKDHmO .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-UXDk5TxNnFyKDHmO .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-UXDk5TxNnFyKDHmO .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-UXDk5TxNnFyKDHmO .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-UXDk5TxNnFyKDHmO .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-UXDk5TxNnFyKDHmO .note-edge{stroke-dasharray:5}#mermaid-svg-UXDk5TxNnFyKDHmO .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-UXDk5TxNnFyKDHmO .error-icon{fill:#522}#mermaid-svg-UXDk5TxNnFyKDHmO .error-text{fill:#522;stroke:#522}#mermaid-svg-UXDk5TxNnFyKDHmO .edge-thickness-normal{stroke-width:2px}#mermaid-svg-UXDk5TxNnFyKDHmO .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-UXDk5TxNnFyKDHmO .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-UXDk5TxNnFyKDHmO .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-UXDk5TxNnFyKDHmO .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-UXDk5TxNnFyKDHmO .marker{fill:#333}#mermaid-svg-UXDk5TxNnFyKDHmO .marker.cross{stroke:#333}
:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-UXDk5TxNnFyKDHmO {
color: rgba(0, 0, 0, 0.75);
font: ;
}
Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
5. ER图
实体关系模型（或 ER 模型）描述了特定知识领域中感兴趣的相互关联的事物。基本 ER 模型由实体类型（对感兴趣的事物进行分类）组成，并指定实体之间可能存在的关系 在这里绘制ER图不支持中文
#mermaid-svg-0TOSPjtBS9nM16QS .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-0TOSPjtBS9nM16QS .label text{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS .node rect,#mermaid-svg-0TOSPjtBS9nM16QS .node circle,#mermaid-svg-0TOSPjtBS9nM16QS .node ellipse,#mermaid-svg-0TOSPjtBS9nM16QS .node polygon,#mermaid-svg-0TOSPjtBS9nM16QS .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-0TOSPjtBS9nM16QS .node .label{text-align:center;fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS .node.clickable{cursor:pointer}#mermaid-svg-0TOSPjtBS9nM16QS .arrowheadPath{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-0TOSPjtBS9nM16QS .flowchart-link{stroke:#333;fill:none}#mermaid-svg-0TOSPjtBS9nM16QS .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-0TOSPjtBS9nM16QS .edgeLabel rect{opacity:0.9}#mermaid-svg-0TOSPjtBS9nM16QS .edgeLabel span{color:#333}#mermaid-svg-0TOSPjtBS9nM16QS .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-0TOSPjtBS9nM16QS .cluster text{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS 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-0TOSPjtBS9nM16QS .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-0TOSPjtBS9nM16QS text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-0TOSPjtBS9nM16QS .actor-line{stroke:grey}#mermaid-svg-0TOSPjtBS9nM16QS .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-0TOSPjtBS9nM16QS .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-0TOSPjtBS9nM16QS #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-0TOSPjtBS9nM16QS .sequenceNumber{fill:#fff}#mermaid-svg-0TOSPjtBS9nM16QS #sequencenumber{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS #crosshead path{fill:#333;stroke:#333}#mermaid-svg-0TOSPjtBS9nM16QS .messageText{fill:#333;stroke:#333}#mermaid-svg-0TOSPjtBS9nM16QS .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-0TOSPjtBS9nM16QS .labelText,#mermaid-svg-0TOSPjtBS9nM16QS .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-0TOSPjtBS9nM16QS .loopText,#mermaid-svg-0TOSPjtBS9nM16QS .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-0TOSPjtBS9nM16QS .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-0TOSPjtBS9nM16QS .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-0TOSPjtBS9nM16QS .noteText,#mermaid-svg-0TOSPjtBS9nM16QS .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-0TOSPjtBS9nM16QS .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-0TOSPjtBS9nM16QS .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-0TOSPjtBS9nM16QS .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-0TOSPjtBS9nM16QS .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS .section{stroke:none;opacity:0.2}#mermaid-svg-0TOSPjtBS9nM16QS .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-0TOSPjtBS9nM16QS .section2{fill:#fff400}#mermaid-svg-0TOSPjtBS9nM16QS .section1,#mermaid-svg-0TOSPjtBS9nM16QS .section3{fill:#fff;opacity:0.2}#mermaid-svg-0TOSPjtBS9nM16QS .sectionTitle0{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS .sectionTitle1{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS .sectionTitle2{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS .sectionTitle3{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-0TOSPjtBS9nM16QS .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS .grid path{stroke-width:0}#mermaid-svg-0TOSPjtBS9nM16QS .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-0TOSPjtBS9nM16QS .task{stroke-width:2}#mermaid-svg-0TOSPjtBS9nM16QS .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS .taskText:not([font-size]){font-size:11px}#mermaid-svg-0TOSPjtBS9nM16QS .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-0TOSPjtBS9nM16QS .task.clickable{cursor:pointer}#mermaid-svg-0TOSPjtBS9nM16QS .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-0TOSPjtBS9nM16QS .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-0TOSPjtBS9nM16QS .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-0TOSPjtBS9nM16QS .taskText0,#mermaid-svg-0TOSPjtBS9nM16QS .taskText1,#mermaid-svg-0TOSPjtBS9nM16QS .taskText2,#mermaid-svg-0TOSPjtBS9nM16QS .taskText3{fill:#fff}#mermaid-svg-0TOSPjtBS9nM16QS .task0,#mermaid-svg-0TOSPjtBS9nM16QS .task1,#mermaid-svg-0TOSPjtBS9nM16QS .task2,#mermaid-svg-0TOSPjtBS9nM16QS .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-0TOSPjtBS9nM16QS .taskTextOutside0,#mermaid-svg-0TOSPjtBS9nM16QS .taskTextOutside2{fill:#000}#mermaid-svg-0TOSPjtBS9nM16QS .taskTextOutside1,#mermaid-svg-0TOSPjtBS9nM16QS .taskTextOutside3{fill:#000}#mermaid-svg-0TOSPjtBS9nM16QS .active0,#mermaid-svg-0TOSPjtBS9nM16QS .active1,#mermaid-svg-0TOSPjtBS9nM16QS .active2,#mermaid-svg-0TOSPjtBS9nM16QS .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-0TOSPjtBS9nM16QS .activeText0,#mermaid-svg-0TOSPjtBS9nM16QS .activeText1,#mermaid-svg-0TOSPjtBS9nM16QS .activeText2,#mermaid-svg-0TOSPjtBS9nM16QS .activeText3{fill:#000 !important}#mermaid-svg-0TOSPjtBS9nM16QS .done0,#mermaid-svg-0TOSPjtBS9nM16QS .done1,#mermaid-svg-0TOSPjtBS9nM16QS .done2,#mermaid-svg-0TOSPjtBS9nM16QS .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-0TOSPjtBS9nM16QS .doneText0,#mermaid-svg-0TOSPjtBS9nM16QS .doneText1,#mermaid-svg-0TOSPjtBS9nM16QS .doneText2,#mermaid-svg-0TOSPjtBS9nM16QS .doneText3{fill:#000 !important}#mermaid-svg-0TOSPjtBS9nM16QS .crit0,#mermaid-svg-0TOSPjtBS9nM16QS .crit1,#mermaid-svg-0TOSPjtBS9nM16QS .crit2,#mermaid-svg-0TOSPjtBS9nM16QS .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-0TOSPjtBS9nM16QS .activeCrit0,#mermaid-svg-0TOSPjtBS9nM16QS .activeCrit1,#mermaid-svg-0TOSPjtBS9nM16QS .activeCrit2,#mermaid-svg-0TOSPjtBS9nM16QS .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-0TOSPjtBS9nM16QS .doneCrit0,#mermaid-svg-0TOSPjtBS9nM16QS .doneCrit1,#mermaid-svg-0TOSPjtBS9nM16QS .doneCrit2,#mermaid-svg-0TOSPjtBS9nM16QS .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-0TOSPjtBS9nM16QS .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-0TOSPjtBS9nM16QS .milestoneText{font-style:italic}#mermaid-svg-0TOSPjtBS9nM16QS .doneCritText0,#mermaid-svg-0TOSPjtBS9nM16QS .doneCritText1,#mermaid-svg-0TOSPjtBS9nM16QS .doneCritText2,#mermaid-svg-0TOSPjtBS9nM16QS .doneCritText3{fill:#000 !important}#mermaid-svg-0TOSPjtBS9nM16QS .activeCritText0,#mermaid-svg-0TOSPjtBS9nM16QS .activeCritText1,#mermaid-svg-0TOSPjtBS9nM16QS .activeCritText2,#mermaid-svg-0TOSPjtBS9nM16QS .activeCritText3{fill:#000 !important}#mermaid-svg-0TOSPjtBS9nM16QS .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-0TOSPjtBS9nM16QS g.classGroup text .title{font-weight:bolder}#mermaid-svg-0TOSPjtBS9nM16QS g.clickable{cursor:pointer}#mermaid-svg-0TOSPjtBS9nM16QS g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-0TOSPjtBS9nM16QS g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-0TOSPjtBS9nM16QS .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-0TOSPjtBS9nM16QS .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-0TOSPjtBS9nM16QS .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-0TOSPjtBS9nM16QS .dashed-line{stroke-dasharray:3}#mermaid-svg-0TOSPjtBS9nM16QS #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0TOSPjtBS9nM16QS #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0TOSPjtBS9nM16QS #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-0TOSPjtBS9nM16QS #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-0TOSPjtBS9nM16QS #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0TOSPjtBS9nM16QS #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0TOSPjtBS9nM16QS #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0TOSPjtBS9nM16QS #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0TOSPjtBS9nM16QS .commit-id,#mermaid-svg-0TOSPjtBS9nM16QS .commit-msg,#mermaid-svg-0TOSPjtBS9nM16QS .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-0TOSPjtBS9nM16QS g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-0TOSPjtBS9nM16QS g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-0TOSPjtBS9nM16QS g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-0TOSPjtBS9nM16QS .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-0TOSPjtBS9nM16QS .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-0TOSPjtBS9nM16QS .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-0TOSPjtBS9nM16QS .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-0TOSPjtBS9nM16QS .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-0TOSPjtBS9nM16QS .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-0TOSPjtBS9nM16QS .edgeLabel text{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0TOSPjtBS9nM16QS .node circle.state-start{fill:black;stroke:black}#mermaid-svg-0TOSPjtBS9nM16QS .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-0TOSPjtBS9nM16QS #statediagram-barbEnd{fill:#9370db}#mermaid-svg-0TOSPjtBS9nM16QS .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-0TOSPjtBS9nM16QS .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-0TOSPjtBS9nM16QS .statediagram-state .divider{stroke:#9370db}#mermaid-svg-0TOSPjtBS9nM16QS .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-0TOSPjtBS9nM16QS .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-0TOSPjtBS9nM16QS .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-0TOSPjtBS9nM16QS .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-0TOSPjtBS9nM16QS .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-0TOSPjtBS9nM16QS .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-0TOSPjtBS9nM16QS .note-edge{stroke-dasharray:5}#mermaid-svg-0TOSPjtBS9nM16QS .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-0TOSPjtBS9nM16QS .error-icon{fill:#522}#mermaid-svg-0TOSPjtBS9nM16QS .error-text{fill:#522;stroke:#522}#mermaid-svg-0TOSPjtBS9nM16QS .edge-thickness-normal{stroke-width:2px}#mermaid-svg-0TOSPjtBS9nM16QS .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-0TOSPjtBS9nM16QS .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-0TOSPjtBS9nM16QS .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-0TOSPjtBS9nM16QS .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-0TOSPjtBS9nM16QS .marker{fill:#333}#mermaid-svg-0TOSPjtBS9nM16QS .marker.cross{stroke:#333}
:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-0TOSPjtBS9nM16QS {
color: rgba(0, 0, 0, 0.75);
font: ;
}
user
order
product
delivery-address
place
contains
uses
erDiagram
user||--o{ order: place
order||--|{ product : contains
user}|..|{ delivery-address : uses
Value (left)Value (right)含义
|oo|0或1||||1}oo{0或多}||{1或多
6. 甘特图
甘特图是一种条形图，最初由卡罗尔·阿达米茨基于1896年开发，1910年代由亨利·甘特独立开发，它说明了项目进度和完成任何项目所花的时间。甘特图说明了terminal元素 and summary元素的开始日期到完成日期之间的天数
Mon 11
Mon 18
Mon 25
June
Mon 08
项目设计
问卷设计
试访
问卷确定
实地执行
数据录入
数据分析
报告提交
实践课程
工作计划表
gantt
dateFormat YYYY-MM-DD
title 工作计划表
section 实践课程
项目设计 :done, des1, 2020-05-08, 2020-05-13
问卷设计 :active, des2, 2020-05-11, 3d
试访 : des3, after des1, 3d
问卷确定 : des4, 2020-05-15, 1d
实地执行 : des5, 2020-05-16, 2020-05-26
数据录入 : des6, after des5, 4d
数据分析 : des7, after des6, 2020-06-03
报告提交 : des8, after des7, 5d
7. 用户旅程图
用户旅程图以高度详细的方式描述不同用户在系统、应用程序或网站内完成特定任务所采取的步骤。此技术显示当前（原样）的用户工作流，并揭示未来工作流的改进区域
#mermaid-svg-37BW2nMYbiOD1t5a .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-37BW2nMYbiOD1t5a .label text{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a .node rect,#mermaid-svg-37BW2nMYbiOD1t5a .node circle,#mermaid-svg-37BW2nMYbiOD1t5a .node ellipse,#mermaid-svg-37BW2nMYbiOD1t5a .node polygon,#mermaid-svg-37BW2nMYbiOD1t5a .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-37BW2nMYbiOD1t5a .node .label{text-align:center;fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a .node.clickable{cursor:pointer}#mermaid-svg-37BW2nMYbiOD1t5a .arrowheadPath{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-37BW2nMYbiOD1t5a .flowchart-link{stroke:#333;fill:none}#mermaid-svg-37BW2nMYbiOD1t5a .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-37BW2nMYbiOD1t5a .edgeLabel rect{opacity:0.9}#mermaid-svg-37BW2nMYbiOD1t5a .edgeLabel span{color:#333}#mermaid-svg-37BW2nMYbiOD1t5a .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-37BW2nMYbiOD1t5a .cluster text{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a 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-37BW2nMYbiOD1t5a .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-37BW2nMYbiOD1t5a text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-37BW2nMYbiOD1t5a .actor-line{stroke:grey}#mermaid-svg-37BW2nMYbiOD1t5a .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-37BW2nMYbiOD1t5a .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-37BW2nMYbiOD1t5a #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-37BW2nMYbiOD1t5a .sequenceNumber{fill:#fff}#mermaid-svg-37BW2nMYbiOD1t5a #sequencenumber{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a #crosshead path{fill:#333;stroke:#333}#mermaid-svg-37BW2nMYbiOD1t5a .messageText{fill:#333;stroke:#333}#mermaid-svg-37BW2nMYbiOD1t5a .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-37BW2nMYbiOD1t5a .labelText,#mermaid-svg-37BW2nMYbiOD1t5a .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-37BW2nMYbiOD1t5a .loopText,#mermaid-svg-37BW2nMYbiOD1t5a .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-37BW2nMYbiOD1t5a .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-37BW2nMYbiOD1t5a .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-37BW2nMYbiOD1t5a .noteText,#mermaid-svg-37BW2nMYbiOD1t5a .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-37BW2nMYbiOD1t5a .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-37BW2nMYbiOD1t5a .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-37BW2nMYbiOD1t5a .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-37BW2nMYbiOD1t5a .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a .section{stroke:none;opacity:0.2}#mermaid-svg-37BW2nMYbiOD1t5a .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-37BW2nMYbiOD1t5a .section2{fill:#fff400}#mermaid-svg-37BW2nMYbiOD1t5a .section1,#mermaid-svg-37BW2nMYbiOD1t5a .section3{fill:#fff;opacity:0.2}#mermaid-svg-37BW2nMYbiOD1t5a .sectionTitle0{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a .sectionTitle1{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a .sectionTitle2{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a .sectionTitle3{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-37BW2nMYbiOD1t5a .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a .grid path{stroke-width:0}#mermaid-svg-37BW2nMYbiOD1t5a .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-37BW2nMYbiOD1t5a .task{stroke-width:2}#mermaid-svg-37BW2nMYbiOD1t5a .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a .taskText:not([font-size]){font-size:11px}#mermaid-svg-37BW2nMYbiOD1t5a .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-37BW2nMYbiOD1t5a .task.clickable{cursor:pointer}#mermaid-svg-37BW2nMYbiOD1t5a .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-37BW2nMYbiOD1t5a .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-37BW2nMYbiOD1t5a .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-37BW2nMYbiOD1t5a .taskText0,#mermaid-svg-37BW2nMYbiOD1t5a .taskText1,#mermaid-svg-37BW2nMYbiOD1t5a .taskText2,#mermaid-svg-37BW2nMYbiOD1t5a .taskText3{fill:#fff}#mermaid-svg-37BW2nMYbiOD1t5a .task0,#mermaid-svg-37BW2nMYbiOD1t5a .task1,#mermaid-svg-37BW2nMYbiOD1t5a .task2,#mermaid-svg-37BW2nMYbiOD1t5a .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-37BW2nMYbiOD1t5a .taskTextOutside0,#mermaid-svg-37BW2nMYbiOD1t5a .taskTextOutside2{fill:#000}#mermaid-svg-37BW2nMYbiOD1t5a .taskTextOutside1,#mermaid-svg-37BW2nMYbiOD1t5a .taskTextOutside3{fill:#000}#mermaid-svg-37BW2nMYbiOD1t5a .active0,#mermaid-svg-37BW2nMYbiOD1t5a .active1,#mermaid-svg-37BW2nMYbiOD1t5a .active2,#mermaid-svg-37BW2nMYbiOD1t5a .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-37BW2nMYbiOD1t5a .activeText0,#mermaid-svg-37BW2nMYbiOD1t5a .activeText1,#mermaid-svg-37BW2nMYbiOD1t5a .activeText2,#mermaid-svg-37BW2nMYbiOD1t5a .activeText3{fill:#000 !important}#mermaid-svg-37BW2nMYbiOD1t5a .done0,#mermaid-svg-37BW2nMYbiOD1t5a .done1,#mermaid-svg-37BW2nMYbiOD1t5a .done2,#mermaid-svg-37BW2nMYbiOD1t5a .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-37BW2nMYbiOD1t5a .doneText0,#mermaid-svg-37BW2nMYbiOD1t5a .doneText1,#mermaid-svg-37BW2nMYbiOD1t5a .doneText2,#mermaid-svg-37BW2nMYbiOD1t5a .doneText3{fill:#000 !important}#mermaid-svg-37BW2nMYbiOD1t5a .crit0,#mermaid-svg-37BW2nMYbiOD1t5a .crit1,#mermaid-svg-37BW2nMYbiOD1t5a .crit2,#mermaid-svg-37BW2nMYbiOD1t5a .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-37BW2nMYbiOD1t5a .activeCrit0,#mermaid-svg-37BW2nMYbiOD1t5a .activeCrit1,#mermaid-svg-37BW2nMYbiOD1t5a .activeCrit2,#mermaid-svg-37BW2nMYbiOD1t5a .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-37BW2nMYbiOD1t5a .doneCrit0,#mermaid-svg-37BW2nMYbiOD1t5a .doneCrit1,#mermaid-svg-37BW2nMYbiOD1t5a .doneCrit2,#mermaid-svg-37BW2nMYbiOD1t5a .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-37BW2nMYbiOD1t5a .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-37BW2nMYbiOD1t5a .milestoneText{font-style:italic}#mermaid-svg-37BW2nMYbiOD1t5a .doneCritText0,#mermaid-svg-37BW2nMYbiOD1t5a .doneCritText1,#mermaid-svg-37BW2nMYbiOD1t5a .doneCritText2,#mermaid-svg-37BW2nMYbiOD1t5a .doneCritText3{fill:#000 !important}#mermaid-svg-37BW2nMYbiOD1t5a .activeCritText0,#mermaid-svg-37BW2nMYbiOD1t5a .activeCritText1,#mermaid-svg-37BW2nMYbiOD1t5a .activeCritText2,#mermaid-svg-37BW2nMYbiOD1t5a .activeCritText3{fill:#000 !important}#mermaid-svg-37BW2nMYbiOD1t5a .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-37BW2nMYbiOD1t5a g.classGroup text .title{font-weight:bolder}#mermaid-svg-37BW2nMYbiOD1t5a g.clickable{cursor:pointer}#mermaid-svg-37BW2nMYbiOD1t5a g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-37BW2nMYbiOD1t5a g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-37BW2nMYbiOD1t5a .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-37BW2nMYbiOD1t5a .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-37BW2nMYbiOD1t5a .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-37BW2nMYbiOD1t5a .dashed-line{stroke-dasharray:3}#mermaid-svg-37BW2nMYbiOD1t5a #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-37BW2nMYbiOD1t5a #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-37BW2nMYbiOD1t5a #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-37BW2nMYbiOD1t5a #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-37BW2nMYbiOD1t5a #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-37BW2nMYbiOD1t5a #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-37BW2nMYbiOD1t5a #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-37BW2nMYbiOD1t5a #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-37BW2nMYbiOD1t5a .commit-id,#mermaid-svg-37BW2nMYbiOD1t5a .commit-msg,#mermaid-svg-37BW2nMYbiOD1t5a .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-37BW2nMYbiOD1t5a g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-37BW2nMYbiOD1t5a g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-37BW2nMYbiOD1t5a g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-37BW2nMYbiOD1t5a .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-37BW2nMYbiOD1t5a .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-37BW2nMYbiOD1t5a .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-37BW2nMYbiOD1t5a .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-37BW2nMYbiOD1t5a .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-37BW2nMYbiOD1t5a .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-37BW2nMYbiOD1t5a .edgeLabel text{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-37BW2nMYbiOD1t5a .node circle.state-start{fill:black;stroke:black}#mermaid-svg-37BW2nMYbiOD1t5a .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-37BW2nMYbiOD1t5a #statediagram-barbEnd{fill:#9370db}#mermaid-svg-37BW2nMYbiOD1t5a .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-37BW2nMYbiOD1t5a .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-37BW2nMYbiOD1t5a .statediagram-state .divider{stroke:#9370db}#mermaid-svg-37BW2nMYbiOD1t5a .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-37BW2nMYbiOD1t5a .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-37BW2nMYbiOD1t5a .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-37BW2nMYbiOD1t5a .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-37BW2nMYbiOD1t5a .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-37BW2nMYbiOD1t5a .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-37BW2nMYbiOD1t5a .note-edge{stroke-dasharray:5}#mermaid-svg-37BW2nMYbiOD1t5a .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-37BW2nMYbiOD1t5a .error-icon{fill:#522}#mermaid-svg-37BW2nMYbiOD1t5a .error-text{fill:#522;stroke:#522}#mermaid-svg-37BW2nMYbiOD1t5a .edge-thickness-normal{stroke-width:2px}#mermaid-svg-37BW2nMYbiOD1t5a .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-37BW2nMYbiOD1t5a .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-37BW2nMYbiOD1t5a .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-37BW2nMYbiOD1t5a .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-37BW2nMYbiOD1t5a .marker{fill:#333}#mermaid-svg-37BW2nMYbiOD1t5a .marker.cross{stroke:#333}
:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-37BW2nMYbiOD1t5a {
color: rgba(0, 0, 0, 0.75);
font: ;
}
我
猫
去工作
去工作
我
泡茶
泡茶
我
上楼
上楼
我
猫
工作
工作
回家
回家
我
下楼
下楼
我
坐下
坐下
我的一天
journey
title 我的一天
section 去工作
泡茶: 5: 我
上楼: 3: 我
工作: 1: 我, 猫
section 回家
下楼: 5: 我
坐下: 5: 我
8. 状态图
状态图是一种用于计算机科学和相关领域的图表，用于描述系统的行为。状态图要求描述的系统由有限数量的状态组成;有时，确实是这样， 但在其他时候， 是一个合理的抽象。 Mermaid 中状态图语法和plantuml一致,具体细节可以查看文档
#mermaid-svg-uVJx9Jg3BJgxX51v .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .label text{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .node rect,#mermaid-svg-uVJx9Jg3BJgxX51v .node circle,#mermaid-svg-uVJx9Jg3BJgxX51v .node ellipse,#mermaid-svg-uVJx9Jg3BJgxX51v .node polygon,#mermaid-svg-uVJx9Jg3BJgxX51v .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-uVJx9Jg3BJgxX51v .node .label{text-align:center;fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .node.clickable{cursor:pointer}#mermaid-svg-uVJx9Jg3BJgxX51v .arrowheadPath{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-uVJx9Jg3BJgxX51v .flowchart-link{stroke:#333;fill:none}#mermaid-svg-uVJx9Jg3BJgxX51v .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-uVJx9Jg3BJgxX51v .edgeLabel rect{opacity:0.9}#mermaid-svg-uVJx9Jg3BJgxX51v .edgeLabel span{color:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-uVJx9Jg3BJgxX51v .cluster text{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v 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-uVJx9Jg3BJgxX51v .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-uVJx9Jg3BJgxX51v text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-uVJx9Jg3BJgxX51v .actor-line{stroke:grey}#mermaid-svg-uVJx9Jg3BJgxX51v .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-uVJx9Jg3BJgxX51v #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .sequenceNumber{fill:#fff}#mermaid-svg-uVJx9Jg3BJgxX51v #sequencenumber{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v #crosshead path{fill:#333;stroke:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .messageText{fill:#333;stroke:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-uVJx9Jg3BJgxX51v .labelText,#mermaid-svg-uVJx9Jg3BJgxX51v .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-uVJx9Jg3BJgxX51v .loopText,#mermaid-svg-uVJx9Jg3BJgxX51v .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-uVJx9Jg3BJgxX51v .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-uVJx9Jg3BJgxX51v .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-uVJx9Jg3BJgxX51v .noteText,#mermaid-svg-uVJx9Jg3BJgxX51v .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-uVJx9Jg3BJgxX51v .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-uVJx9Jg3BJgxX51v .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-uVJx9Jg3BJgxX51v .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-uVJx9Jg3BJgxX51v .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v .section{stroke:none;opacity:0.2}#mermaid-svg-uVJx9Jg3BJgxX51v .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-uVJx9Jg3BJgxX51v .section2{fill:#fff400}#mermaid-svg-uVJx9Jg3BJgxX51v .section1,#mermaid-svg-uVJx9Jg3BJgxX51v .section3{fill:#fff;opacity:0.2}#mermaid-svg-uVJx9Jg3BJgxX51v .sectionTitle0{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .sectionTitle1{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .sectionTitle2{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .sectionTitle3{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-uVJx9Jg3BJgxX51v .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v .grid path{stroke-width:0}#mermaid-svg-uVJx9Jg3BJgxX51v .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-uVJx9Jg3BJgxX51v .task{stroke-width:2}#mermaid-svg-uVJx9Jg3BJgxX51v .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v .taskText:not([font-size]){font-size:11px}#mermaid-svg-uVJx9Jg3BJgxX51v .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-uVJx9Jg3BJgxX51v .task.clickable{cursor:pointer}#mermaid-svg-uVJx9Jg3BJgxX51v .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-uVJx9Jg3BJgxX51v .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-uVJx9Jg3BJgxX51v .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-uVJx9Jg3BJgxX51v .taskText0,#mermaid-svg-uVJx9Jg3BJgxX51v .taskText1,#mermaid-svg-uVJx9Jg3BJgxX51v .taskText2,#mermaid-svg-uVJx9Jg3BJgxX51v .taskText3{fill:#fff}#mermaid-svg-uVJx9Jg3BJgxX51v .task0,#mermaid-svg-uVJx9Jg3BJgxX51v .task1,#mermaid-svg-uVJx9Jg3BJgxX51v .task2,#mermaid-svg-uVJx9Jg3BJgxX51v .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-uVJx9Jg3BJgxX51v .taskTextOutside0,#mermaid-svg-uVJx9Jg3BJgxX51v .taskTextOutside2{fill:#000}#mermaid-svg-uVJx9Jg3BJgxX51v .taskTextOutside1,#mermaid-svg-uVJx9Jg3BJgxX51v .taskTextOutside3{fill:#000}#mermaid-svg-uVJx9Jg3BJgxX51v .active0,#mermaid-svg-uVJx9Jg3BJgxX51v .active1,#mermaid-svg-uVJx9Jg3BJgxX51v .active2,#mermaid-svg-uVJx9Jg3BJgxX51v .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-uVJx9Jg3BJgxX51v .activeText0,#mermaid-svg-uVJx9Jg3BJgxX51v .activeText1,#mermaid-svg-uVJx9Jg3BJgxX51v .activeText2,#mermaid-svg-uVJx9Jg3BJgxX51v .activeText3{fill:#000 !important}#mermaid-svg-uVJx9Jg3BJgxX51v .done0,#mermaid-svg-uVJx9Jg3BJgxX51v .done1,#mermaid-svg-uVJx9Jg3BJgxX51v .done2,#mermaid-svg-uVJx9Jg3BJgxX51v .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-uVJx9Jg3BJgxX51v .doneText0,#mermaid-svg-uVJx9Jg3BJgxX51v .doneText1,#mermaid-svg-uVJx9Jg3BJgxX51v .doneText2,#mermaid-svg-uVJx9Jg3BJgxX51v .doneText3{fill:#000 !important}#mermaid-svg-uVJx9Jg3BJgxX51v .crit0,#mermaid-svg-uVJx9Jg3BJgxX51v .crit1,#mermaid-svg-uVJx9Jg3BJgxX51v .crit2,#mermaid-svg-uVJx9Jg3BJgxX51v .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-uVJx9Jg3BJgxX51v .activeCrit0,#mermaid-svg-uVJx9Jg3BJgxX51v .activeCrit1,#mermaid-svg-uVJx9Jg3BJgxX51v .activeCrit2,#mermaid-svg-uVJx9Jg3BJgxX51v .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-uVJx9Jg3BJgxX51v .doneCrit0,#mermaid-svg-uVJx9Jg3BJgxX51v .doneCrit1,#mermaid-svg-uVJx9Jg3BJgxX51v .doneCrit2,#mermaid-svg-uVJx9Jg3BJgxX51v .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-uVJx9Jg3BJgxX51v .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-uVJx9Jg3BJgxX51v .milestoneText{font-style:italic}#mermaid-svg-uVJx9Jg3BJgxX51v .doneCritText0,#mermaid-svg-uVJx9Jg3BJgxX51v .doneCritText1,#mermaid-svg-uVJx9Jg3BJgxX51v .doneCritText2,#mermaid-svg-uVJx9Jg3BJgxX51v .doneCritText3{fill:#000 !important}#mermaid-svg-uVJx9Jg3BJgxX51v .activeCritText0,#mermaid-svg-uVJx9Jg3BJgxX51v .activeCritText1,#mermaid-svg-uVJx9Jg3BJgxX51v .activeCritText2,#mermaid-svg-uVJx9Jg3BJgxX51v .activeCritText3{fill:#000 !important}#mermaid-svg-uVJx9Jg3BJgxX51v .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-uVJx9Jg3BJgxX51v g.classGroup text .title{font-weight:bolder}#mermaid-svg-uVJx9Jg3BJgxX51v g.clickable{cursor:pointer}#mermaid-svg-uVJx9Jg3BJgxX51v g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-uVJx9Jg3BJgxX51v g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-uVJx9Jg3BJgxX51v .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-uVJx9Jg3BJgxX51v .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-uVJx9Jg3BJgxX51v .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-uVJx9Jg3BJgxX51v .dashed-line{stroke-dasharray:3}#mermaid-svg-uVJx9Jg3BJgxX51v #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-uVJx9Jg3BJgxX51v #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-uVJx9Jg3BJgxX51v #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-uVJx9Jg3BJgxX51v #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-uVJx9Jg3BJgxX51v #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-uVJx9Jg3BJgxX51v #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-uVJx9Jg3BJgxX51v #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-uVJx9Jg3BJgxX51v #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-uVJx9Jg3BJgxX51v .commit-id,#mermaid-svg-uVJx9Jg3BJgxX51v .commit-msg,#mermaid-svg-uVJx9Jg3BJgxX51v .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-uVJx9Jg3BJgxX51v g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-uVJx9Jg3BJgxX51v g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-uVJx9Jg3BJgxX51v g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-uVJx9Jg3BJgxX51v .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-uVJx9Jg3BJgxX51v .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-uVJx9Jg3BJgxX51v .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-uVJx9Jg3BJgxX51v .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-uVJx9Jg3BJgxX51v .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-uVJx9Jg3BJgxX51v .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-uVJx9Jg3BJgxX51v .edgeLabel text{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-uVJx9Jg3BJgxX51v .node circle.state-start{fill:black;stroke:black}#mermaid-svg-uVJx9Jg3BJgxX51v .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-uVJx9Jg3BJgxX51v #statediagram-barbEnd{fill:#9370db}#mermaid-svg-uVJx9Jg3BJgxX51v .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-uVJx9Jg3BJgxX51v .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-uVJx9Jg3BJgxX51v .statediagram-state .divider{stroke:#9370db}#mermaid-svg-uVJx9Jg3BJgxX51v .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-uVJx9Jg3BJgxX51v .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-uVJx9Jg3BJgxX51v .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-uVJx9Jg3BJgxX51v .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-uVJx9Jg3BJgxX51v .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-uVJx9Jg3BJgxX51v .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-uVJx9Jg3BJgxX51v .note-edge{stroke-dasharray:5}#mermaid-svg-uVJx9Jg3BJgxX51v .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-uVJx9Jg3BJgxX51v .error-icon{fill:#522}#mermaid-svg-uVJx9Jg3BJgxX51v .error-text{fill:#522;stroke:#522}#mermaid-svg-uVJx9Jg3BJgxX51v .edge-thickness-normal{stroke-width:2px}#mermaid-svg-uVJx9Jg3BJgxX51v .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-uVJx9Jg3BJgxX51v .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-uVJx9Jg3BJgxX51v .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-uVJx9Jg3BJgxX51v .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-uVJx9Jg3BJgxX51v .marker{fill:#333}#mermaid-svg-uVJx9Jg3BJgxX51v .marker.cross{stroke:#333}
:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-uVJx9Jg3BJgxX51v {
color: rgba(0, 0, 0, 0.75);
font: ;
}
State2
State3
State4
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
