Markdown流程图绘制

白色玫瑰 程序猿

时间: 2023-07-11 阅读: 1 字数:120396

markdown
{}
一、语法 1. 标准流程图 1）基本框架 1）定义元素 2）建立连接 2. 简约流程图 简约流程图对标准流程图的语法进行了简化，将定义与连接结合起来，更易理解和使用。通过基本框架中的graph LR/graph TD来确定其为横向/...

目录

文章目录

<a href="#_1">一、语法</a>    
 
  <a href="#1__77">1. 标准流程图</a>      
  
   <a href="#1_78">1）定义元素</a>       <a href="#2_87">2）建立连接</a>            <a href="#2__104">2. 简约流程图</a>         <a href="#_131">二、建议</a>

一、语法

流程图的绘制主要基于<a href="https://github.com/adrai/flowchart.js">flowchart.js</a>和<a href="https://mermaid-js.github.io/mermaid/#/">mermaid.js</a>。当需要在Markdown中绘制流程图时，需要把相关代码放在如下框架中。

 category
 语句

其中category根据流程图的种类不同而不同，其取值如下表所示。

<table> <thead> <tr> <th>流程图种类</th> <th>取值</th> </tr> </thead> <tbody> <tr> <td>标准流程图</td> <td>flowchart</td> </tr> <tr> <td>简约流程图</td> <td>graph LR/TD</td> </tr> <tr> <td>UML图</td> <td>sequenceDiagram</td> </tr> <tr> <td>甘特图</td> <td>gantt</td> </tr> <tr> <td>类图</td> <td>classDiagram</td> </tr> </tbody> </table>nn 由于前两种使用较为广泛，故只介绍flowchart和graph LR/TD。各种类流程图范例如下所示：

标准流程图

<svg height="360.2500033378601" version="1.1" width="136" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;" viewbox="0 0 136 360.2500033378601" preserveaspectratio="xMidYMid meet"> <desc> Created with Raphaël 2.2.0 </desc> <defs> <marker id="raphael-marker-endblock33-objlwxa2" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none"></use> </marker> <marker id="raphael-marker-endblock33-objgcoqa" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none"></use> </marker> <marker id="raphael-marker-endblock33-objgvxkx" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none"></use> </marker> <marker id="raphael-marker-endblock33-obj4d6bh" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none"></use> </marker> </defs> <rect x="0" y="0" width="48" height="38.33333396911621" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="" stroke-width="1" class="flowchart" id="st" transform="matrix(1,0,0,1,32,11.5833)"></rect> <text style="text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" x="10" y="19.166666984558105" text-anchor="start" font-size="14px" stroke="none" fill="#000000" id="stt" class="flowchartt" transform="matrix(1,0,0,1,32,11.5833)" stroke-width="1"> <tspan dy="5.499999046325684"> 开始 </tspan> </text> <rect x="0" y="0" width="76" height="38.33333396911621" rx="0" ry="0" fill="#ffffff" stroke="#000000" style="" stroke-width="1" class="flowchart" id="op" transform="matrix(1,0,0,1,18,111.5)"></rect> <text style="text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" x="10" y="19.166666984558105" text-anchor="start" font-size="14px" stroke="none" fill="#000000" id="opt" class="flowchartt" transform="matrix(1,0,0,1,18,111.5)" stroke-width="1"> <tspan dy="5.499999046325684"> 我的操作 </tspan> </text> </path> <text style="text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" x="32" y="28.750000476837158" text-anchor="start" font-size="14px" stroke="none" fill="#000000" id="condt" class="flowchartt" transform="matrix(1,0,0,1,2,201.8333)" stroke-width="1"> <tspan dy="5.500000476837158"> 确认？ </tspan> </text> <rect x="0" y="0" width="48" height="38.33333396911621" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="" stroke-width="1" class="flowchart" id="e" transform="matrix(1,0,0,1,32,320.9167)"></rect> <text style="text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" x="10" y="19.166666984558105" text-anchor="start" font-size="14px" stroke="none" fill="#000000" id="et" class="flowchartt" transform="matrix(1,0,0,1,32,320.9167)" stroke-width="1"> <tspan dy="5.499999046325684"> 结束 </tspan> </text> </path> </path> </path> <text style="text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" x="61" y="269.33333587646484" text-anchor="start" font-size="14px" stroke="none" fill="#000000" stroke-width="1"> <tspan dy="4.766667366027832"> yes </tspan> </text> </path> <text style="text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" x="115" y="220.58333539962769" text-anchor="start" font-size="14px" stroke="none" fill="#000000" stroke-width="1"> <tspan dy="4.766666889190674"> no </tspan> </text> </svg>

