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

2023-03-14,

关于『进击Markdown』:第四弹

建议缩放90%食用

美人鱼(Mermaid)悄悄的来,又悄悄的走,挥一挥匕首,不留一个活口
又是漫漫画图路...

女士们先生们,大家好!

 我们要接受Markdown和Mermaid的洗礼了呢 

Markdown 语法真香
(日常安利)

( 进击吧!Markdown!)

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

来吧!面对现实!

我们就不废话了

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


阿西,好多图啊

正文开始了

注:编者用的是CSDN-Markdown编辑器(没错它又满血复活了)

声明:本弹所有图表都是CSDN-Markdown编辑器预览截图而来,可放心食用(这些图Visual Studio Code也不支持 (其实是我没装扩展))

Mermaid流程图

所有流程图都由节点、几何形状和边缘、箭头或线条组成
Mermaid 代码定义了这些节点和边的生成和交互方式
它还可以容纳不同的箭头类型、多向箭头以及与子图的链接
重要说明:请勿将 “end” 一词输入为流程图节点
将所有或任何一个字母大写以防止流程图中断,即 “End” 或 “END”

听起来很高大上是不是

一. 基础

(一). 一个节点(默认)

代码:

```mermaid

 graph LR

 id

```

效果:

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

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

id

注:id 是显示在框中的内容

(二). 带有文本的节点

也可以在框中设置与 id 不同的文本
如果多次设置,则将使用该节点的最后一个文本
此外,如果稍后为节点定义边,则可以忽略文本定义
渲染框时将使用先前定义的框

代码:

```mermaid

graph LR

 id1[张三的家]

```

效果:

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

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

张三的家


二. 图

该语句声明了流程图的方向
一下声明图形是从上到下定向的(TD或TB)

代码:

```mermaid

 graph TD

 Start --> Stop

```

效果:

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

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

Start

Stop

这声明了图形从左向右 ( LR)定向

代码:

```mermaid

 graph LR

 Start --> Stop

```

效果:

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

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

Start

Stop


三. 流程图方向

可能的流程图方向是(表格请全屏食用):

名称 说明
TB 从上到下
TD 从上到下
BT 自下而上
RL 从右到左
RL 从左到右

四. 节点形状

(一). 具有圆边的节点

代码:

```mermaid

 graph LR

 id1(This is the text in the box)

```

效果:

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

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

This is the text in the box

(二). 体育场状节点

代码:

```mermaid

 graph LR

 id1([This is the text in the box])

```

效果:

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

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

This is the text in the box

(三). 子程序形状的节点

代码:

```mermaid

 graph LR

 id1[[This is the text in the box]]

```

效果:

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

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

This is the text in the box

(四). 圆柱形状的节点

代码:

```mermaid

 graph LR

 id1[(靓仔盒子)]

```

效果:

(五). 一个圆形的节点

代码:

```mermaid

 graph LR

 id1((某块饼))

```

效果:

(六). 不对称形状的节点

代码:

```mermaid

 graph LR

 id1>某个书签]

```

效果:

注:目前,以上的形状是可能的,它没有镜像,随着将来的版本更新,也许会增加镜像

(七). 菱形节点

代码:

```mermaid

 graph LR

 id1{This is the text in the box}

```

效果:

(八). 一个六边形节点

代码:

```mermaid

 graph LR

 id1{{来自六边形的凝视}}

```

效果:

(九). 平行四边形

代码:

```mermaid

 graph LR

 id1[/来自刀片的凝视/]

```

效果:

(十). 平行四边形(镜像)

代码:

```mermaid

 graph LR

 id1[\来自另一块刀片的凝视]

```

效果:

(十一). 梯形

代码:

```mermaid

 graph LR

 id1[/Christmas]

```

效果:

(十二). 梯形(镜像)

代码:

```mermaid

 graph LR

 id1[\小小托盘/]

```

效果:


五. 节点之间的连接

节点可以通过链接(或边——连接
可以有不同类型的链接或将文本字符串附加到链接

(一). 带箭头的连接

代码:

```mermaid

 graph LR

 A–>B

```

效果:

(二). 一个打开的连接

代码:

```mermaid

 graph LR

 A–>B

```

效果:

(三). 连接上的文字

代码:

```mermaid

 graph LR

 A-- 量子纠缠! —B

```

```mermaid

 graph LR

 A—|This is the text|B

```

效果:

(四). 带有箭头和文本的连接

代码:

```mermaid

emsp;graph LR

  A–>|text|B

```

```mermaid

emsp;graph LR

A-- text -->B

```

效果:

(五). 带有箭头和文本的连接

代码:

```mermaid

emsp;graph LR

  A–>|text|B

```

效果:

(六). 虚线连接

代码:

```mermaid

emsp;graph LR

  A-.->B;

```

效果:

(七). 粗连接

代码:

```mermaid

emsp;graph LR

  A ==> B

```

效果:

(八). 连接连接

可以在同一行中声明多个链接↓↓↓

代码:

```mermaid

emsp;graph LR

  A – text --> B – text2 --> C

```

效果:

也可以在同一行中声明多个节点链接

代码:

```mermaid

emsp;graph LR

  a --> b & c–> d

```

效果:

还可以用一种非常有表现力的方式来描述依赖关系

代码:

```mermaid

emsp;graph TB

  A & B–> C & D

```

效果:

注:

如果您使用基本语法描述相同的图表,它将需要四行
警告,一个人可能会过度使用这使得图表更难以降价形式阅读
我想到了瑞典语 lagom 这个词,意味着,不要太多,也不要太少。这也适用于表达语法

(九). 测试版:新的箭头类型

当使用流程图而不是图形时,支持新类型的箭头

代码:

```mermaid

emsp;flowchart LR

 A --o B

 B --x C

```

效果:

(十). 测试版:多向箭头

当使用流程图而不是图形时,可以使用多向箭头

代码:

```mermaid

emsp;flowchart LR

 A o–o B

 B <–> C

 C x–x D

```

效果:

(十一). 连接的最小长度

流程图中的每个节点最终都被分配到渲染图中的一个等级,即垂直或水平级别(取决于流程图的方向)
默认情况下,连接可以跨越任意数量的等级,但您可以通过在连接定义中添加额外的破折号来要求此连接比其他连接更长。
在以下示例中,在从节点B 到节点E的链接中添加了两个额外的破折号,因此它比常规链接多跨越两个等级

代码:

```mermaid

 graph TD

  A[Start] --> B{Is it?};

  B -->|Yes| C[OK];

  C --> D[Rethink];

  D --> B;

  B ---->|No| E[End];

```

效果(卖家秀):

实际上(买家秀):

	graph TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];

臣妾做不到啊,CSDN-编辑器已炸裂,Visual Studio Code扩展包已看瞎

注:连接的长度可能超过渲染引擎请求的最大等级数

对于虚线或粗链接,要添加的字符是等号或点,总结如下表(仅是CSDN-Markdown编辑器支持的,编辑器比较高级的大佬可以增加长度):

类型 表示
正常
正常带箭头 –>
===
粗有箭头 ==>
虚线 -.-
用箭头点缀 -.->

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

(猜猜有没有第五弹)

填坑.ING

学习三叔努力填坑

不愧是我

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

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

《关于『进击的Markdown』:第四弹.doc》

下载本文的Word格式文档,以方便收藏与打印。