Typora学习

文章目录

Typora学习块元素标题目录引用文字无序列表有序列表任务列表代码块数学表达式插入表格脚注 跨度元素链接网址图片斜体加粗下划线删除线文本居中代码标记上下标高亮 图形绘制甘特图Flowchart(标准)流程图Mermaid流程图时序图状态图类图饼图 HTMLHTML

块元素

标题

#一级标题（或Ctrl+1）

目录

[toc]

引用文字

>+空格 + 引用文字

这是引用的文字

无序列表

使用 * + - 都可以创建一个无序列表

这是一个无序列表 空两格生成二级序列

有序列表

使用 1. 2. 3. 创建有序列表

这是一个有序列表

任务列表

\ - [ ] 不勾选 \ - [x] 勾选

这是第一个不勾选任务

这是第一个勾选任务

代码块

多行代码块：```回车即可输入（或者Ctrl+Alt+Z）

class typora(){ System.out.print("```选择语言即可输入代码块"); }

一行代码块：反引号

数学表达式

行内公式：$ ... $行间公式：$$ ... $$,（或者$$+回车）

$$然后回车即$$ \mathbf{V}_1\times\mathbf{V}_2 = \mathbf{X}_3 $$

上标、下标、求和、括号、分式、根号

Typor语法显示效果e^3$ e^3$下标x_0、a_1、T_1$x_0、a_1、T_1$括号[a+b]、\lbrace x-y \rbrace$[a+b]、\{x-y\}$求和\sum$\sum$根号\sqrt{2}、\sqrt{3}$\sqrt{2}、\sqrt{3}$

基本运算符

Typor语法显示效果加减\pm$\pm$乘\times$\times$除\div$÷$求和\sum$\sum$求积\prod$\prod$微分\partial$\partial$积分\int、\displaystylw\int$\int$不大于等于x+y\ngeq z$x+y\ngeqq z$a点ba \cdot b$a\cdot b$a星ba \ast b$a\ast b$分式\frac{a}{b}$\frac{a}{b}$

三角函数、指数、对数

Typor语法显示效果sin\sin(x)$\sin (x)$cos\cos(x)$\cos (x)$tan\tan(x)$\tan (x)$log\log(x)$\log (x)$ln\ln2$\ln 2$

高等数学相关运算符

Typor语法显示效果无穷\infty$\infty$矢量\vec{a}$a$一阶/二阶导数\dot{x}、\ddot{x}$\dot{x}、\ddot{x}$求和上下标\sum_0^3、\sum_{-\infty} ^{\infty}${\sum }_0^3、{\sum }_{-\infty }^{\infty }$算数平均值\bar{a}$\bar{a}$概率分布\hat{a}$\hat{a}$平均数运算\overline{xyz}$\overline{xyz}$开二次方运算\sqrt x$\sqrt{x}$开方\sqrt[开方数]{被开方数}$\sqrt[4]{x+y}$极限\lim{a+b}$\lim a+b$微分运算\frac{\partial x}{\partial y}、\frac{\partial^2 x}{\partial y^2}$\frac{\partial x}{\partial y}、\frac{{\partial }^{2}x}{\partial y^2}$求和\sum^{x \to \infty}_{y \to 0}{\frac{x}{y}}${\sum }_{y\to 0}^{x\to \infty }\frac{x}{y}$矩阵a = \left[\matrix{\alpha_1 & test1 \\alpha_2 & test2 \\alpha_3 & test3 }\right]KaTeX parse error: Undefined control sequence: \matrix at position 11: a = \left[\̲m̲a̲t̲r̲i̲x̲{\alpha_1 & tes…

希腊字母

大写字母typora语法小写字母typora语法$A$A$\alpha$\alpha$B$B$\beta$\beta$\Gamma$\Gamma$\gamma$\gamma$\Delta$\Delta$\delta$\delta$E$E$ϵ$\epsilon$Z$Z$\zeta$\zeta$H$H$\eta$\eta$\Theta$\Theta$\theta$\theta$\Lambda$\Lambda$\lambda$\lambda$\mu$\mu$\xi$\xi$\Pi$\Pi$\pi$\pi$\rho$\rho$\Sigma$\Sigma$\sigma$\sigma${\rm Y}$\Upsilon$T$T$\tau$\tau$\Phi$\Phi$\varphi$\phi$X$X$\chi$\chi$\Psi$\Psi$\psi$\psi$\Omega$\Omega$\omega$\omega

插入表格

|表头1|表头2|或Ctrl+t

表头1表头2

脚注

[^1] 即可添加脚注[^1]

---

跨度元素

链接

[]()创建链接

这是一个带有标题属性的 百度

这是一条没有标题属性的 百度

按住Ctrl然后点击即可跳转到网页

网址

Typora允许用<括号括起来>, 把URL作为链接插入。

Typora还会自动链接标准网址。

www.baidu.com

图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4aTqTbBm-1601866367492)(E:\Pictures\Saved Pictures\12388122_1342680040709.jpg “海鸥”)]