简约流程图

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

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}</style> <style>#mermaid-svg-nZG7TE8mdCeUrGmW { color: rgba(0, 0, 0, 0.75); font: ; }</style> <g> <g class="output"> <g class="clusters"></g> <g class="edgePaths"> <g class="edgePath LS-A LE-B" style="opacity: 1;" id="L-A-B">

</path> <defs> <marker id="arrowhead92" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-A LE-C" style="opacity: 1;" id="L-A-C">

</path> <defs> <marker id="arrowhead93" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-B LE-D" style="opacity: 1;" id="L-B-D">

</path> <defs> <marker id="arrowhead94" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-C LE-D" style="opacity: 1;" id="L-C-D">

</path> <defs> <marker id="arrowhead95" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> </g> <g class="edgeLabels"> <g class="edgeLabel" style="opacity: 1;" transform="translate(117,31)"> <g transform="translate(-16,-13)" class="label"> <rect rx="0" ry="0" width="32" height="26" style="fill:#e8e8e8;"></rect> <foreignobject width="32" height="26"> 链接
</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> </g> <g class="nodes"> <g class="node default" style="opacity: 1;" id="A" transform="translate(42,79)"> <rect rx="0" ry="0" x="-34" y="-23" width="68" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-24,-13)"> <foreignobject width="48" height="26">
长方形
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="B" transform="translate(208,31)"> <circle x="-18" y="-23" r="23" class="label-container"></circle> <g class="label" transform="translate(0,0)"> <g transform="translate(-8,-13)"> <foreignobject width="16" height="26">
圆
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="C" transform="translate(208,127)"> <rect rx="5" ry="5" x="-50" y="-23" width="100" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-40,-13)"> <foreignobject width="80" height="26">
圆角长方形
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="D" transform="translate(352.0999984741211,79)">

</polygon> <g class="label" transform="translate(0,0)"> <g transform="translate(-16,-13)"> <foreignobject width="32" height="26">
菱形
</foreignobject> </g> </g> </g> </g>

</g> </g> </svg>

UML图

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

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}</style> <style>#mermaid-svg-KOxgUmCB5Rt1xKp7 { color: rgba(0, 0, 0, 0.75); font: ; }</style> <g></g> <g> </line> <rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="75" y="32.5" style="text-anchor: middle; font-weight: 400; font-family: "Open-Sans", "sans-serif";" dominant-baseline="central" alignment-baseline="central" class="actor"> <tspan x="75" dy="0"> 张三 </tspan> </text> </g> <g> </line> <rect x="247" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="322" y="32.5" style="text-anchor: middle; font-weight: 400; font-family: "Open-Sans", "sans-serif";" dominant-baseline="central" alignment-baseline="central" class="actor"> <tspan x="322" dy="0"> 李四 </tspan> </text> </g> <g> </line> <rect x="477" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="552" y="32.5" style="text-anchor: middle; font-weight: 400; font-family: "Open-Sans", "sans-serif";" dominant-baseline="central" alignment-baseline="central" class="actor"> <tspan x="552" dy="0"> 王五 </tspan> </text> </g> <defs> <marker id="arrowhead" refx="5" refy="2" markerwidth="6" markerheight="4" orient="auto">

