2024年最新Mermaid画图教程（一）_mermaid绘图(1)，2024年最新大厂Offer拿到手软啊

2401_84975963

于 2024-05-14 12:24:27 发布

阅读量724

点赞数 7

分类专栏：程序员文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84975963/article/details/138849394

版权

程序员专栏收录该内容

39 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

[xxx]

[[xxx]]

([xxx])

[(xxx)]

((xxx))

xxx]

{xxx}

[/xxx/]

[/xxx]

\xxx/

When using flowchart instead of graph there is the possibility to use multidirectional arrows.

flowchart LR
	%% 有点和上面的graph不一样，在箭头上不是标注文本，二是图形
        A o--"o-....o....-o"--o B
        B <--"<--xxx-->"--> C
        C x--"在线上<br/>的字"--x D

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

:root { --mermaid-font-family: “trebuchet ms”, verdana, arial;}
#mermaid-svg-7Bw2rsvx2n7zt7BU {
color: rgba(0, 0, 0, 0.75);
font: ;
}

o-…o…-o

<–xxx–>

在线上
的字

自定义风格

flowchart不能自定义风格（也许是我不会，哈哈），下面是graph的自定义风格。

使用关键字style/classDef

graph LR
    id1(红色填充<br/>黑色边框<br/>宽度为4px)
    id2(绿色填充<br/>虚线边框<br/>白色字体)
    style id1 fill:#f00,stroke:#333,stroke-width:4px
    %% stroke-dasharray属性设置虚线边框的点的大小(长10宽5)
    style id2 fill:#0f0,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 10 5
    id1 -->a[继承mystyle1风格] & b[继承mystyle2风格] -->id2
    %% 或者定义成一个类，其它继承即可，重复利用
    classDef mystyle1 fill:#f9f,stroke:#333,stroke-width:4px;
    classDef mystyle2 fill:#00f,stroke:#f33,stroke-width:4px,color:#f2f;
    %% 继承mystyleX风格
    a:::mystyle1
    b:::mystyle2

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

:root { --mermaid-font-family: “trebuchet ms”, verdana, arial;}
#mermaid-svg-8NVRaDaSA8uWAKve .mystyle1 > * { fill:#f9f !important; stroke:#333 !important; stroke-width:4px !important; }
#mermaid-svg-8NVRaDaSA8uWAKve .mystyle1 tspan { !important; }
#mermaid-svg-8NVRaDaSA8uWAKve .mystyle2 > * { fill:#00f !important; stroke:#f33 !important; stroke-width:4px !important; color:#f2f !important; }
#mermaid-svg-8NVRaDaSA8uWAKve .mystyle2 tspan { fill:#f2f !important; }
#mermaid-svg-8NVRaDaSA8uWAKve {
color: rgba(0, 0, 0, 0.75);
font: ;
}

红色填充

黑色边框

宽度为4px

绿色填充

虚线边框

白色字体

继承mystyle1风格

继承mystyle2风格

声明成一个类多次使用/子图

也可以直接在主题配置文件(xxx.css)中配置。如果一个类被命名为default，它将被分配给所有没有特定类定义的类classDef default fill:#f9f,stroke:#333,stroke-width:4px;。

flowchart图

flowchart TB
    c1-->|不同子图元素<br/>之间的连接| a2
    subgraph one
    a1-->|子图内部元素<br/>之间的连接| a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one -->|子图之间的连接| two
    three --> two
    two --> c2

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

:root { --mermaid-font-family: “trebuchet ms”, verdana, arial;}
#mermaid-svg-9VeYCDDaF28TKdYf {
color: rgba(0, 0, 0, 0.75);
font: ;
}

three

one

不同子图元素
之间的连接

子图内部元素
之间的连接

子图之间的连接

two

graph图

graph LR
	%% flowchart改为graph也可以
	%% 风格1，用红色填充，边框用蓝色，边框宽度两个像素
	classDef mystyle1 fill:#f00, stroke:#00f, stroke-width:2px;
	classDef mystyle2 fill:#0f0, stroke:#f00, stroke-width:4px;
	classDef mystyle3 fill:#00f, stroke:#0f0, stroke-width:8px,color:#fff,stroke-dasharray: 6 3
	classDef default fill:#f9f,stroke:#333,stroke-width:4px;
	%% :::表示继承类（风格）
	D[(默认风格)]
	B(绿色填充<br/>红边框<br/>圆角):::mystyle2 --> D
	C[蓝色填充<br/>绿色边框<br/>白色字体]:::mystyle3 --> D
	%% D默认为default风格
	
	e((显示特别<br/>的符号)) -->|"f(,.?!+-\*ز)"| f(,.?!+-\*ز)
	
	C --> b2
	subgraph subgraph1
		a1{"{菱形}"} --- a2[/"[/梯形\]"\]
	end
	subgraph subgraph2
		b1[["[[xxx]]"]] -->|子图内部元<br/>素的连接| b2(["([圆角])"])
	end
	%% graph图形是不能在子图之间进行连接，但是子图内部的元素还是可以
	%% subgraph1 --> subgraph2
	%% a1 -->|子图元素<br/>之间的连接| b1

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

