作者： Jintao
日期：2021-7-12
简介: 未完待续

Markdown 里 mermaid 流程图flowchart教程

  • 前言：
  • 1.0 流程图的方向 TD LR BT RL
  • 2.0 节点 id[name]
  • 2.1 节点的边框 ( ) [( )] [[ ]] [()] (()) > ] { } {{ }} [/ /] [\ \] [\ /] [/ \]
    • 2.1.1 节点的边框 ( )
    • 2.1.2 节点的边框 [( )]
    • 2.1.3 节点的边框 [[ ]]
    • 2.1.4 节点的边框 [()]
    • 2.1.5 节点的边框 > ]
    • 2.1.6 节点的边框 { }
    • 2.1.7 节点的边框 {{ }}
    • 2.1.8 节点的边框 [/ /]
    • 2.1.9 节点的边框 [\ \]
    • 2.1.10 节点的边框 [\ /]
    • 2.1.11 节点的边框 [/ \]
    • 2.1.12 节点的边框 ( )

前言：

  • 本篇文章来自我自己的笔记，可能会不是很全，如需想了解更过的话可以去mermaid 的官网查看了解 https://mermaid-js.github.io/mermaid/#/flowchart

1.0 流程图的方向 TD LR BT RL

graph TD/LR

流程图的方向可以有很多种， 一般最常用的是从上到下[Top->Down], 或者是从左到右[Left to right], 也可以实现反过来布局;
TD LR BT RL

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

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

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

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

A
B
C
D 
graph BT;A-->B;A-->C;B-->D;C-->D;

2.0 节点 id[name]

在下图中， 什么一个变量作为一个节点的名称，格式为 Node_A[Node A], 左边表示Node_A变量名，右边中括号里表示在这个节点要显示的内容

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

Node A
Node B 
graph LRNode_A[Node A];Node_B[Node B];Node_A --> Node_B;

2.1 节点的边框 ( ) [( )] [[ ]] [()] (()) > ] { } {{ }} [/ /] [\ ] [\ /] [/ ]

节点的边框可以有12中不同的形式，一下我会一一列举他们的形式。在之前的案例中都是以中括号的形式来展示的，而中括号所表示的则是正方形的图案，因此结果会展示尖角的长方形的图案

2.1.1 节点的边框 ( )

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

Node A
Node B 
graph LRNode_A[Node A];Node_B[Node B];Node_A --> Node_B;

2.1.2 节点的边框 [( )]

2.1.3 节点的边框 [[ ]]

2.1.4 节点的边框 [()]

2.1.5 节点的边框 > ]

2.1.6 节点的边框 { }

2.1.7 节点的边框 {{ }}

2.1.8 节点的边框 [/ /]

2.1.9 节点的边框 [\ ]

2.1.10 节点的边框 [\ /]

2.1.11 节点的边框 [/ ]

2.1.12 节点的边框 ( )

Markdown 里 mermaid 流程图(flowchart)教程相关推荐

  1. 流程图flow-chart 教程

    一. 流程图的定义 二. 流程图: 一种显示 不同流程(flow)如何组合为一个过程(process) 的图表. 三. 流程图的组成: (1)带有箭头的有向连线                     ...

  2. 【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）

    说明 mermaid是一种解决文字图形转换的方案,用于在markdown标记语言中利用文本绘图,本文内容保证适合mermaid 8.8.3的内容,向上更新的内容不论. 本篇作为mermaid教程系列的 ...

  3. Flowchart流程图和 Mermaid流程图的对比

      在CSDN的markdown编辑器里有两种流程图绘制方式,分别是mermaid下的flowchart流程图和graph流程图.两种流程图的语法和绘制效果都有一定区别.本文重点讨论流程图的区别 本文 ...

  4. 在Markdown中用mermaid画流程图和ER图

    # 在Markdown中用mermaid画流程图 mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用. 流程图方向有下 ...

  5. mermaid与flowchart.js绘制流程图分支结构试验

    mermaid与flowchart.js绘制流程图分支结构试验 近日绘制流程图时对不断修改调整流程图中节点位置感到很厌烦,想要改用代码方式来写流程图.以下试验均基于CSDN编辑器的的mermaid和f ...

  6. hexo 利用 Markdown 语法画 mermaid 流程图

    hexo默认不支持流程图,flowchart是一种简便好用的解决方案,但由于其语法过于简单,导致其在应付稍复杂一些的流程图时捉襟见肘,本文记录在hexo中添加Mermaid流程图的方法. 添加支持 安 ...

  7. 像写 Markdown 一样画流程图

    [公众号回复 "1024",免费领取程序员赚钱实操经验] 大家好,我是章鱼猫. 今天推荐的这个项目是「mermaid」,一个基于 Javascript 的图表绘制工具,通过解析类 ...

  8. GitHub牛逼开源项目！像写 Markdown 一样画流程图

    点击上方"Github爱好者社区",选择星标 回复"资料",获取小编整理的一份资料 文章转载于:GitHub黑板报  今天推荐的这个项目是「mermaid」,一 ...

  9. Markdown Flow 画流程图详解

    VScode Markdown Flow 安装插件Markdown Preview Enhanced 流程图 有个东西叫做flowchart.js,就是专门用于绘画流程图,节点和连接是分开定义的,这样 ...

最新文章

  1. VS combox控件的简单用法
  2. NMAP分布式扫描工具dnmap
  3. Cell.reuseIdentifier 指什么
  4. web developer tips (45):如何改变动态数据文件夹的位置
  5. 4.添加监听,使地图随鼠标,键盘移动并改变大小
  6. bash内部命令-1
  7. 1.8_heapq模块_优先队列
  8. pycharm多行代码同时注释、去除注释
  9. 微信小程序的转发分享功能
  10. 微信扫一扫二维码直接下载APP的实现方式
  11. The bean sellergoods.FeignClientSpecification could not be registered. A bean with that name has a
  12. python中Excel表的读写改详解
  13. 自动弹窗加qq群教程
  14. 达尔文流媒体服务器搭配
  15. C#学习笔记-Winform根据数据自动生成控件
  16. 这家公司把聊天机器部署在安全平台
  17. 数学2600年，欧拉凭什么能当上“大王”？
  18. 神策数据埋点简单使用
  19. 基于全志D1-H和XR806的名贵植物监控装置
  20. Single page application（单页面应用）

热门文章

  1. 11度青春之《老男孩》
  2. 安霸(ambarella) s2lm视频处理流程
  3. LIN自动雨刮：雨量传感器原理与安装
  4. 为什么说体验即设计？
  5. 【shapely】自相交问题
  6. shapely使用笔记
  7. 【BH区块链项目热点问答】加拿大石油公司利用废弃天然气为挖掘BTC提供动力。你怎么看？...
  8. linux内核协议栈 TCP层数据发送之发送新数
  9. 纯c++实现光线追踪渲染器
  10. 算法复习-Akari Puzzle