</path> </marker> </defs> <defs> <marker id="crosshead" markerwidth="15" markerheight="8" orient="auto" refx="16" refy="4">

</path>

</path> </marker> </defs> <defs> <marker id="sequencenumber" refx="15" refy="15" markerwidth="60" markerheight="40" orient="auto"> <circle cx="15" cy="15" r="6"></circle> </marker> </defs> <text x="199" y="80" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" style="font-family: "trebuchet ms", verdana, arial; font-weight: 400;" class="messageText" dy="1em"> 你好！李四, 最近怎么样? </text> </line> <text x="437" y="132" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" style="font-family: "trebuchet ms", verdana, arial; font-weight: 400;" class="messageText" dy="1em"> 你最近怎么样，王五？ </text> </line> <text x="199" y="184" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" style="font-family: "trebuchet ms", verdana, arial; font-weight: 400;" class="messageText" dy="1em"> 我很好，谢谢! </text> </line> <text x="437" y="236" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" style="font-family: "trebuchet ms", verdana, arial; font-weight: 400;" class="messageText" dy="1em"> 我很好，谢谢! </text> </line> <g> <rect x="577" y="283" fill="#EDF2AE" stroke="#666" width="219" height="63" rx="0" ry="0" class="note"></rect> <text x="687" y="288" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" style="font-family: "trebuchet ms", verdana, arial; font-weight: 400;" class="noteText" dy="1em"> <tspan x="687"> 李四想了很长时间, 文字太长了 </tspan> </text> <text x="687" y="309" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" style="font-family: "trebuchet ms", verdana, arial; font-weight: 400;" class="noteText" dy="1em"> <tspan x="687"> 不适合放在一行. </tspan> </text> </g> <text x="199" y="361" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" style="font-family: "trebuchet ms", verdana, arial; font-weight: 400;" class="messageText" dy="1em"> 打量着王五... </text> </line> <text x="314" y="413" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" style="font-family: "trebuchet ms", verdana, arial; font-weight: 400;" class="messageText" dy="1em"> 很好... 王五, 你怎么样? </text> </line> <g> <rect x="0" y="470" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="75" y="502.5" style="text-anchor: middle; font-weight: 400; font-family: "Open-Sans", "sans-serif";" dominant-baseline="central" alignment-baseline="central" class="actor"> <tspan x="75" dy="0"> 张三 </tspan> </text> </g> <g> <rect x="247" y="470" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="322" y="502.5" style="text-anchor: middle; font-weight: 400; font-family: "Open-Sans", "sans-serif";" dominant-baseline="central" alignment-baseline="central" class="actor"> <tspan x="322" dy="0"> 李四 </tspan> </text> </g> <g> <rect x="477" y="470" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="552" y="502.5" style="text-anchor: middle; font-weight: 400; font-family: "Open-Sans", "sans-serif";" dominant-baseline="central" alignment-baseline="central" class="actor"> <tspan x="552" dy="0"> 王五 </tspan> </text> </g> </svg>

甘特图

<svg xmlns="http://www.w3.org/2000/svg" id="mermaid-svg-APRO8P3o72HdbyLw" height="100%" viewbox="0 0 500 172"> <g></g> <g class="grid" transform="translate(75, 122)"> <g class="tick" style="opacity: 1;" transform="translate(0,0)"> </line> <text dy="1em" style="text-anchor: middle;" y="3" x="0" fill="#000" stroke="none" font-size="10"> Mon 06 </text> </g> <g class="tick" style="opacity: 1;" transform="translate(223,0)"> </line> <text dy="1em" style="text-anchor: middle;" y="3" x="0" fill="#000" stroke="none" font-size="10"> Mon 13 </text> </g>

