画横线删除
下划线
4号字体
3号字体(系统默认字体)
标记文本
标记的4号字体
设置蓝色的楷字体
黄色背景 |
H20
210=1024
引用文本
主项目
-
字项目1
-
字项目1_1
-
字项目2
-
项目1
-
项目2
-
项目3
-
计划任务(前面的方框可选呢)
-
完成任务
- 主项目
- 字项目1
- 字项目1_1
- 字项目2
-
项目1
-
项目2
-
项目3
-
计划任务
-
完成任务
项目1
子项目1_1
项目2
子项目2_1
子项目2_2
-
项目1
-
子项目1_1
项目2
-
子项目2_1
-
子项目2_2
在csdn上面来写博客的人大多都是码农,写代码与分享代码是常有的事,所以上传代码块也是很重要的。
比如下面这一段Java的Hello word!
public static void main(String[] args) {
System.out.println(“Hello word!”);
}
它的整个代码就是如下图
由``` ```构成至于事什么语言在前三个点结束时写上什么语言就好了,比如下面的Java语言
有的时候我们觉得别人的东西很好,要是重写一遍好长鸭,那么我们怎么将别人的链接拿过来呢?
比如
它的格式时这样的[拿来吧你!]( )
放入图片有两种方法,第一种,直接点击上方的上传图片,第二种就是直接将你的图片复制粘贴过来,那么放入图片后怎么设置图片呢
放入图片![干饭人图片]( )
![干饭人图片]( )
有没有发现这张图片有点太大了,我们怎么小一点呢设置图片大小:![干饭人图片]( )
原来在末尾加上你需要的大小就可以了鸭(注意空格再加上=150x150)
嗯……图片在左边有点不好看,我可以放中间吗?当然可以![干饭人图片]( )
原来我们只需要在图片后方加上一个#pic_center就可以了,这里#pic_(你需要的地方也可以是left、right)
注脚
一个具有注脚的文本,注脚会放在文章最后边哟。1
注释
pier是 最丑的。
既然都说程序员的了,那么我们有很多题还需要取书写一些算法,我们怎么书写公式呢?$$
\Gamma(z) = \int_0^\infty t{z-1}e{-t}dt\ $$
具体的符号对应可以查看☞数学公式对应大全
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t \Gamma(z) = \int_0^\infty t{z-1}e{-t}dt Γ(z)=∫0∞tz−1e−tdt
注:在书写公式是记得前后的两个美元符号哟
Mon 16 Mon 23 Mon 30 已完成的任务 正在进行的任务 待完成任务1 待完成任务2 任务1 使用mermaid语言定制甘特图
代码截图
mermaid:图中第一行内容与最后一行内容(可只写一行),表示当前使用的语言为mermaid。
gantt:表示图表类型为甘特图
dateFormat:指定日期格式(Y表示年,M表示月,D表示日)。YYYY-MM-DD(2021-08-16),YY-MM-DD(21-08-18)
section: 项目关键字,空格之后输入项目名称。
任务行: section后每一行为一个任务。第一个字符串为任务名称,之后以:开头,添加任务属性。
接下来用下面代码实例说明常见任务属性。
任务状态:
done 已完成
active正在进行
crit 关键任务
默认任务都为待完成状态
任务描述:在des1、des2位置添加任务描述,其它任务引用时直接引用des1就可以。
after: 描述任务时间关系。des3, after des2表示des3紧跟在des2之后。
任务时长有三种方式:
时间范围 如:2021-08-16,2021-08-18
指定天数 如:5d
指定开始日期+天数 如:2021-08-16,5d
**PS:所有关键字之间用“,”分隔,关键字需要属性时用空格分隔(如:after des2,)。
#mermaid-svg-RVOCWfHoFDnH8qdh .label{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);fill:#333;color:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .label text{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .node rect,#mermaid-svg-RVOCWfHoFDnH8qdh .node circle,#mermaid-svg-RVOCWfHoFDnH8qdh .node ellipse,#mermaid-svg-RVOCWfHoFDnH8qdh .node polygon,#mermaid-svg-RVOCWfHoFDnH8qdh .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-RVOCWfHoFDnH8qdh .node .label{text-align:center;fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .node.clickable{cursor:pointer}#mermaid-svg-RVOCWfHoFDnH8qdh .arrowheadPath{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-RVOCWfHoFDnH8qdh .flowchart-link{stroke:#333;fill:none}#mermaid-svg-RVOCWfHoFDnH8qdh .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-RVOCWfHoFDnH8qdh .edgeLabel rect{opacity:0.9}#mermaid-svg-RVOCWfHoFDnH8qdh .edgeLabel span{color:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-RVOCWfHoFDnH8qdh .cluster text{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh 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-RVOCWfHoFDnH8qdh .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-RVOCWfHoFDnH8qdh text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-RVOCWfHoFDnH8qdh .actor-line{stroke:grey}#mermaid-svg-RVOCWfHoFDnH8qdh .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-RVOCWfHoFDnH8qdh #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .sequenceNumber{fill:#fff}#mermaid-svg-RVOCWfHoFDnH8qdh #sequencenumber{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh #crosshead path{fill:#333;stroke:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .messageText{fill:#333;stroke:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-RVOCWfHoFDnH8qdh .labelText,#mermaid-svg-RVOCWfHoFDnH8qdh .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-RVOCWfHoFDnH8qdh .loopText,#mermaid-svg-RVOCWfHoFDnH8qdh .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-RVOCWfHoFDnH8qdh .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-RVOCWfHoFDnH8qdh .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-RVOCWfHoFDnH8qdh .noteText,#mermaid-svg-RVOCWfHoFDnH8qdh .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-RVOCWfHoFDnH8qdh .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-RVOCWfHoFDnH8qdh .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-RVOCWfHoFDnH8qdh .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-RVOCWfHoFDnH8qdh .mermaid-main-font{font-family:“trebuchet ms”, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh .section{stroke:none;opacity:0.2}#mermaid-svg-RVOCWfHoFDnH8qdh .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-RVOCWfHoFDnH8qdh .section2{fill:#fff400}#mermaid-svg-RVOCWfHoFDnH8qdh .section1,#mermaid-svg-RVOCWfHoFDnH8qdh .section3{fill:#fff;opacity:0.2}#mermaid-svg-RVOCWfHoFDnH8qdh .sectionTitle0{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .sectionTitle1{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .sectionTitle2{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .sectionTitle3{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-RVOCWfHoFDnH8qdh .grid .tick text{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh .grid path{stroke-width:0}#mermaid-svg-RVOCWfHoFDnH8qdh .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-RVOCWfHoFDnH8qdh .task{stroke-width:2}#mermaid-svg-RVOCWfHoFDnH8qdh .taskText{text-anchor:middle;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh .taskText:not([font-size]){font-size:11px}#mermaid-svg-RVOCWfHoFDnH8qdh .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-RVOCWfHoFDnH8qdh .task.clickable{cursor:pointer}#mermaid-svg-RVOCWfHoFDnH8qdh .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-RVOCWfHoFDnH8qdh .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-RVOCWfHoFDnH8qdh .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-RVOCWfHoFDnH8qdh .taskText0,#mermaid-svg-RVOCWfHoFDnH8qdh .taskText1,#mermaid-svg-RVOCWfHoFDnH8qdh .taskText2,#mermaid-svg-RVOCWfHoFDnH8qdh .taskText3{fill:#fff}#mermaid-svg-RVOCWfHoFDnH8qdh .task0,#mermaid-svg-RVOCWfHoFDnH8qdh .task1,#mermaid-svg-RVOCWfHoFDnH8qdh .task2,#mermaid-svg-RVOCWfHoFDnH8qdh .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-RVOCWfHoFDnH8qdh .taskTextOutside0,#mermaid-svg-RVOCWfHoFDnH8qdh .taskTextOutside2{fill:#000}#mermaid-svg-RVOCWfHoFDnH8qdh .taskTextOutside1,#mermaid-svg-RVOCWfHoFDnH8qdh .taskTextOutside3{fill:#000}#mermaid-svg-RVOCWfHoFDnH8qdh .active0,#mermaid-svg-RVOCWfHoFDnH8qdh .active1,#mermaid-svg-RVOCWfHoFDnH8qdh .active2,#mermaid-svg-RVOCWfHoFDnH8qdh .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-RVOCWfHoFDnH8qdh .activeText0,#mermaid-svg-RVOCWfHoFDnH8qdh .activeText1,#mermaid-svg-RVOCWfHoFDnH8qdh .activeText2,#mermaid-svg-RVOCWfHoFDnH8qdh .activeText3{fill:#000 !important}#mermaid-svg-RVOCWfHoFDnH8qdh .done0,#mermaid-svg-RVOCWfHoFDnH8qdh .done1,#mermaid-svg-RVOCWfHoFDnH8qdh .done2,#mermaid-svg-RVOCWfHoFDnH8qdh .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-RVOCWfHoFDnH8qdh .doneText0,#mermaid-svg-RVOCWfHoFDnH8qdh .doneText1,#mermaid-svg-RVOCWfHoFDnH8qdh .doneText2,#mermaid-svg-RVOCWfHoFDnH8qdh .doneText3{fill:#000 !important}#mermaid-svg-RVOCWfHoFDnH8qdh .crit0,#mermaid-svg-RVOCWfHoFDnH8qdh .crit1,#mermaid-svg-RVOCWfHoFDnH8qdh .crit2,#mermaid-svg-RVOCWfHoFDnH8qdh .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-RVOCWfHoFDnH8qdh .activeCrit0,#mermaid-svg-RVOCWfHoFDnH8qdh .activeCrit1,#mermaid-svg-RVOCWfHoFDnH8qdh .activeCrit2,#mermaid-svg-RVOCWfHoFDnH8qdh .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-RVOCWfHoFDnH8qdh .doneCrit0,#mermaid-svg-RVOCWfHoFDnH8qdh .doneCrit1,#mermaid-svg-RVOCWfHoFDnH8qdh .doneCrit2,#mermaid-svg-RVOCWfHoFDnH8qdh .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-RVOCWfHoFDnH8qdh .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-RVOCWfHoFDnH8qdh .milestoneText{font-style:italic}#mermaid-svg-RVOCWfHoFDnH8qdh .doneCritText0,#mermaid-svg-RVOCWfHoFDnH8qdh .doneCritText1,#mermaid-svg-RVOCWfHoFDnH8qdh .doneCritText2,#mermaid-svg-RVOCWfHoFDnH8qdh .doneCritText3{fill:#000 !important}#mermaid-svg-RVOCWfHoFDnH8qdh .activeCritText0,#mermaid-svg-RVOCWfHoFDnH8qdh .activeCritText1,#mermaid-svg-RVOCWfHoFDnH8qdh .activeCritText2,#mermaid-svg-RVOCWfHoFDnH8qdh .activeCritText3{fill:#000 !important}#mermaid-svg-RVOCWfHoFDnH8qdh .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh g.classGroup text{fill:#9370db;stroke:none;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);font-size:10px}#mermaid-svg-RVOCWfHoFDnH8qdh g.classGroup text .title{font-weight:bolder}#mermaid-svg-RVOCWfHoFDnH8qdh g.clickable{cursor:pointer}#mermaid-svg-RVOCWfHoFDnH8qdh g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-RVOCWfHoFDnH8qdh g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-RVOCWfHoFDnH8qdh .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-RVOCWfHoFDnH8qdh .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-RVOCWfHoFDnH8qdh .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-RVOCWfHoFDnH8qdh .dashed-line{stroke-dasharray:3}#mermaid-svg-RVOCWfHoFDnH8qdh #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RVOCWfHoFDnH8qdh #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RVOCWfHoFDnH8qdh #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-RVOCWfHoFDnH8qdh #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-RVOCWfHoFDnH8qdh #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RVOCWfHoFDnH8qdh #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RVOCWfHoFDnH8qdh #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RVOCWfHoFDnH8qdh #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RVOCWfHoFDnH8qdh .commit-id,#mermaid-svg-RVOCWfHoFDnH8qdh .commit-msg,#mermaid-svg-RVOCWfHoFDnH8qdh .branch-label{fill:lightgrey;color:lightgrey;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh .slice{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-RVOCWfHoFDnH8qdh g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-RVOCWfHoFDnH8qdh g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-RVOCWfHoFDnH8qdh g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-RVOCWfHoFDnH8qdh .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-RVOCWfHoFDnH8qdh .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-RVOCWfHoFDnH8qdh .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-RVOCWfHoFDnH8qdh .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-RVOCWfHoFDnH8qdh .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-RVOCWfHoFDnH8qdh .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-RVOCWfHoFDnH8qdh .edgeLabel text{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-RVOCWfHoFDnH8qdh .node circle.state-start{fill:black;stroke:black}#mermaid-svg-RVOCWfHoFDnH8qdh .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-RVOCWfHoFDnH8qdh #statediagram-barbEnd{fill:#9370db}#mermaid-svg-RVOCWfHoFDnH8qdh .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-RVOCWfHoFDnH8qdh .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-RVOCWfHoFDnH8qdh .statediagram-state .divider{stroke:#9370db}#mermaid-svg-RVOCWfHoFDnH8qdh .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-RVOCWfHoFDnH8qdh .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-RVOCWfHoFDnH8qdh .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-RVOCWfHoFDnH8qdh .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-RVOCWfHoFDnH8qdh .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-RVOCWfHoFDnH8qdh .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-RVOCWfHoFDnH8qdh .note-edge{stroke-dasharray:5}#mermaid-svg-RVOCWfHoFDnH8qdh .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-RVOCWfHoFDnH8qdh .error-icon{fill:#522}#mermaid-svg-RVOCWfHoFDnH8qdh .error-text{fill:#522;stroke:#522}#mermaid-svg-RVOCWfHoFDnH8qdh .edge-thickness-normal{stroke-width:2px}#mermaid-svg-RVOCWfHoFDnH8qdh .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-RVOCWfHoFDnH8qdh .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-RVOCWfHoFDnH8qdh .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-RVOCWfHoFDnH8qdh .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-RVOCWfHoFDnH8qdh .marker{fill:#333}#mermaid-svg-RVOCWfHoFDnH8qdh .marker.cross{stroke:#333} :root { --mermaid-font-family: “trebuchet ms”, verdana, arial;} #mermaid-svg-RVOCWfHoFDnH8qdh { color: rgba(0, 0, 0, 0.75); font: ; } pier 寒哥 大雄老师 寒哥,借用一下你的名字哈! pier,你皮痒了? 我很好,谢谢! 你长得丑,不和你聊了 pier心里想骂寒哥许久了 还是忍住,说了一句 寒哥,拜拜 这时候大雄老师过来了 pier为了缓解尴尬 大雄老师好 大雄老师心想,这谁呀!想不起来名字咋办呢 (表面功夫露出了一个职业性微笑) pier 寒哥 大雄老师
代码展示
sequenceDiagram
pier->> 寒哥: 寒哥,借用一下你的名字哈!
寒哥–>>pier: pier,你皮痒了?
pier–>>寒哥: 我很好,谢谢!
寒哥–>>pier: 你长得丑,不和你聊了
Note left of 寒哥 : pier心里想骂寒哥许久了
还是忍住,说了一句
pier->>寒哥: 寒哥,拜拜
Note right of 寒哥:这时候大雄老师过来了
pier为了缓解尴尬
pier–>>大雄老师: 大雄老师好
Note left of 大雄老师: 大雄老师心想,这谁呀!想不起来名字咋办呢
大雄老师->>pier:(表面功夫露出了一个职业性微笑)
使用时第一行内容与最后一行内容(可只写一行),表示当前使用的语言为mermaid
要对应谁对谁的箭头用说话者->>:听话者
内心os可以使用Note left/right of 姓名: left/right可以控制便利贴放的位置。
#mermaid-svg-4RqLUrI9SVO4bsJj .label{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);fill:#333;color:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .label text{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .node rect,#mermaid-svg-4RqLUrI9SVO4bsJj .node circle,#mermaid-svg-4RqLUrI9SVO4bsJj .node ellipse,#mermaid-svg-4RqLUrI9SVO4bsJj .node polygon,#mermaid-svg-4RqLUrI9SVO4bsJj .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-4RqLUrI9SVO4bsJj .node .label{text-align:center;fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .node.clickable{cursor:pointer}#mermaid-svg-4RqLUrI9SVO4bsJj .arrowheadPath{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-4RqLUrI9SVO4bsJj .flowchart-link{stroke:#333;fill:none}#mermaid-svg-4RqLUrI9SVO4bsJj .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-4RqLUrI9SVO4bsJj .edgeLabel rect{opacity:0.9}#mermaid-svg-4RqLUrI9SVO4bsJj .edgeLabel span{color:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-4RqLUrI9SVO4bsJj .cluster text{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj 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-4RqLUrI9SVO4bsJj .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-4RqLUrI9SVO4bsJj text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-4RqLUrI9SVO4bsJj .actor-line{stroke:grey}#mermaid-svg-4RqLUrI9SVO4bsJj .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-4RqLUrI9SVO4bsJj #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .sequenceNumber{fill:#fff}#mermaid-svg-4RqLUrI9SVO4bsJj #sequencenumber{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj #crosshead path{fill:#333;stroke:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .messageText{fill:#333;stroke:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-4RqLUrI9SVO4bsJj .labelText,#mermaid-svg-4RqLUrI9SVO4bsJj .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-4RqLUrI9SVO4bsJj .loopText,#mermaid-svg-4RqLUrI9SVO4bsJj .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-4RqLUrI9SVO4bsJj .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-4RqLUrI9SVO4bsJj .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-4RqLUrI9SVO4bsJj .noteText,#mermaid-svg-4RqLUrI9SVO4bsJj .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-4RqLUrI9SVO4bsJj .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-4RqLUrI9SVO4bsJj .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-4RqLUrI9SVO4bsJj .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-4RqLUrI9SVO4bsJj .mermaid-main-font{font-family:“trebuchet ms”, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj .section{stroke:none;opacity:0.2}#mermaid-svg-4RqLUrI9SVO4bsJj .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-4RqLUrI9SVO4bsJj .section2{fill:#fff400}#mermaid-svg-4RqLUrI9SVO4bsJj .section1,#mermaid-svg-4RqLUrI9SVO4bsJj .section3{fill:#fff;opacity:0.2}#mermaid-svg-4RqLUrI9SVO4bsJj .sectionTitle0{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .sectionTitle1{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .sectionTitle2{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .sectionTitle3{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-4RqLUrI9SVO4bsJj .grid .tick text{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj .grid path{stroke-width:0}#mermaid-svg-4RqLUrI9SVO4bsJj .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-4RqLUrI9SVO4bsJj .task{stroke-width:2}#mermaid-svg-4RqLUrI9SVO4bsJj .taskText{text-anchor:middle;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj .taskText:not([font-size]){font-size:11px}#mermaid-svg-4RqLUrI9SVO4bsJj .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-4RqLUrI9SVO4bsJj .task.clickable{cursor:pointer}#mermaid-svg-4RqLUrI9SVO4bsJj .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-4RqLUrI9SVO4bsJj .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-4RqLUrI9SVO4bsJj .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-4RqLUrI9SVO4bsJj .taskText0,#mermaid-svg-4RqLUrI9SVO4bsJj .taskText1,#mermaid-svg-4RqLUrI9SVO4bsJj .taskText2,#mermaid-svg-4RqLUrI9SVO4bsJj .taskText3{fill:#fff}#mermaid-svg-4RqLUrI9SVO4bsJj .task0,#mermaid-svg-4RqLUrI9SVO4bsJj .task1,#mermaid-svg-4RqLUrI9SVO4bsJj .task2,#mermaid-svg-4RqLUrI9SVO4bsJj .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-4RqLUrI9SVO4bsJj .taskTextOutside0,#mermaid-svg-4RqLUrI9SVO4bsJj .taskTextOutside2{fill:#000}#mermaid-svg-4RqLUrI9SVO4bsJj .taskTextOutside1,#mermaid-svg-4RqLUrI9SVO4bsJj .taskTextOutside3{fill:#000}#mermaid-svg-4RqLUrI9SVO4bsJj .active0,#mermaid-svg-4RqLUrI9SVO4bsJj .active1,#mermaid-svg-4RqLUrI9SVO4bsJj .active2,#mermaid-svg-4RqLUrI9SVO4bsJj .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-4RqLUrI9SVO4bsJj .activeText0,#mermaid-svg-4RqLUrI9SVO4bsJj .activeText1,#mermaid-svg-4RqLUrI9SVO4bsJj .activeText2,#mermaid-svg-4RqLUrI9SVO4bsJj .activeText3{fill:#000 !important}#mermaid-svg-4RqLUrI9SVO4bsJj .done0,#mermaid-svg-4RqLUrI9SVO4bsJj .done1,#mermaid-svg-4RqLUrI9SVO4bsJj .done2,#mermaid-svg-4RqLUrI9SVO4bsJj .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-4RqLUrI9SVO4bsJj .doneText0,#mermaid-svg-4RqLUrI9SVO4bsJj .doneText1,#mermaid-svg-4RqLUrI9SVO4bsJj .doneText2,#mermaid-svg-4RqLUrI9SVO4bsJj .doneText3{fill:#000 !important}#mermaid-svg-4RqLUrI9SVO4bsJj .crit0,#mermaid-svg-4RqLUrI9SVO4bsJj .crit1,#mermaid-svg-4RqLUrI9SVO4bsJj .crit2,#mermaid-svg-4RqLUrI9SVO4bsJj .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-4RqLUrI9SVO4bsJj .activeCrit0,#mermaid-svg-4RqLUrI9SVO4bsJj .activeCrit1,#mermaid-svg-4RqLUrI9SVO4bsJj .activeCrit2,#mermaid-svg-4RqLUrI9SVO4bsJj .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-4RqLUrI9SVO4bsJj .doneCrit0,#mermaid-svg-4RqLUrI9SVO4bsJj .doneCrit1,#mermaid-svg-4RqLUrI9SVO4bsJj .doneCrit2,#mermaid-svg-4RqLUrI9SVO4bsJj .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-4RqLUrI9SVO4bsJj .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-4RqLUrI9SVO4bsJj .milestoneText{font-style:italic}#mermaid-svg-4RqLUrI9SVO4bsJj .doneCritText0,#mermaid-svg-4RqLUrI9SVO4bsJj .doneCritText1,#mermaid-svg-4RqLUrI9SVO4bsJj .doneCritText2,#mermaid-svg-4RqLUrI9SVO4bsJj .doneCritText3{fill:#000 !important}#mermaid-svg-4RqLUrI9SVO4bsJj .activeCritText0,#mermaid-svg-4RqLUrI9SVO4bsJj .activeCritText1,#mermaid-svg-4RqLUrI9SVO4bsJj .activeCritText2,#mermaid-svg-4RqLUrI9SVO4bsJj .activeCritText3{fill:#000 !important}#mermaid-svg-4RqLUrI9SVO4bsJj .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj g.classGroup text{fill:#9370db;stroke:none;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);font-size:10px}#mermaid-svg-4RqLUrI9SVO4bsJj g.classGroup text .title{font-weight:bolder}#mermaid-svg-4RqLUrI9SVO4bsJj g.clickable{cursor:pointer}#mermaid-svg-4RqLUrI9SVO4bsJj g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-4RqLUrI9SVO4bsJj g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-4RqLUrI9SVO4bsJj .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-4RqLUrI9SVO4bsJj .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-4RqLUrI9SVO4bsJj .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-4RqLUrI9SVO4bsJj .dashed-line{stroke-dasharray:3}#mermaid-svg-4RqLUrI9SVO4bsJj #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4RqLUrI9SVO4bsJj #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4RqLUrI9SVO4bsJj #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-4RqLUrI9SVO4bsJj #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-4RqLUrI9SVO4bsJj #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4RqLUrI9SVO4bsJj #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4RqLUrI9SVO4bsJj #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4RqLUrI9SVO4bsJj #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4RqLUrI9SVO4bsJj .commit-id,#mermaid-svg-4RqLUrI9SVO4bsJj .commit-msg,#mermaid-svg-4RqLUrI9SVO4bsJj .branch-label{fill:lightgrey;color:lightgrey;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj .slice{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-4RqLUrI9SVO4bsJj g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-4RqLUrI9SVO4bsJj g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-4RqLUrI9SVO4bsJj g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-4RqLUrI9SVO4bsJj .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-4RqLUrI9SVO4bsJj .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-4RqLUrI9SVO4bsJj .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-4RqLUrI9SVO4bsJj .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-4RqLUrI9SVO4bsJj .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-4RqLUrI9SVO4bsJj .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-4RqLUrI9SVO4bsJj .edgeLabel text{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-4RqLUrI9SVO4bsJj .node circle.state-start{fill:black;stroke:black}#mermaid-svg-4RqLUrI9SVO4bsJj .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-4RqLUrI9SVO4bsJj #statediagram-barbEnd{fill:#9370db}#mermaid-svg-4RqLUrI9SVO4bsJj .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-4RqLUrI9SVO4bsJj .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-4RqLUrI9SVO4bsJj .statediagram-state .divider{stroke:#9370db}#mermaid-svg-4RqLUrI9SVO4bsJj .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-4RqLUrI9SVO4bsJj .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-4RqLUrI9SVO4bsJj .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-4RqLUrI9SVO4bsJj .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-4RqLUrI9SVO4bsJj .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-4RqLUrI9SVO4bsJj .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-4RqLUrI9SVO4bsJj .note-edge{stroke-dasharray:5}#mermaid-svg-4RqLUrI9SVO4bsJj .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-4RqLUrI9SVO4bsJj .error-icon{fill:#522}#mermaid-svg-4RqLUrI9SVO4bsJj .error-text{fill:#522;stroke:#522}#mermaid-svg-4RqLUrI9SVO4bsJj .edge-thickness-normal{stroke-width:2px}#mermaid-svg-4RqLUrI9SVO4bsJj .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-4RqLUrI9SVO4bsJj .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-4RqLUrI9SVO4bsJj .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-4RqLUrI9SVO4bsJj .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-4RqLUrI9SVO4bsJj .marker{fill:#333}#mermaid-svg-4RqLUrI9SVO4bsJj .marker.cross{stroke:#333} :root { --mermaid-font-family: “trebuchet ms”, verdana, arial;} #mermaid-svg-4RqLUrI9SVO4bsJj { color: rgba(0, 0, 0, 0.75); font: ; }
矩形
菱形
圆角矩形
圆形
源码展示
graph LR
A[矩形] --> B{菱形}
A–>C(圆角矩形)
B --> D((圆形))
C–>D
和前面两个图一样,graph LR表示当前使用的图的类型,在调用时也需要在首行或者末行mermaid语句
做程序员画流程图是一件普通的不能普通的事情了,那么上面的图很明显不太像我们正常做的图,但下面的图就是的了
Created with Raphaël 2.3.0 开始 一系列瞎整 是否正确? 结束 yes no
注意这个判断如果为no的话会横着走哟,自己画的时候注意一下!
源码展示
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 一系列瞎整
cond=>condition: 是否正确?
st->op->cond
cond(no)->op
cond(yes)->e
#mermaid-svg-yTEHyS6eohyYaCZL .label{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);fill:#333;color:#333}#mermaid-svg-yTEHyS6eohyYaCZL .label text{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL .node rect,#mermaid-svg-yTEHyS6eohyYaCZL .node circle,#mermaid-svg-yTEHyS6eohyYaCZL .node ellipse,#mermaid-svg-yTEHyS6eohyYaCZL .node polygon,#mermaid-svg-yTEHyS6eohyYaCZL .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-yTEHyS6eohyYaCZL .node .label{text-align:center;fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL .node.clickable{cursor:pointer}#mermaid-svg-yTEHyS6eohyYaCZL .arrowheadPath{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-yTEHyS6eohyYaCZL .flowchart-link{stroke:#333;fill:none}#mermaid-svg-yTEHyS6eohyYaCZL .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-yTEHyS6eohyYaCZL .edgeLabel rect{opacity:0.9}#mermaid-svg-yTEHyS6eohyYaCZL .edgeLabel span{color:#333}#mermaid-svg-yTEHyS6eohyYaCZL .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-yTEHyS6eohyYaCZL .cluster text{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL 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-yTEHyS6eohyYaCZL .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-yTEHyS6eohyYaCZL text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-yTEHyS6eohyYaCZL .actor-line{stroke:grey}#mermaid-svg-yTEHyS6eohyYaCZL .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-yTEHyS6eohyYaCZL .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-yTEHyS6eohyYaCZL #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-yTEHyS6eohyYaCZL .sequenceNumber{fill:#fff}#mermaid-svg-yTEHyS6eohyYaCZL #sequencenumber{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL #crosshead path{fill:#333;stroke:#333}#mermaid-svg-yTEHyS6eohyYaCZL .messageText{fill:#333;stroke:#333}#mermaid-svg-yTEHyS6eohyYaCZL .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-yTEHyS6eohyYaCZL .labelText,#mermaid-svg-yTEHyS6eohyYaCZL .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-yTEHyS6eohyYaCZL .loopText,#mermaid-svg-yTEHyS6eohyYaCZL .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-yTEHyS6eohyYaCZL .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-yTEHyS6eohyYaCZL .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-yTEHyS6eohyYaCZL .noteText,#mermaid-svg-yTEHyS6eohyYaCZL .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-yTEHyS6eohyYaCZL .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-yTEHyS6eohyYaCZL .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-yTEHyS6eohyYaCZL .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-yTEHyS6eohyYaCZL .mermaid-main-font{font-family:“trebuchet ms”, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL .section{stroke:none;opacity:0.2}#mermaid-svg-yTEHyS6eohyYaCZL .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-yTEHyS6eohyYaCZL .section2{fill:#fff400}#mermaid-svg-yTEHyS6eohyYaCZL .section1,#mermaid-svg-yTEHyS6eohyYaCZL .section3{fill:#fff;opacity:0.2}#mermaid-svg-yTEHyS6eohyYaCZL .sectionTitle0{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL .sectionTitle1{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL .sectionTitle2{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL .sectionTitle3{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-yTEHyS6eohyYaCZL .grid .tick text{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL .grid path{stroke-width:0}#mermaid-svg-yTEHyS6eohyYaCZL .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-yTEHyS6eohyYaCZL .task{stroke-width:2}#mermaid-svg-yTEHyS6eohyYaCZL .taskText{text-anchor:middle;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL .taskText:not([font-size]){font-size:11px}#mermaid-svg-yTEHyS6eohyYaCZL .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-yTEHyS6eohyYaCZL .task.clickable{cursor:pointer}#mermaid-svg-yTEHyS6eohyYaCZL .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-yTEHyS6eohyYaCZL .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-yTEHyS6eohyYaCZL .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-yTEHyS6eohyYaCZL .taskText0,#mermaid-svg-yTEHyS6eohyYaCZL .taskText1,#mermaid-svg-yTEHyS6eohyYaCZL .taskText2,#mermaid-svg-yTEHyS6eohyYaCZL .taskText3{fill:#fff}#mermaid-svg-yTEHyS6eohyYaCZL .task0,#mermaid-svg-yTEHyS6eohyYaCZL .task1,#mermaid-svg-yTEHyS6eohyYaCZL .task2,#mermaid-svg-yTEHyS6eohyYaCZL .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-yTEHyS6eohyYaCZL .taskTextOutside0,#mermaid-svg-yTEHyS6eohyYaCZL .taskTextOutside2{fill:#000}#mermaid-svg-yTEHyS6eohyYaCZL .taskTextOutside1,#mermaid-svg-yTEHyS6eohyYaCZL .taskTextOutside3{fill:#000}#mermaid-svg-yTEHyS6eohyYaCZL .active0,#mermaid-svg-yTEHyS6eohyYaCZL .active1,#mermaid-svg-yTEHyS6eohyYaCZL .active2,#mermaid-svg-yTEHyS6eohyYaCZL .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-yTEHyS6eohyYaCZL .activeText0,#mermaid-svg-yTEHyS6eohyYaCZL .activeText1,#mermaid-svg-yTEHyS6eohyYaCZL .activeText2,#mermaid-svg-yTEHyS6eohyYaCZL .activeText3{fill:#000 !important}#mermaid-svg-yTEHyS6eohyYaCZL .done0,#mermaid-svg-yTEHyS6eohyYaCZL .done1,#mermaid-svg-yTEHyS6eohyYaCZL .done2,#mermaid-svg-yTEHyS6eohyYaCZL .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-yTEHyS6eohyYaCZL .doneText0,#mermaid-svg-yTEHyS6eohyYaCZL .doneText1,#mermaid-svg-yTEHyS6eohyYaCZL .doneText2,#mermaid-svg-yTEHyS6eohyYaCZL .doneText3{fill:#000 !important}#mermaid-svg-yTEHyS6eohyYaCZL .crit0,#mermaid-svg-yTEHyS6eohyYaCZL .crit1,#mermaid-svg-yTEHyS6eohyYaCZL .crit2,#mermaid-svg-yTEHyS6eohyYaCZL .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-yTEHyS6eohyYaCZL .activeCrit0,#mermaid-svg-yTEHyS6eohyYaCZL .activeCrit1,#mermaid-svg-yTEHyS6eohyYaCZL .activeCrit2,#mermaid-svg-yTEHyS6eohyYaCZL .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-yTEHyS6eohyYaCZL .doneCrit0,#mermaid-svg-yTEHyS6eohyYaCZL .doneCrit1,#mermaid-svg-yTEHyS6eohyYaCZL .doneCrit2,#mermaid-svg-yTEHyS6eohyYaCZL .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-yTEHyS6eohyYaCZL .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-yTEHyS6eohyYaCZL .milestoneText{font-style:italic}#mermaid-svg-yTEHyS6eohyYaCZL .doneCritText0,#mermaid-svg-yTEHyS6eohyYaCZL .doneCritText1,#mermaid-svg-yTEHyS6eohyYaCZL .doneCritText2,#mermaid-svg-yTEHyS6eohyYaCZL .doneCritText3{fill:#000 !important}#mermaid-svg-yTEHyS6eohyYaCZL .activeCritText0,#mermaid-svg-yTEHyS6eohyYaCZL .activeCritText1,#mermaid-svg-yTEHyS6eohyYaCZL .activeCritText2,#mermaid-svg-yTEHyS6eohyYaCZL .activeCritText3{fill:#000 !important}#mermaid-svg-yTEHyS6eohyYaCZL .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL g.classGroup text{fill:#9370db;stroke:none;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);font-size:10px}#mermaid-svg-yTEHyS6eohyYaCZL g.classGroup text .title{font-weight:bolder}#mermaid-svg-yTEHyS6eohyYaCZL g.clickable{cursor:pointer}#mermaid-svg-yTEHyS6eohyYaCZL g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-yTEHyS6eohyYaCZL g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-yTEHyS6eohyYaCZL .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-yTEHyS6eohyYaCZL .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-yTEHyS6eohyYaCZL .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-yTEHyS6eohyYaCZL .dashed-line{stroke-dasharray:3}#mermaid-svg-yTEHyS6eohyYaCZL #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yTEHyS6eohyYaCZL #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yTEHyS6eohyYaCZL #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-yTEHyS6eohyYaCZL #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-yTEHyS6eohyYaCZL #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yTEHyS6eohyYaCZL #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yTEHyS6eohyYaCZL #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yTEHyS6eohyYaCZL #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-yTEHyS6eohyYaCZL .commit-id,#mermaid-svg-yTEHyS6eohyYaCZL .commit-msg,#mermaid-svg-yTEHyS6eohyYaCZL .branch-label{fill:lightgrey;color:lightgrey;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL .slice{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-yTEHyS6eohyYaCZL g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-yTEHyS6eohyYaCZL g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-yTEHyS6eohyYaCZL g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-yTEHyS6eohyYaCZL .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-yTEHyS6eohyYaCZL .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-yTEHyS6eohyYaCZL .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-yTEHyS6eohyYaCZL .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-yTEHyS6eohyYaCZL .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-yTEHyS6eohyYaCZL .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-yTEHyS6eohyYaCZL .edgeLabel text{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-yTEHyS6eohyYaCZL .node circle.state-start{fill:black;stroke:black}#mermaid-svg-yTEHyS6eohyYaCZL .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-yTEHyS6eohyYaCZL #statediagram-barbEnd{fill:#9370db}#mermaid-svg-yTEHyS6eohyYaCZL .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-yTEHyS6eohyYaCZL .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-yTEHyS6eohyYaCZL .statediagram-state .divider{stroke:#9370db}#mermaid-svg-yTEHyS6eohyYaCZL .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-yTEHyS6eohyYaCZL .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-yTEHyS6eohyYaCZL .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-yTEHyS6eohyYaCZL .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-yTEHyS6eohyYaCZL .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-yTEHyS6eohyYaCZL .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-yTEHyS6eohyYaCZL .note-edge{stroke-dasharray:5}#mermaid-svg-yTEHyS6eohyYaCZL .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-yTEHyS6eohyYaCZL .error-icon{fill:#522}#mermaid-svg-yTEHyS6eohyYaCZL .error-text{fill:#522;stroke:#522}#mermaid-svg-yTEHyS6eohyYaCZL .edge-thickness-normal{stroke-width:2px}#mermaid-svg-yTEHyS6eohyYaCZL .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-yTEHyS6eohyYaCZL .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-yTEHyS6eohyYaCZL .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-yTEHyS6eohyYaCZL .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-yTEHyS6eohyYaCZL .marker{fill:#333}#mermaid-svg-yTEHyS6eohyYaCZL .marker.cross{stroke:#333} :root { --mermaid-font-family: “trebuchet ms”, verdana, arial;} #mermaid-svg-yTEHyS6eohyYaCZL { color: rgba(0, 0, 0, 0.75); font: ; } «interface» Class01 int chimp int gorilla size() AveryLongClass Class09 C2 C3 Class07 Object[] elementData equals() Class10 >>service>> int id size() Cool Where am i?
学习Java的小伙伴怎们能不会画类图呢,今天我也为大家准备好了,请看展示效果
#mermaid-svg-omkyh9mtkWgFjFlQ .label{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);fill:#333;color:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .label text{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .node rect,#mermaid-svg-omkyh9mtkWgFjFlQ .node circle,#mermaid-svg-omkyh9mtkWgFjFlQ .node ellipse,#mermaid-svg-omkyh9mtkWgFjFlQ .node polygon,#mermaid-svg-omkyh9mtkWgFjFlQ .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-omkyh9mtkWgFjFlQ .node .label{text-align:center;fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .node.clickable{cursor:pointer}#mermaid-svg-omkyh9mtkWgFjFlQ .arrowheadPath{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-omkyh9mtkWgFjFlQ .flowchart-link{stroke:#333;fill:none}#mermaid-svg-omkyh9mtkWgFjFlQ .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-omkyh9mtkWgFjFlQ .edgeLabel rect{opacity:0.9}#mermaid-svg-omkyh9mtkWgFjFlQ .edgeLabel span{color:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-omkyh9mtkWgFjFlQ .cluster text{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ 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-omkyh9mtkWgFjFlQ .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-omkyh9mtkWgFjFlQ text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-omkyh9mtkWgFjFlQ .actor-line{stroke:grey}#mermaid-svg-omkyh9mtkWgFjFlQ .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-omkyh9mtkWgFjFlQ #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .sequenceNumber{fill:#fff}#mermaid-svg-omkyh9mtkWgFjFlQ #sequencenumber{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ #crosshead path{fill:#333;stroke:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .messageText{fill:#333;stroke:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-omkyh9mtkWgFjFlQ .labelText,#mermaid-svg-omkyh9mtkWgFjFlQ .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-omkyh9mtkWgFjFlQ .loopText,#mermaid-svg-omkyh9mtkWgFjFlQ .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-omkyh9mtkWgFjFlQ .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-omkyh9mtkWgFjFlQ .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-omkyh9mtkWgFjFlQ .noteText,#mermaid-svg-omkyh9mtkWgFjFlQ .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-omkyh9mtkWgFjFlQ .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-omkyh9mtkWgFjFlQ .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-omkyh9mtkWgFjFlQ .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-omkyh9mtkWgFjFlQ .mermaid-main-font{font-family:“trebuchet ms”, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ .section{stroke:none;opacity:0.2}#mermaid-svg-omkyh9mtkWgFjFlQ .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-omkyh9mtkWgFjFlQ .section2{fill:#fff400}#mermaid-svg-omkyh9mtkWgFjFlQ .section1,#mermaid-svg-omkyh9mtkWgFjFlQ .section3{fill:#fff;opacity:0.2}#mermaid-svg-omkyh9mtkWgFjFlQ .sectionTitle0{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .sectionTitle1{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .sectionTitle2{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .sectionTitle3{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-omkyh9mtkWgFjFlQ .grid .tick text{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ .grid path{stroke-width:0}#mermaid-svg-omkyh9mtkWgFjFlQ .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-omkyh9mtkWgFjFlQ .task{stroke-width:2}#mermaid-svg-omkyh9mtkWgFjFlQ .taskText{text-anchor:middle;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ .taskText:not([font-size]){font-size:11px}#mermaid-svg-omkyh9mtkWgFjFlQ .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-omkyh9mtkWgFjFlQ .task.clickable{cursor:pointer}#mermaid-svg-omkyh9mtkWgFjFlQ .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-omkyh9mtkWgFjFlQ .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-omkyh9mtkWgFjFlQ .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-omkyh9mtkWgFjFlQ .taskText0,#mermaid-svg-omkyh9mtkWgFjFlQ .taskText1,#mermaid-svg-omkyh9mtkWgFjFlQ .taskText2,#mermaid-svg-omkyh9mtkWgFjFlQ .taskText3{fill:#fff}#mermaid-svg-omkyh9mtkWgFjFlQ .task0,#mermaid-svg-omkyh9mtkWgFjFlQ .task1,#mermaid-svg-omkyh9mtkWgFjFlQ .task2,#mermaid-svg-omkyh9mtkWgFjFlQ .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-omkyh9mtkWgFjFlQ .taskTextOutside0,#mermaid-svg-omkyh9mtkWgFjFlQ .taskTextOutside2{fill:#000}#mermaid-svg-omkyh9mtkWgFjFlQ .taskTextOutside1,#mermaid-svg-omkyh9mtkWgFjFlQ .taskTextOutside3{fill:#000}#mermaid-svg-omkyh9mtkWgFjFlQ .active0,#mermaid-svg-omkyh9mtkWgFjFlQ .active1,#mermaid-svg-omkyh9mtkWgFjFlQ .active2,#mermaid-svg-omkyh9mtkWgFjFlQ .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-omkyh9mtkWgFjFlQ .activeText0,#mermaid-svg-omkyh9mtkWgFjFlQ .activeText1,#mermaid-svg-omkyh9mtkWgFjFlQ .activeText2,#mermaid-svg-omkyh9mtkWgFjFlQ .activeText3{fill:#000 !important}#mermaid-svg-omkyh9mtkWgFjFlQ .done0,#mermaid-svg-omkyh9mtkWgFjFlQ .done1,#mermaid-svg-omkyh9mtkWgFjFlQ .done2,#mermaid-svg-omkyh9mtkWgFjFlQ .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-omkyh9mtkWgFjFlQ .doneText0,#mermaid-svg-omkyh9mtkWgFjFlQ .doneText1,#mermaid-svg-omkyh9mtkWgFjFlQ .doneText2,#mermaid-svg-omkyh9mtkWgFjFlQ .doneText3{fill:#000 !important}#mermaid-svg-omkyh9mtkWgFjFlQ .crit0,#mermaid-svg-omkyh9mtkWgFjFlQ .crit1,#mermaid-svg-omkyh9mtkWgFjFlQ .crit2,#mermaid-svg-omkyh9mtkWgFjFlQ .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-omkyh9mtkWgFjFlQ .activeCrit0,#mermaid-svg-omkyh9mtkWgFjFlQ .activeCrit1,#mermaid-svg-omkyh9mtkWgFjFlQ .activeCrit2,#mermaid-svg-omkyh9mtkWgFjFlQ .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-omkyh9mtkWgFjFlQ .doneCrit0,#mermaid-svg-omkyh9mtkWgFjFlQ .doneCrit1,#mermaid-svg-omkyh9mtkWgFjFlQ .doneCrit2,#mermaid-svg-omkyh9mtkWgFjFlQ .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-omkyh9mtkWgFjFlQ .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-omkyh9mtkWgFjFlQ .milestoneText{font-style:italic}#mermaid-svg-omkyh9mtkWgFjFlQ .doneCritText0,#mermaid-svg-omkyh9mtkWgFjFlQ .doneCritText1,#mermaid-svg-omkyh9mtkWgFjFlQ .doneCritText2,#mermaid-svg-omkyh9mtkWgFjFlQ .doneCritText3{fill:#000 !important}#mermaid-svg-omkyh9mtkWgFjFlQ .activeCritText0,#mermaid-svg-omkyh9mtkWgFjFlQ .activeCritText1,#mermaid-svg-omkyh9mtkWgFjFlQ .activeCritText2,#mermaid-svg-omkyh9mtkWgFjFlQ .activeCritText3{fill:#000 !important}#mermaid-svg-omkyh9mtkWgFjFlQ .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ g.classGroup text{fill:#9370db;stroke:none;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);font-size:10px}#mermaid-svg-omkyh9mtkWgFjFlQ g.classGroup text .title{font-weight:bolder}#mermaid-svg-omkyh9mtkWgFjFlQ g.clickable{cursor:pointer}#mermaid-svg-omkyh9mtkWgFjFlQ g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-omkyh9mtkWgFjFlQ g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-omkyh9mtkWgFjFlQ .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-omkyh9mtkWgFjFlQ .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-omkyh9mtkWgFjFlQ .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-omkyh9mtkWgFjFlQ .dashed-line{stroke-dasharray:3}#mermaid-svg-omkyh9mtkWgFjFlQ #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-omkyh9mtkWgFjFlQ #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-omkyh9mtkWgFjFlQ #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-omkyh9mtkWgFjFlQ #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-omkyh9mtkWgFjFlQ #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-omkyh9mtkWgFjFlQ #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-omkyh9mtkWgFjFlQ #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-omkyh9mtkWgFjFlQ #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-omkyh9mtkWgFjFlQ .commit-id,#mermaid-svg-omkyh9mtkWgFjFlQ .commit-msg,#mermaid-svg-omkyh9mtkWgFjFlQ .branch-label{fill:lightgrey;color:lightgrey;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ .slice{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-omkyh9mtkWgFjFlQ g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-omkyh9mtkWgFjFlQ g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-omkyh9mtkWgFjFlQ g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-omkyh9mtkWgFjFlQ .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-omkyh9mtkWgFjFlQ .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-omkyh9mtkWgFjFlQ .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-omkyh9mtkWgFjFlQ .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-omkyh9mtkWgFjFlQ .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-omkyh9mtkWgFjFlQ .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-omkyh9mtkWgFjFlQ .edgeLabel text{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-omkyh9mtkWgFjFlQ .node circle.state-start{fill:black;stroke:black}#mermaid-svg-omkyh9mtkWgFjFlQ .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-omkyh9mtkWgFjFlQ #statediagram-barbEnd{fill:#9370db}#mermaid-svg-omkyh9mtkWgFjFlQ .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-omkyh9mtkWgFjFlQ .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-omkyh9mtkWgFjFlQ .statediagram-state .divider{stroke:#9370db}#mermaid-svg-omkyh9mtkWgFjFlQ .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-omkyh9mtkWgFjFlQ .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-omkyh9mtkWgFjFlQ .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-omkyh9mtkWgFjFlQ .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-omkyh9mtkWgFjFlQ .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-omkyh9mtkWgFjFlQ .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-omkyh9mtkWgFjFlQ .note-edge{stroke-dasharray:5}#mermaid-svg-omkyh9mtkWgFjFlQ .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-omkyh9mtkWgFjFlQ .error-icon{fill:#522}#mermaid-svg-omkyh9mtkWgFjFlQ .error-text{fill:#522;stroke:#522}#mermaid-svg-omkyh9mtkWgFjFlQ .edge-thickness-normal{stroke-width:2px}#mermaid-svg-omkyh9mtkWgFjFlQ .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-omkyh9mtkWgFjFlQ .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-omkyh9mtkWgFjFlQ .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-omkyh9mtkWgFjFlQ .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-omkyh9mtkWgFjFlQ .marker{fill:#333}#mermaid-svg-omkyh9mtkWgFjFlQ .marker.cross{stroke:#333} :root { --mermaid-font-family: “trebuchet ms”, verdana, arial;} #mermaid-svg-omkyh9mtkWgFjFlQ { color: rgba(0, 0, 0, 0.75); font: ; } 9311 int num int name size() «interface» 9313 int num int name size() 5期学员 本会成员 PB ZW WX HZ SYS 本次编写者 extend extend 本月负责人 大数据
有了这样子的图你的博客是否能够清楚明了的将你的思路介绍出来呢?
源码展示
classDiagram
9313 <| – 5期学员:extend
<>9313
9313:size()
9313:int num
9313:int name
9311 <| – 5期学员:extend
9311:size()
9311:int num
9311:int name
本会成员–* PB
本会成员–>ZW : 本月负责人
本会成员–>WX:大数据