斜体

使用 *单个星号* 或者 _单下划线_ 可以字体倾斜。快捷键 Ctrl + I

这就是斜体

加粗

使用 **两个星号** 或者 __两个下划线__ 可以字体加粗。快捷键 Ctrl + B

这就是加粗

下划线

Ctrl+U

删除线

~_删除线~或（alt+shift+5）

删除线

文本居中

<center>这是要居中的内容

这是要居中的内容 ### 分割线

输入***或者—回车即可，如下

代码标记

使用反引号即可使用该 printf()功能

上下标

可以使用^文本实现上标：X²

可以使用 _文本实现下标：H₂O

高亮

==高亮显示==（或者Ctrl+q）

高亮显示

图形绘制

甘特图

模板例子：

```mermaid

gantt dateFormat YYYY-MM-DD title 第一个甘特图 section 现有任务 已完成 :done, des1, 2020-03-18,2020-03-24 进行中 :active, des2, 2020-03-26, 3d 重要计划 :crit, des3, after des2, 5d 普通计划 : des4, after des3, 3d section 计划任务 准备工作 :done, a1,2020-03-25,2020-03-26 开始时间 :active, a2,2020-03-28,10d 结束时间 : after a2,2d 收尾工作 : 1d

参数解释：

title 标题 dateFormat 日期格式 section 部分名 任务名:参数一, 参数二, 参数三, 参数四，参数五 //参数一：crit（是否重要，红框框） 或者 不填 //参数二：done（已完成）、active（正在进行） 或者 不填(表示为待完成状态) //参数三：取小名 或者 不填 //参数四：任务开始时间 或 after 某个任务 //参数五：任务结束时间 或 持续时间 == 如果：后边只填写了一个持续时间，默认从上一个任务结束的时间开始

Mon 23 Mon 30 Mon 06 已完成 进行中 重要计划 普通计划 准备工作 开始时间 结束时间 收尾工作 现有任务 计划任务 第一个甘特图

Flowchart(标准)流程图

```mermaid flowchat

st=>start: 开始框 op=>operation: 处理框 cond=>condition: 判断框（是或否） sub1=>subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op

Created with Raphaël 2.2.0 开始框 处理框 判断框（是或否） 输入输出框 结束框 子流程 yes no

Mermaid流程图

Top -> Down

```mermaid

graph TD A[老鹰]–吃-->B((小鸡)) A–>C(老鼠) C–>D{鱼}

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

*Left -> Right

```mermaid

graph LR A[老鹰] – 吃 --> B((小鸡)) A – 吃 --> C(蛇) B --吃 --> D{虫} C --> D

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

时序图

语法解释：->> 代表实线箭头，-->> 则代表虚线, ->代表直线， -->则代表虚线

```mermaid

sequenceDiagram A->>B: Hello B, how are you? B–>>A: Great! Note left of A :对A的描述 Note right of B :对B的描述 A->B: We are friend! A–>B: Yes

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

状态图

语法解释：[*] 表示开始或者结束，如果在箭头右边则表示结束

```mermaid

stateDiagram [*] --> ing ing --> [*]

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

类图

语法解释：<|-- 表示继承，+ 表示 public，- 表示 private,语法类似 Java

```mermaid

classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : -int age Animal : -String gender Animal: +isMammal() Animal: +mate() class Duck{ -String beakColor +swim() +quack() } class Fish{ -int sizeInFeet +canEat() } class Zebra{ -bool is_wild +run() }

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

饼图

```mermaid

pie title 第一个饼图 “蛋糕” : 10 “水果” : 10 “肉类” : 40 “蔬菜” : 30 “米饭” : 10

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

HTML

String beakColor +swim() +quack() } class Fish{ -int sizeInFeet +canEat() } class Zebra{ -bool is_wild +run() }

### 饼图 \```mermaid pie title 第一个饼图 "蛋糕" : 10 "水果" : 10 "肉类" : 40 "蔬菜" : 30 "米饭" : 10 ```mermaid pie title 第一个饼图 "蛋糕" : 10 "水果" : 10 "肉类" : 40 "蔬菜" : 30 "米饭" : 10

HTML