</path> </g> <g> <rect x="0" y="48" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="72" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="96" width="462.5" height="24" class="section section0"></rect> </g> <g> <rect rx="3" ry="3" x="75" y="50" width="64" height="20" class="task done0"></rect> <rect rx="3" ry="3" x="170" y="74" width="96" height="20" class="task active0"></rect> <rect rx="3" ry="3" x="266" y="98" width="159" height="20" class="task task0"></rect> <text font-size="11" x="107" y="63.5" text-height="20" class="taskText taskText0 doneText0"> 已完成 </text> <text font-size="11" x="218" y="87.5" text-height="20" class="taskText taskText0 activeText0"> 进行中 </text> <text font-size="11" x="345.5" y="111.5" text-height="20" class="taskText taskText0 "> 计划中 </text> </g> <g> <text x="10" y="86" class="sectionTitle sectionTitle0"> 现有任务 </text> </g> <g class="today"> </line> </g> <text x="250" y="25" class="titleText"></text> </svg>

类图

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

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}</style> <style>#mermaid-svg-iFAgZVwlArc6kvpA { color: rgba(0, 0, 0, 0.75); font: ; }</style> <g></g> <defs> <marker id="extensionStart" class="extension" refx="0" refy="7" markerwidth="190" markerheight="240" orient="auto">

</path> </marker> </defs> <defs> <marker id="extensionEnd" refx="19" refy="7" markerwidth="20" markerheight="28" orient="auto">

</path> </marker> </defs> <defs> <marker id="compositionStart" class="extension" refx="0" refy="7" markerwidth="190" markerheight="240" orient="auto">

</path> </marker> </defs> <defs> <marker id="compositionEnd" refx="19" refy="7" markerwidth="20" markerheight="28" orient="auto">

</path> </marker> </defs> <defs> <marker id="aggregationStart" class="extension" refx="0" refy="7" markerwidth="190" markerheight="240" orient="auto">

</path> </marker> </defs> <defs> <marker id="aggregationEnd" refx="19" refy="7" markerwidth="20" markerheight="28" orient="auto">

</path> </marker> </defs> <defs> <marker id="dependencyStart" class="extension" refx="0" refy="7" markerwidth="190" markerheight="240" orient="auto">

</path> </marker> </defs> <defs> <marker id="dependencyEnd" refx="19" refy="7" markerwidth="20" markerheight="28" orient="auto">

