关于『进击的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』:第四弹的更多相关文章

  1. 关于『进击的Markdown』:第五弹

    关于『进击的Markdown』:第五弹 建议缩放90%食用 路漫漫其修远兮,吾将上下而求索.  我们要接受Mermaid的考验了呢  Markdown 语法真香(一如既往地安利) ( 进击吧!Mark ...

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

    关于『进击的Markdown』:第三弹 建议缩放90%食用 我与神明画押,赌这弹markdown又双叒叕拖稿了 %%%Markdown!我的CSDN编辑器崩了呜呜呜 各路英雄豪杰,大家好!  我们要开 ...

  3. 关于『进击的Markdown』:第一弹

    关于『进击的Markdown』:第一弹 建议缩放90%食用 比起隐蔽物下的狙击手,Markdown更像冲锋陷阵的阵头兵 简单.粗暴.直接.而且好上手 各位晚上好! 早饭吃了吗您 我 今 天 没 吃 M ...

  4. 关于『进击的Markdown』:第二弹

    关于『进击的Markdown』:第二弹 建议缩放90%食用 众里寻他千百度,蓦然回首,Markdown却在灯火灿烂处 MarkdownYYDS! 各位早上好!  我果然鸽稿了  Markdown 语法 ...

  5. 『PyTorch』第四弹_通过LeNet初识pytorch神经网络_下

    『PyTorch』第四弹_通过LeNet初识pytorch神经网络_上 # Author : Hellcat # Time : 2018/2/11 import torch as t import t ...

  6. 『MXNet』第四弹_Gluon自定义层

    一.不含参数层 通过继承Block自定义了一个将输入减掉均值的层:CenteredLayer类,并将层的计算放在forward函数里, from mxnet import nd, gluon from ...

  7. 『PyTorch』第四弹_通过LeNet初识pytorch神经网络_上

    总结一下相关概念: torch.Tensor - 一个近似多维数组的数据结构 autograd.Variable - 改变Tensor并且记录下来操作的历史记录.和Tensor拥有相同的API,以及b ...

  8. 『PyTorch × TensorFlow』第十七弹_ResNet快速实现

    『TensorFlow』读书笔记_ResNet_V2 对比之前的复杂版本,这次的torch实现其实简单了不少,不过这和上面的代码实现逻辑过于复杂也有关系. 一.PyTorch实现 # Author : ...

  9. 关于『Markdown』:第二弹

    关于『Markdown』:第二弹 建议缩放90%食用 道家有云:一生二,二生三,三生万物 为什么我的帖子不是这样 各位打工人们! 自从我学了Markdown以来 发现 Markdown 语法真的要比 ...

随机推荐

  1. 动态添加HTML时onclick函数参数传递

    onclick函数动态传参 1.参数为数值类型时: var tmp = 123; var strHTML = "<div onclick=func(" + tmp + &qu ...

  2. 假期任务一:安装好JAVA开发环境并且在Eclipse上面成功运行HelloWorld程序

    (本周主要做了java环境的安装,安装完jdk后又安装了eclipse,平均每天两小时Java吧,这周敲代码的时间比较少,大多是在b站看java入门视频和菜鸟教程的基础语法,也就打开eclipse验证 ...

  3. ssm项目框架搭建(增删改查案例实现)——(SpringMVC+Spring+mybatis项目整合)

    Spring 常用注解 内容 一.基本概念 1. Spring 2. SpringMVC 3. MyBatis 二.开发环境搭建 1. 创建 maven 项目 2. SSM整合 2.1 项目结构图 2 ...

  4. xml中的<![CDATA[]]>和转义字符

    被<![CDATA[]]>这个标记所包含的内容将表示为纯文本,比如<![CDATA[<]]>表示文本内容"<". 此标记用于xml文档中,我们先 ...

  5. 利用HTML5和css3 选中图片上传到服务器,插件地址如下

    https://yusi123.com/3349.html 分三步,需要将js文件和css文件拷贝到项目目录下,在需要选择的图片的文件中引入,然后将HTML代码复制 <!--选择图片模块star ...

  6. 基于node实现一个简单的脚手架工具(node控制台交互项目)

    实现控制台输入输出 实现文件读写操作 全原生实现一个简单的脚手架工具 实现vue-cli2源码 一.实现控制台输入输出 关于控制台的输入输出依然是基于node进程管理对象process,在proces ...

  7. Java报错:Unable to find setter method for attribute: [x]

    在学习JavaWeb JSTL与自定义标签时遇到的坑,用的老师给的代码结果直接原地报错:javax.servlet.ServletException: org.apache.jasper.Jasper ...

  8. 导出带标签的tar包(docker)-解决导出不带标签的麻烦

    需求:在docker的本地镜像库中导出tar包给其他节点使用. 如果使用:docker save -o package.tar e82656a6fc 这样形式导出的tar包,安装之后标签会消失解决办法 ...

  9. 帝国CMS后台采集关键字的方法

    小伙伴们知道帝国CMS后台的采集功能是不能采集关键字的,那么老墨今天给大家说一个变通方法,让后台能采集关键字!方法如下: 1.系统设置--管理数据表--管理字段--增加字段(字段名:keywords字 ...

  10. 自定义user表签发token、自定义认证类、simpleui模块使用

    今日内容概要 自定义User表,签发token 自定义认证类 simpleui的使用 多方式登陆接口(后面也写 内容详细 1.自定义User表,签发token # 如果项目中的User表使用auth的 ...