:root { --mermaid-font-family: “trebuchet ms”, verdana, arial;}
#mermaid-svg-rsRVtqLFWKs11WWT .mystyle1 > * { fill:#f00 !important; stroke:#00f !important; stroke-width:2px !important; }
#mermaid-svg-rsRVtqLFWKs11WWT .mystyle1 tspan { !important; }
#mermaid-svg-rsRVtqLFWKs11WWT .mystyle2 > * { fill:#0f0 !important; stroke:#f00 !important; stroke-width:4px !important; }
#mermaid-svg-rsRVtqLFWKs11WWT .mystyle2 tspan { !important; }
#mermaid-svg-rsRVtqLFWKs11WWT .mystyle3 > * { fill:#00f !important; stroke:#0f0 !important; stroke-width:8px !important; color:#fff !important; stroke-dasharray: 6 3 !important; }
#mermaid-svg-rsRVtqLFWKs11WWT .mystyle3 tspan { fill:#fff !important; }
#mermaid-svg-rsRVtqLFWKs11WWT .default > * { fill:#f9f !important; stroke:#333 !important; stroke-width:4px !important; }
#mermaid-svg-rsRVtqLFWKs11WWT .default tspan { !important; }
#mermaid-svg-rsRVtqLFWKs11WWT {
color: rgba(0, 0, 0, 0.75);
font: ;
}

subgraph2

subgraph1

f(,.?!±*ز)

子图内部元
素的连接

([圆角])

[[xxx]]

[/梯形]

{菱形}

默认风格

绿色填充

红边框

圆角

蓝色填充

绿色边框

白色字体

显示特别

的符号

,.?!±*ز

绑定事件

不是很懂

饼图-pie

pie 
    title Like
    "DSP" : 23
    "通信原理" : 21
    "移动通信" : 18
    "电信传输理论" : 10
    "毛概" : 15

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

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

26%

24%

21%

11%

17%

DSP

通信原理

移动通信

电信传输理论

毛概

顺序图-sequenceDiagram

基本语法：[Actor][Arrow][Actor]:Message text，Actor表示角色的意思。其中Arrow有->,–>,->>,–>>,-X,–X。

Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss：序列图的样式是通过定义多个CSS类来完成的。在渲染期间，这些类是从src / themes / sequence.scss中的文件中提取的。

sequenceDiagram
	%% 自动编号
	autonumber
	%% 定义参与者并取别名，aliases：别名
        participant A as Aly
        participant B as Bob
        participant C as CofCai
        %% 便签说明
        Note left of A: 只复习了一部分
        Note right of B: 没复习
        Note over A,B: are contacting
        
        A->>B: 明天是要考试吗？
        B-->>A: 好像是的！
        
        %% 显示并行发生的动作，parallel：平行
        %% par [action1]
        rect rgb(0, 255, 255)
            par askA
                C -->> A:你复习好了吗？
            and askB
                C -->> B:你复习好了吗？
            and self
                C ->>C:我还没准备复习......
            end
        end
        
        %% 背景高亮，提供一个有颜色的背景矩形
        rect rgb(255, 255, 0)
            loop 自问/Every min
            %% <br/>可以换行
            C ->> C:我什么时候<br/>开始复习呢？
            end
        end
        
        %% 可选择路径
        rect rgb(200, 100, 100)
            alt is good
                A ->> C:复习了一点
            else is common
                B ->> C:我也是
            end
            %% 没有else时可以提供默认的opt
            opt Extra response
                C ->> C:你们怎么不回答我
            end
        end

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

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

Aly

Bob

CofCai

只复习了一部分

没复习

are contacting

明天是要考试吗？

好像是的！

你复习好了吗？

我还没准备复习…

par

[askA]

[askB]

[self]

我什么时候

开始复习呢？

loop

[自问/Every

min]

复习了一点

我也是

alt

[is good]

[is common]

你们怎么不回答我

opt

[Extra

response]

Aly

Bob

CofCai

类图-class diagrams

用于类之间的所属关系表达

classDiagram


![img](https://img-blog.csdnimg.cn/img_convert/346d445c3ca72cd13fc4a0ef797fe108.png)
![img](https://img-blog.csdnimg.cn/img_convert/b3389f66ad3ebbc0e84bdec8363ffa63.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**

 .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-OgEhNm0ct67x2FVP .marker{fill:#333}#mermaid-svg-OgEhNm0ct67x2FVP .marker.cross{stroke:#333}

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






 Aly 
 







 Bob 
 







 CofCai 
 






















 只复习了一部分 
 






 没复习 
 






 are contacting 
 



 明天是要考试吗？ 
 


 1 
 

 好像是的！ 
 


 2 
 

 你复习好了吗？ 
 


 3 
 

 你复习好了吗？ 
 


 4 
 

 我还没准备复习...... 
 


 5 
 









 par 
 


 [askA] 
 


 [askB] 
 

 [self] 
 


 我什么时候 
 

 开始复习呢？ 
 


 6 
 







 loop 
 


 [自问/Every 
 



 min] 
 



 复习了一点 
 


 7 
 

 我也是 
 


 8 
 








 alt 
 


 [is good] 
 


 [is common] 
 


 你们怎么不回答我 
 


 9 
 







 opt 
 


 [Extra 
 



 response] 
 






 Aly 
 






 Bob 
 






 CofCai 
 




## 类图-class diagrams


用于类之间的所属关系表达

classDiagram

[外链图片转存中…(img-URcbuarY-1715660644758)]
[外链图片转存中…(img-gmIMpbqs-1715660644759)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取