</path> </marker> </defs> <g id="classid-Class01-7" class="classGroup " transform="translate(0,0 )"> <rect x="0" y="0" width="100.20000457763672" height="80.20000457763672"></rect> <text y="15" x="0"> <tspan x="23.700002670288086"> «interface» </tspan> <tspan class="title" dy="10" x="32.50000190734863"> Class01 </tspan> </text> </line> <text x="5" y="41.733333587646484" fill="white" class="classText"> <tspan x="5"> int chimp </tspan> <tspan x="5" dy="10"> int gorilla </tspan> </text> </line> <text x="5" y="73.46666717529297" fill="white" class="classText"> <tspan x="5"> size() </tspan> </text> </g> <g id="classid-AveryLongClass-8" class="classGroup " transform="translate(7.333335876464844,144.6666717529297 )"> <rect x="0" y="0" width="85.53333282470703" height="31.266666412353516"></rect> <text y="15" x="0"> <tspan class="title" x="6.099998474121094"> AveryLongClass </tspan> </text> </line> <text x="5" y="31.733333587646484" fill="white" class="classText"></text> </line> <text x="5" y="41.733333587646484" fill="white" class="classText"></text> </g> <g id="classid-Class09-9" class="classGroup " transform="translate(206.16666984558105,24.4666690826416 )"> <rect x="0" y="0" width="47.400001525878906" height="31.266666412353516"></rect> <text y="15" x="0"> <tspan class="title" x="6.100000381469727"> Class09 </tspan> </text> </line> <text x="5" y="31.733333587646484" fill="white" class="classText"></text> </line> <text x="5" y="41.733333587646484" fill="white" class="classText"></text> </g> <g id="classid-C2-10" class="classGroup " transform="translate(142.86666870117188,144.6666717529297 )"> <rect x="0" y="0" width="24.666666984558105" height="31.266666412353516"></rect> <text y="15" x="0"> <tspan class="title" x="6.100000858306885"> C2 </tspan> </text> </line> <text x="5" y="31.733333587646484" fill="white" class="classText"></text> </line> <text x="5" y="41.733333587646484" fill="white" class="classText"></text> </g> <g id="classid-C3-11" class="classGroup " transform="translate(217.5333366394043,144.6666717529297 )"> <rect x="0" y="0" width="24.666666984558105" height="31.266666412353516"></rect> <text y="15" x="0"> <tspan class="title" x="6.100000858306885"> C3 </tspan> </text> </line> <text x="5" y="31.733333587646484" fill="white" class="classText"></text> </line> <text x="5" y="41.733333587646484" fill="white" class="classText"></text> </g> <g id="classid-Class07-12" class="classGroup " transform="translate(292.2000045776367,130.20000457763672 )"> <rect x="0" y="0" width="118.4000015258789" height="60.20000076293945"></rect> <text y="15" x="0"> <tspan class="title" x="41.60000038146973"> Class07 </tspan> </text> </line> <text x="5" y="31.733333587646484" fill="white" class="classText"> <tspan x="5"> Object[] elementData </tspan> </text> </line> <text x="5" y="53.46666717529297" fill="white" class="classText"> <tspan x="5"> equals() </tspan> </text> </g> <g id="classid-Class10-13" class="classGroup " transform="translate(303.56667137145996,5 )"> <rect x="0" y="0" width="70.73333358764648" height="70.20000457763672"></rect> <text y="15" x="0"> <tspan class="title" x="17.76666831970215"> Class10 </tspan> </text> </line> <text x="5" y="31.733333587646484" fill="white" class="classText"> <tspan x="5"> >>service>> </tspan> <tspan x="5" dy="10"> int id </tspan> </text> </line> <text x="5" y="63.46666717529297" fill="white" class="classText"> <tspan x="5"> size() </tspan> </text> </g> </path> <g class="classLabel"> <rect class="box" x="36.96666717529297" y="100.4000015258789" width="27" height="16.733333587646484"></rect> <text class="label" x="50.10000228881836" y="112.4333381652832" fill="red" text-anchor="middle"> Cool </text> </g> </path> <g class="classLabel"> <rect class="box" x="137.5941162109375" y="81.40148162841797" width="62.93333435058594" height="16.733333587646484"></rect> <text class="label" x="168.69412617167131" y="93.4348154365818" fill="red" text-anchor="middle"> Where am i? </text> </g> </path> </path> </svg>

1. 标准流程图

1）定义元素

需要定义元素名称、元素类型及元素内容。基本语法：name=>type: content，如st=>start: 开始,注意冒号后一定要有空格。其中 name 主要用于连接，type 确定框的形状与含义，content 即框中表达的文本内容。元素类型(type)如下表所示：

<table> <thead> <tr> <th>类型</th> <th>表示</th> </tr> </thead> <tbody> <tr> <td>开始/结束框（圆角框）</td> <td>start/end</td> </tr> <tr> <td>运算框（方形框）</td> <td>operation</td> </tr> <tr> <td>输入输出框（平行四边形框）</td> <td>inputoutput</td> </tr> <tr> <td>判断框（菱形框）</td> <td>condition</td> </tr> <tr> <td>子流程（特殊方框）</td> <td>subroutine</td> </tr> </tbody> </table>nn#### 2）建立连接

当只定义元素而没有连接时，画面会显示一片空白，算是预留的画布。当存在连接时，画布上才会显示图像。使用 -> 来表示连接。

 flowchat
 st=>start: 开始
 e=>end: 结束
 op=>operation: 我的操作
 cond=>condition: 确认？
 st->op->cond
 cond(yes)->e
 cond(no)->op

注意：

condition元素使用时要在后面用()括起条件结果，必须是yes/no，即cond(yes)，cond(no)。 除type:后，不要在语句中出现空白字符（空格、制表符等）。 直接输入```flow可以快速创建标准流程图框架。

2. 简约流程图

简约流程图对标准流程图的语法进行了简化，将定义与连接结合起来，更易理解和使用。通过基本框架中的graph LR/graph TD来确定其为横向/纵向。其使用 - -> 来连接不同元素，使用字符定义元素名，括号类型定义元素形状，括号里的文本定义元素内容。不同括号类型如下所示：

<table> <thead> <tr> <th>括号类型</th> <th>含义</th> <th>举例</th> </tr> </thead> <tbody> <tr> <td>[ ]</td> <td>表示方形框（即标准流程图中的运算框）,默认值</td> <td>A[a=1]</td> </tr> <tr> <td>( )</td> <td>表示圆角框（即标准流程图中的开始/结束框）</td> <td>B(结束)</td> </tr> <tr> <td>{ }</td> <td>表示菱形框（即标准流程图中的判断框）</td> <td>C{a>2?}</td> </tr> <tr> <td>| |</td> <td>表示条件结果之一，其后要加上对应执行结果，一般前面与判断框相连</td> <td>C–>|真|a=a+1，C–>|假|a=a-1</td> </tr> </tbody> </table>nn 实例如下所示： 

 graph LR
 A[a=1]–>C{a>2?}
 C–>|真|a=a+1–>B(结束)
 C–>|假|a=a-1–>B(结束)

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

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}</style> <style>#mermaid-svg-g4WcZF4kBlGzfH8t { color: rgba(0, 0, 0, 0.75); font: ; }</style> <g> <g class="output"> <g class="clusters"></g> <g class="edgePaths"> <g class="edgePath LS-A LE-C" style="opacity: 1;" id="L-A-C">

</path> <defs> <marker id="arrowhead125" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-C LE-a=a+1" style="opacity: 1;" id="L-C-a=a+1">

</path> <defs> <marker id="arrowhead126" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-a=a+1 LE-B" style="opacity: 1;" id="L-a=a+1-B">

</path> <defs> <marker id="arrowhead127" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-C LE-a=a-1" style="opacity: 1;" id="L-C-a=a-1">

</path> <defs> <marker id="arrowhead128" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-a=a-1 LE-B" style="opacity: 1;" id="L-a=a-1-B">

</path> <defs> <marker id="arrowhead129" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> </g> <g class="edgeLabels"> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform="translate(229.9949951171875,31)"> <g transform="translate(-8,-13)" class="label"> <rect rx="0" ry="0" width="16" height="26" style="fill:#e8e8e8;"></rect> <foreignobject width="16" height="26"> 真
</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform="translate(229.9949951171875,127)"> <g transform="translate(-8,-13)" class="label"> <rect rx="0" ry="0" width="16" height="26" style="fill:#e8e8e8;"></rect> <foreignobject width="16" height="26"> 假
</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> </g> <g class="nodes"> <g class="node default" style="opacity: 1;" id="A" transform="translate(31.574996948242188,79)"> <rect rx="0" ry="0" x="-23.574996948242188" y="-23" width="47.149993896484375" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-13.574996948242188,-13)"> <foreignobject width="27.149993896484375" height="26">
a=1
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="C" transform="translate(151.07249450683594,79)">

</polygon> <g class="label" transform="translate(0,0)"> <g transform="translate(-18.025001525878906,-13)"> <foreignobject width="36.05000305175781" height="26">
a>2?
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="a=a+1" transform="translate(295.6949920654297,31)"> <rect rx="0" ry="0" x="-32.69999694824219" y="-23" width="65.39999389648438" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-22.699996948242188,-13)"> <foreignobject width="45.399993896484375" height="26">
a=a+1
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="B" transform="translate(404.3949890136719,79)"> <rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-16,-13)"> <foreignobject width="32" height="26">
结束
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="a=a-1" transform="translate(295.6949920654297,127)"> <rect rx="0" ry="0" x="-30.691665649414062" y="-23" width="61.383331298828125" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-20.691665649414062,-13)"> <foreignobject width="41.383331298828125" height="26">
a=a-1
</foreignobject> </g> </g> </g> </g>

</g> </g> </svg>

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

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}</style> <style>#mermaid-svg-DPxGysEsFzMsfKL1 { color: rgba(0, 0, 0, 0.75); font: ; }</style> <g> <g class="output"> <g class="clusters"></g> <g class="edgePaths"> <g class="edgePath LS-A LE-C" style="opacity: 1;" id="L-A-C">

</path> <defs> <marker id="arrowhead150" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-C LE-a=a+1" style="opacity: 1;" id="L-C-a=a+1">

</path> <defs> <marker id="arrowhead151" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-a=a+1 LE-B" style="opacity: 1;" id="L-a=a+1-B">

</path> <defs> <marker id="arrowhead152" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-C LE-a=a-1" style="opacity: 1;" id="L-C-a=a-1">

</path> <defs> <marker id="arrowhead153" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-a=a-1 LE-B" style="opacity: 1;" id="L-a=a-1-B">

</path> <defs> <marker id="arrowhead154" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> </g> <g class="edgeLabels"> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform="translate(40.69999694824219,233.84500122070312)"> <g transform="translate(-8,-13)" class="label"> <rect rx="0" ry="0" width="16" height="26" style="fill:#e8e8e8;"></rect> <foreignobject width="16" height="26"> 真
</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform="translate(154.09165954589844,233.84500122070312)"> <g transform="translate(-8,-13)" class="label"> <rect rx="0" ry="0" width="16" height="26" style="fill:#e8e8e8;"></rect> <foreignobject width="16" height="26"> 假
</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> </g> <g class="nodes"> <g class="node default" style="opacity: 1;" id="A" transform="translate(97.39582824707031,31)"> <rect rx="0" ry="0" x="-23.574996948242188" y="-23" width="47.149993896484375" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-13.574996948242188,-13)"> <foreignobject width="27.149993896484375" height="26">
a=1
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="C" transform="translate(97.39582824707031,149.92250061035156)">

</polygon> <g class="label" transform="translate(0,0)"> <g transform="translate(-18.025001525878906,-13)"> <foreignobject width="36.05000305175781" height="26">
a>2?
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="a=a+1" transform="translate(40.69999694824219,294.8450012207031)"> <rect rx="0" ry="0" x="-32.69999694824219" y="-23" width="65.39999389648438" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-22.699996948242188,-13)"> <foreignobject width="45.399993896484375" height="26">
a=a+1
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="B" transform="translate(97.39582824707031,390.8450012207031)"> <rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-16,-13)"> <foreignobject width="32" height="26">
结束
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="a=a-1" transform="translate(154.09165954589844,294.8450012207031)"> <rect rx="0" ry="0" x="-30.691665649414062" y="-23" width="61.383331298828125" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-20.691665649414062,-13)"> <foreignobject width="41.383331298828125" height="26">
a=a-1
</foreignobject> </g> </g> </g> </g>

</g> </g> </svg>

二、建议

由于使用Markdown绘制流程图较为抽象，更推荐用ProcessOn等工具直接绘制流程图，然后保持为图片，插入到文章中使用，直观且易编辑。对于逻辑较简单，图像要求规范的流程图形，可以尝试使用Markdown编辑器直接绘制流程图。

原文地址：https://blog.csdn.net/weixin_44000192/article/details/114981628?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905823816800180679690%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905823816800180679690&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-20-114981628-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=markdown

本文章网址:https://www.sjxi.cn/detil/e68a8bba48964d6ba6e2f4f33309c16d

打赏作者

本站为非盈利网站，如果您喜欢这篇文章，欢迎支持我们继续运营！

最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复