前言
全局设置
效果类
- 修改字体、颜色、字体大小、行高等
- 文字居中(靠右)对齐
- 图片转存至相对路径
- 图片缩放
- 图片居中
内容类
- Excel的表格与Markdown表格的互转
- `mermaid`相关
- - 使用特殊文字
  - 使用`classDef`语法来自定义`mermaid`节点（以自动机为例）
- 产生目录
- 手动分页
- - 临时解决
  - 全局解决
- 禁止导出时，长表格的分页
- Markdown转思维导图
- Markdown转docx之后删除图片的可选文字（通常为文件名）
- 标题自动编号

前言

BP，即Best Practice，最佳实践，记录一些我在使用Typora时的技巧，以期帮助更多的人。
标题中强调了是Typora而不是Markdown，是因为Markdown只是一种标记语言，不同的编辑器对其的渲染策略是不一样的。Typora基于Electron，本质上是一个魔改过的Chromium浏览器（不信可以用Shift+F12打开Console). 所以下面介绍的技巧很多是前端的内容，是HTML/CSS的特性发挥的作用而不是Markdown本身的特性，在其他编辑器中可能有用也可能没有用。
笔者现在基本都使用Markdown来写文章，本地的编辑器基本都用Typora，无论是实验报告、个人随笔还是技术分享。期间也尝试过一些其他的方案，比如Notion，但是直到其能够完全在本地工作之前，我不会将其作为首选。
Markdown满足了我对写作的期待，其借助语法标记实现格式控制，而不是虚无缥缈的按钮与快捷键。并且作为文本格式，能很好地进行版本控制，也方便编写脚本来生成。编写内容基本不用抬手去碰鼠标。

全局设置

Typora的全局设置是通过修改css文件实现的。
- css文件位置：选择文件->偏好设置->打开主题文件夹
- 如果你只想要修改某一个主题下的css属性，那么就去修改<主题名>.css。
- 如果你想让某个css属性在所有主题下都生效，那么就去修改base.user.css，如果没有，则新建该空文本文件并修改。
如果下面介绍的内容需要全局设置，笔者会特别标注。
所有对于css文件的修改都需要重启Typora才能生效。

效果类

修改字体、颜色、字体大小、行高等

借助CSS实现即可，可以使用<span>/<p>/<div>标签。
例子：使用Consolas字体，大小为30px，行高100px，红色加粗斜体。必须标注字体才能使用其他属性
- <span style='font: bold italic 30px/100px "Consolas"; color:red;'>Test Message</span>
- Test Message
还可以尝试更多的CSS属性，这里不再赘述。

文字居中(靠右)对齐

使用了HTML的<p>标签的align属性，也可以使用CSS.
<p align='center'>这是一段测试文字</p>
- 这是一段测试文字
或者使用CSS的text-align属性：<p style='text-align:center'>这是一段测试文字</p>'
- 这是一段测试文字
右对齐改成将center改成right即可。
<p align='right'>这是一段测试文字</p>
- 这是一段测试文字
或 <p style='text-align:right'>这是一段测试文字</p>
- 这是一段测试文字

图片转存至相对路径

这样做的好处是，无论是粘帖还是插入的本地/网络图片，都会在文档所在文件夹下的同名.assets文件夹保存副本，并且文档内插入的路径都是相对路径，方便对图片的统一管理和分享。
打开文件->偏好设置->图像，选择
- 插入图片是，赋值图片到./${filename}.assets
- 并设置优先使用相对路径、对本地图片应用、对网络图片应用、自动转义。

图片缩放

Markdown标准的插入图片语法是![]()，这种语法本身并没有定义缩放，但是在Typora中，你有以下方式来做到。
这是一张没有处理过的图片（Go语言的吉祥物，一只地鼠）
右击图片，选择缩放图片（非100%，选择100%是不会有改变的），Typora会将![]()改成<img>标签来实现。这是最通用的做法。
- <img src="Typora%20Best%20Practice.assets/go_avatar.png" alt="Go Avatar" style="zoom:50%;" />
- 现在你也可以通过修改zoom的百分比来调整。
其他还有以下方法，可以到markdown中插入图片怎么定义图片的大小或比例？ - 知乎查看
- 其他编辑器对Markdown的魔改。
- 使用支持缩放的图床。
- 使用CSS选择器来定义特殊记号。

图片居中

注意，你在Typora中默认看到的图片的位置与导出的PDF不一定一致。比如你粘贴时，在Typora中看到是居中的，但是导出时可能就变成靠左对齐了。
使用HTML的<center>标签即可
- 最简单的方法，甚至可以粘贴多张图片居中。
首先将Mardown默认的![]()语法转换成<img>标签，参考图片缩放一节。右击选择缩放图片——比例选择非100%的任何一个即可。
然后在其前后增加<center></center即可，这样导出时也一定是居中的。
<center><img src="Typora%20Best%20Practice.assets/go_avatar.png" alt="Go Avatar" style="zoom:50%;" /></center>
甚至可以放多张图。
- <center><img src="Typora%20Best%20Practice.assets/go_avatar.png" alt="Go Avatar" style="zoom:50%;" /> <img src="Typora%20Best%20Practice.assets/go_avatar.png" alt="Go Avatar" style="zoom:50%;" /> <img src="Typora%20Best%20Practice.assets/go_avatar.png" alt="Go Avatar" style="zoom:50%;" /></center>\

内容类

Excel的表格与Markdown表格的互转

这个其实和Typora没什么关系，只是讲一下怎么在不同表示的表格之间互转。
使用Table Convert Online - table to markdown,csv,json,latex table,excel,sql,xml在线工具。
选择右上角的Import，根据原数据的类型导入数据，点击Import Data.
然后在页面底部找到需要导出的格式即可。

`mermaid`相关

使用特殊文字

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

使用`classDef`语法来自定义`mermaid`节点（以自动机为例）

mermaid支持使用classDef来定义类，以使用自定义的svg属性，可以画出非常漂亮的图。
classDef的基本语法为classDef <自定义的类名> <svg属性>:<该属性的值>, <svg属性>:<该属性的值>...;
之后将某个节点应用该类时，使用以下语法
- 之前已经定义该节点，只做修改：<节点名>:::<自定义的类名>
- 之前未定义该节点，在定义时就应用该类：<节点名>["节点内容"]:::<自定义的类名>
  - 可以使用{},<>,(())等自定义节点形状。
比如设置一个节点不填充背景。
- ```
  graph td;classDef t fill:none;node1["普通的节点"]node2(("不填充背景的节点")):::t
```
- #mermaid-svg-AO1ct2H1vSVtK3gl .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .label text{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .node rect,#mermaid-svg-AO1ct2H1vSVtK3gl .node circle,#mermaid-svg-AO1ct2H1vSVtK3gl .node ellipse,#mermaid-svg-AO1ct2H1vSVtK3gl .node polygon,#mermaid-svg-AO1ct2H1vSVtK3gl .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-AO1ct2H1vSVtK3gl .node .label{text-align:center;fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .node.clickable{cursor:pointer}#mermaid-svg-AO1ct2H1vSVtK3gl .arrowheadPath{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-AO1ct2H1vSVtK3gl .flowchart-link{stroke:#333;fill:none}#mermaid-svg-AO1ct2H1vSVtK3gl .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-AO1ct2H1vSVtK3gl .edgeLabel rect{opacity:0.9}#mermaid-svg-AO1ct2H1vSVtK3gl .edgeLabel span{color:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-AO1ct2H1vSVtK3gl .cluster text{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl 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-AO1ct2H1vSVtK3gl .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-AO1ct2H1vSVtK3gl text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-AO1ct2H1vSVtK3gl .actor-line{stroke:grey}#mermaid-svg-AO1ct2H1vSVtK3gl .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-AO1ct2H1vSVtK3gl #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .sequenceNumber{fill:#fff}#mermaid-svg-AO1ct2H1vSVtK3gl #sequencenumber{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl #crosshead path{fill:#333;stroke:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .messageText{fill:#333;stroke:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-AO1ct2H1vSVtK3gl .labelText,#mermaid-svg-AO1ct2H1vSVtK3gl .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-AO1ct2H1vSVtK3gl .loopText,#mermaid-svg-AO1ct2H1vSVtK3gl .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-AO1ct2H1vSVtK3gl .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-AO1ct2H1vSVtK3gl .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-AO1ct2H1vSVtK3gl .noteText,#mermaid-svg-AO1ct2H1vSVtK3gl .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-AO1ct2H1vSVtK3gl .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-AO1ct2H1vSVtK3gl .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-AO1ct2H1vSVtK3gl .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-AO1ct2H1vSVtK3gl .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl .section{stroke:none;opacity:0.2}#mermaid-svg-AO1ct2H1vSVtK3gl .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-AO1ct2H1vSVtK3gl .section2{fill:#fff400}#mermaid-svg-AO1ct2H1vSVtK3gl .section1,#mermaid-svg-AO1ct2H1vSVtK3gl .section3{fill:#fff;opacity:0.2}#mermaid-svg-AO1ct2H1vSVtK3gl .sectionTitle0{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .sectionTitle1{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .sectionTitle2{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .sectionTitle3{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-AO1ct2H1vSVtK3gl .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl .grid path{stroke-width:0}#mermaid-svg-AO1ct2H1vSVtK3gl .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-AO1ct2H1vSVtK3gl .task{stroke-width:2}#mermaid-svg-AO1ct2H1vSVtK3gl .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl .taskText:not([font-size]){font-size:11px}#mermaid-svg-AO1ct2H1vSVtK3gl .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-AO1ct2H1vSVtK3gl .task.clickable{cursor:pointer}#mermaid-svg-AO1ct2H1vSVtK3gl .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-AO1ct2H1vSVtK3gl .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-AO1ct2H1vSVtK3gl .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-AO1ct2H1vSVtK3gl .taskText0,#mermaid-svg-AO1ct2H1vSVtK3gl .taskText1,#mermaid-svg-AO1ct2H1vSVtK3gl .taskText2,#mermaid-svg-AO1ct2H1vSVtK3gl .taskText3{fill:#fff}#mermaid-svg-AO1ct2H1vSVtK3gl .task0,#mermaid-svg-AO1ct2H1vSVtK3gl .task1,#mermaid-svg-AO1ct2H1vSVtK3gl .task2,#mermaid-svg-AO1ct2H1vSVtK3gl .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-AO1ct2H1vSVtK3gl .taskTextOutside0,#mermaid-svg-AO1ct2H1vSVtK3gl .taskTextOutside2{fill:#000}#mermaid-svg-AO1ct2H1vSVtK3gl .taskTextOutside1,#mermaid-svg-AO1ct2H1vSVtK3gl .taskTextOutside3{fill:#000}#mermaid-svg-AO1ct2H1vSVtK3gl .active0,#mermaid-svg-AO1ct2H1vSVtK3gl .active1,#mermaid-svg-AO1ct2H1vSVtK3gl .active2,#mermaid-svg-AO1ct2H1vSVtK3gl .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-AO1ct2H1vSVtK3gl .activeText0,#mermaid-svg-AO1ct2H1vSVtK3gl .activeText1,#mermaid-svg-AO1ct2H1vSVtK3gl .activeText2,#mermaid-svg-AO1ct2H1vSVtK3gl .activeText3{fill:#000 !important}#mermaid-svg-AO1ct2H1vSVtK3gl .done0,#mermaid-svg-AO1ct2H1vSVtK3gl .done1,#mermaid-svg-AO1ct2H1vSVtK3gl .done2,#mermaid-svg-AO1ct2H1vSVtK3gl .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-AO1ct2H1vSVtK3gl .doneText0,#mermaid-svg-AO1ct2H1vSVtK3gl .doneText1,#mermaid-svg-AO1ct2H1vSVtK3gl .doneText2,#mermaid-svg-AO1ct2H1vSVtK3gl .doneText3{fill:#000 !important}#mermaid-svg-AO1ct2H1vSVtK3gl .crit0,#mermaid-svg-AO1ct2H1vSVtK3gl .crit1,#mermaid-svg-AO1ct2H1vSVtK3gl .crit2,#mermaid-svg-AO1ct2H1vSVtK3gl .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-AO1ct2H1vSVtK3gl .activeCrit0,#mermaid-svg-AO1ct2H1vSVtK3gl .activeCrit1,#mermaid-svg-AO1ct2H1vSVtK3gl .activeCrit2,#mermaid-svg-AO1ct2H1vSVtK3gl .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-AO1ct2H1vSVtK3gl .doneCrit0,#mermaid-svg-AO1ct2H1vSVtK3gl .doneCrit1,#mermaid-svg-AO1ct2H1vSVtK3gl .doneCrit2,#mermaid-svg-AO1ct2H1vSVtK3gl .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-AO1ct2H1vSVtK3gl .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-AO1ct2H1vSVtK3gl .milestoneText{font-style:italic}#mermaid-svg-AO1ct2H1vSVtK3gl .doneCritText0,#mermaid-svg-AO1ct2H1vSVtK3gl .doneCritText1,#mermaid-svg-AO1ct2H1vSVtK3gl .doneCritText2,#mermaid-svg-AO1ct2H1vSVtK3gl .doneCritText3{fill:#000 !important}#mermaid-svg-AO1ct2H1vSVtK3gl .activeCritText0,#mermaid-svg-AO1ct2H1vSVtK3gl .activeCritText1,#mermaid-svg-AO1ct2H1vSVtK3gl .activeCritText2,#mermaid-svg-AO1ct2H1vSVtK3gl .activeCritText3{fill:#000 !important}#mermaid-svg-AO1ct2H1vSVtK3gl .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-AO1ct2H1vSVtK3gl g.classGroup text .title{font-weight:bolder}#mermaid-svg-AO1ct2H1vSVtK3gl g.clickable{cursor:pointer}#mermaid-svg-AO1ct2H1vSVtK3gl g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-AO1ct2H1vSVtK3gl g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-AO1ct2H1vSVtK3gl .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-AO1ct2H1vSVtK3gl .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-AO1ct2H1vSVtK3gl .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-AO1ct2H1vSVtK3gl .dashed-line{stroke-dasharray:3}#mermaid-svg-AO1ct2H1vSVtK3gl #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-AO1ct2H1vSVtK3gl #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-AO1ct2H1vSVtK3gl #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-AO1ct2H1vSVtK3gl #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-AO1ct2H1vSVtK3gl #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-AO1ct2H1vSVtK3gl #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-AO1ct2H1vSVtK3gl #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-AO1ct2H1vSVtK3gl #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-AO1ct2H1vSVtK3gl .commit-id,#mermaid-svg-AO1ct2H1vSVtK3gl .commit-msg,#mermaid-svg-AO1ct2H1vSVtK3gl .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-AO1ct2H1vSVtK3gl g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-AO1ct2H1vSVtK3gl g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-AO1ct2H1vSVtK3gl g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-AO1ct2H1vSVtK3gl .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-AO1ct2H1vSVtK3gl .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-AO1ct2H1vSVtK3gl .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-AO1ct2H1vSVtK3gl .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-AO1ct2H1vSVtK3gl .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-AO1ct2H1vSVtK3gl .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-AO1ct2H1vSVtK3gl .edgeLabel text{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-AO1ct2H1vSVtK3gl .node circle.state-start{fill:black;stroke:black}#mermaid-svg-AO1ct2H1vSVtK3gl .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-AO1ct2H1vSVtK3gl #statediagram-barbEnd{fill:#9370db}#mermaid-svg-AO1ct2H1vSVtK3gl .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-AO1ct2H1vSVtK3gl .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-AO1ct2H1vSVtK3gl .statediagram-state .divider{stroke:#9370db}#mermaid-svg-AO1ct2H1vSVtK3gl .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-AO1ct2H1vSVtK3gl .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-AO1ct2H1vSVtK3gl .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-AO1ct2H1vSVtK3gl .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-AO1ct2H1vSVtK3gl .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-AO1ct2H1vSVtK3gl .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-AO1ct2H1vSVtK3gl .note-edge{stroke-dasharray:5}#mermaid-svg-AO1ct2H1vSVtK3gl .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-AO1ct2H1vSVtK3gl .error-icon{fill:#522}#mermaid-svg-AO1ct2H1vSVtK3gl .error-text{fill:#522;stroke:#522}#mermaid-svg-AO1ct2H1vSVtK3gl .edge-thickness-normal{stroke-width:2px}#mermaid-svg-AO1ct2H1vSVtK3gl .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-AO1ct2H1vSVtK3gl .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-AO1ct2H1vSVtK3gl .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-AO1ct2H1vSVtK3gl .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-AO1ct2H1vSVtK3gl .marker{fill:#333}#mermaid-svg-AO1ct2H1vSVtK3gl .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-AO1ct2H1vSVtK3gl .t > * { fill:none !important; } #mermaid-svg-AO1ct2H1vSVtK3gl .t tspan { !important; } #mermaid-svg-AO1ct2H1vSVtK3gl {color: rgba(0, 0, 0, 0.75);font: ;}
  
  普通的节点
  
  不填充背景的节点
连外框也不想要。可以将内容设置为空格，来制造一个看不见的节点，提供箭头（见自动机绘制）。
- ```
  graph TD;classDef t fill:none, stroke:none;node1["普通的节点"]node2(("不填充背景也不填充外框的节点")):::t
```
- #mermaid-svg-vREAPrycUgDy8DJU .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-vREAPrycUgDy8DJU .label text{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU .node rect,#mermaid-svg-vREAPrycUgDy8DJU .node circle,#mermaid-svg-vREAPrycUgDy8DJU .node ellipse,#mermaid-svg-vREAPrycUgDy8DJU .node polygon,#mermaid-svg-vREAPrycUgDy8DJU .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-vREAPrycUgDy8DJU .node .label{text-align:center;fill:#333}#mermaid-svg-vREAPrycUgDy8DJU .node.clickable{cursor:pointer}#mermaid-svg-vREAPrycUgDy8DJU .arrowheadPath{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-vREAPrycUgDy8DJU .flowchart-link{stroke:#333;fill:none}#mermaid-svg-vREAPrycUgDy8DJU .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-vREAPrycUgDy8DJU .edgeLabel rect{opacity:0.9}#mermaid-svg-vREAPrycUgDy8DJU .edgeLabel span{color:#333}#mermaid-svg-vREAPrycUgDy8DJU .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-vREAPrycUgDy8DJU .cluster text{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU 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-vREAPrycUgDy8DJU .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-vREAPrycUgDy8DJU text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-vREAPrycUgDy8DJU .actor-line{stroke:grey}#mermaid-svg-vREAPrycUgDy8DJU .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-vREAPrycUgDy8DJU .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-vREAPrycUgDy8DJU #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-vREAPrycUgDy8DJU .sequenceNumber{fill:#fff}#mermaid-svg-vREAPrycUgDy8DJU #sequencenumber{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU #crosshead path{fill:#333;stroke:#333}#mermaid-svg-vREAPrycUgDy8DJU .messageText{fill:#333;stroke:#333}#mermaid-svg-vREAPrycUgDy8DJU .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-vREAPrycUgDy8DJU .labelText,#mermaid-svg-vREAPrycUgDy8DJU .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-vREAPrycUgDy8DJU .loopText,#mermaid-svg-vREAPrycUgDy8DJU .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-vREAPrycUgDy8DJU .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-vREAPrycUgDy8DJU .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-vREAPrycUgDy8DJU .noteText,#mermaid-svg-vREAPrycUgDy8DJU .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-vREAPrycUgDy8DJU .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-vREAPrycUgDy8DJU .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-vREAPrycUgDy8DJU .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-vREAPrycUgDy8DJU .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU .section{stroke:none;opacity:0.2}#mermaid-svg-vREAPrycUgDy8DJU .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-vREAPrycUgDy8DJU .section2{fill:#fff400}#mermaid-svg-vREAPrycUgDy8DJU .section1,#mermaid-svg-vREAPrycUgDy8DJU .section3{fill:#fff;opacity:0.2}#mermaid-svg-vREAPrycUgDy8DJU .sectionTitle0{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU .sectionTitle1{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU .sectionTitle2{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU .sectionTitle3{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-vREAPrycUgDy8DJU .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU .grid path{stroke-width:0}#mermaid-svg-vREAPrycUgDy8DJU .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-vREAPrycUgDy8DJU .task{stroke-width:2}#mermaid-svg-vREAPrycUgDy8DJU .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU .taskText:not([font-size]){font-size:11px}#mermaid-svg-vREAPrycUgDy8DJU .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-vREAPrycUgDy8DJU .task.clickable{cursor:pointer}#mermaid-svg-vREAPrycUgDy8DJU .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-vREAPrycUgDy8DJU .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-vREAPrycUgDy8DJU .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-vREAPrycUgDy8DJU .taskText0,#mermaid-svg-vREAPrycUgDy8DJU .taskText1,#mermaid-svg-vREAPrycUgDy8DJU .taskText2,#mermaid-svg-vREAPrycUgDy8DJU .taskText3{fill:#fff}#mermaid-svg-vREAPrycUgDy8DJU .task0,#mermaid-svg-vREAPrycUgDy8DJU .task1,#mermaid-svg-vREAPrycUgDy8DJU .task2,#mermaid-svg-vREAPrycUgDy8DJU .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-vREAPrycUgDy8DJU .taskTextOutside0,#mermaid-svg-vREAPrycUgDy8DJU .taskTextOutside2{fill:#000}#mermaid-svg-vREAPrycUgDy8DJU .taskTextOutside1,#mermaid-svg-vREAPrycUgDy8DJU .taskTextOutside3{fill:#000}#mermaid-svg-vREAPrycUgDy8DJU .active0,#mermaid-svg-vREAPrycUgDy8DJU .active1,#mermaid-svg-vREAPrycUgDy8DJU .active2,#mermaid-svg-vREAPrycUgDy8DJU .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-vREAPrycUgDy8DJU .activeText0,#mermaid-svg-vREAPrycUgDy8DJU .activeText1,#mermaid-svg-vREAPrycUgDy8DJU .activeText2,#mermaid-svg-vREAPrycUgDy8DJU .activeText3{fill:#000 !important}#mermaid-svg-vREAPrycUgDy8DJU .done0,#mermaid-svg-vREAPrycUgDy8DJU .done1,#mermaid-svg-vREAPrycUgDy8DJU .done2,#mermaid-svg-vREAPrycUgDy8DJU .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-vREAPrycUgDy8DJU .doneText0,#mermaid-svg-vREAPrycUgDy8DJU .doneText1,#mermaid-svg-vREAPrycUgDy8DJU .doneText2,#mermaid-svg-vREAPrycUgDy8DJU .doneText3{fill:#000 !important}#mermaid-svg-vREAPrycUgDy8DJU .crit0,#mermaid-svg-vREAPrycUgDy8DJU .crit1,#mermaid-svg-vREAPrycUgDy8DJU .crit2,#mermaid-svg-vREAPrycUgDy8DJU .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-vREAPrycUgDy8DJU .activeCrit0,#mermaid-svg-vREAPrycUgDy8DJU .activeCrit1,#mermaid-svg-vREAPrycUgDy8DJU .activeCrit2,#mermaid-svg-vREAPrycUgDy8DJU .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-vREAPrycUgDy8DJU .doneCrit0,#mermaid-svg-vREAPrycUgDy8DJU .doneCrit1,#mermaid-svg-vREAPrycUgDy8DJU .doneCrit2,#mermaid-svg-vREAPrycUgDy8DJU .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-vREAPrycUgDy8DJU .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-vREAPrycUgDy8DJU .milestoneText{font-style:italic}#mermaid-svg-vREAPrycUgDy8DJU .doneCritText0,#mermaid-svg-vREAPrycUgDy8DJU .doneCritText1,#mermaid-svg-vREAPrycUgDy8DJU .doneCritText2,#mermaid-svg-vREAPrycUgDy8DJU .doneCritText3{fill:#000 !important}#mermaid-svg-vREAPrycUgDy8DJU .activeCritText0,#mermaid-svg-vREAPrycUgDy8DJU .activeCritText1,#mermaid-svg-vREAPrycUgDy8DJU .activeCritText2,#mermaid-svg-vREAPrycUgDy8DJU .activeCritText3{fill:#000 !important}#mermaid-svg-vREAPrycUgDy8DJU .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-vREAPrycUgDy8DJU g.classGroup text .title{font-weight:bolder}#mermaid-svg-vREAPrycUgDy8DJU g.clickable{cursor:pointer}#mermaid-svg-vREAPrycUgDy8DJU g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-vREAPrycUgDy8DJU g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-vREAPrycUgDy8DJU .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-vREAPrycUgDy8DJU .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-vREAPrycUgDy8DJU .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-vREAPrycUgDy8DJU .dashed-line{stroke-dasharray:3}#mermaid-svg-vREAPrycUgDy8DJU #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-vREAPrycUgDy8DJU #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-vREAPrycUgDy8DJU #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-vREAPrycUgDy8DJU #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-vREAPrycUgDy8DJU #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-vREAPrycUgDy8DJU #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-vREAPrycUgDy8DJU #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-vREAPrycUgDy8DJU #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-vREAPrycUgDy8DJU .commit-id,#mermaid-svg-vREAPrycUgDy8DJU .commit-msg,#mermaid-svg-vREAPrycUgDy8DJU .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-vREAPrycUgDy8DJU g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-vREAPrycUgDy8DJU g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-vREAPrycUgDy8DJU g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-vREAPrycUgDy8DJU .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-vREAPrycUgDy8DJU .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-vREAPrycUgDy8DJU .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-vREAPrycUgDy8DJU .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-vREAPrycUgDy8DJU .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-vREAPrycUgDy8DJU .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-vREAPrycUgDy8DJU .edgeLabel text{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-vREAPrycUgDy8DJU .node circle.state-start{fill:black;stroke:black}#mermaid-svg-vREAPrycUgDy8DJU .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-vREAPrycUgDy8DJU #statediagram-barbEnd{fill:#9370db}#mermaid-svg-vREAPrycUgDy8DJU .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-vREAPrycUgDy8DJU .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-vREAPrycUgDy8DJU .statediagram-state .divider{stroke:#9370db}#mermaid-svg-vREAPrycUgDy8DJU .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-vREAPrycUgDy8DJU .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-vREAPrycUgDy8DJU .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-vREAPrycUgDy8DJU .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-vREAPrycUgDy8DJU .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-vREAPrycUgDy8DJU .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-vREAPrycUgDy8DJU .note-edge{stroke-dasharray:5}#mermaid-svg-vREAPrycUgDy8DJU .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-vREAPrycUgDy8DJU .error-icon{fill:#522}#mermaid-svg-vREAPrycUgDy8DJU .error-text{fill:#522;stroke:#522}#mermaid-svg-vREAPrycUgDy8DJU .edge-thickness-normal{stroke-width:2px}#mermaid-svg-vREAPrycUgDy8DJU .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-vREAPrycUgDy8DJU .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-vREAPrycUgDy8DJU .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-vREAPrycUgDy8DJU .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-vREAPrycUgDy8DJU .marker{fill:#333}#mermaid-svg-vREAPrycUgDy8DJU .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-vREAPrycUgDy8DJU .t > * { fill:none !important; stroke:none !important; } #mermaid-svg-vREAPrycUgDy8DJU .t tspan { !important; } #mermaid-svg-vREAPrycUgDy8DJU {color: rgba(0, 0, 0, 0.75);font: ;}
  
  普通的节点
  
  不填充背景也不填充外框的节点
绘制一个漂亮的自动机
- ```
  graph LR;classDef invis fill:none, stroke:none;classDef stroke stroke-width:4px;dummy[" "]:::invisnode1(("1"))node2(("2"))node3(("3"))node4(("4")):::strokedummy-->node1node1--"a"-->node2node1--"b"-->node3node2--"ε"-->node4node3--"a"-->node4
```
- #mermaid-svg-ItAMfr7qJql3gq4T .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-ItAMfr7qJql3gq4T .label text{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T .node rect,#mermaid-svg-ItAMfr7qJql3gq4T .node circle,#mermaid-svg-ItAMfr7qJql3gq4T .node ellipse,#mermaid-svg-ItAMfr7qJql3gq4T .node polygon,#mermaid-svg-ItAMfr7qJql3gq4T .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-ItAMfr7qJql3gq4T .node .label{text-align:center;fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T .node.clickable{cursor:pointer}#mermaid-svg-ItAMfr7qJql3gq4T .arrowheadPath{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-ItAMfr7qJql3gq4T .flowchart-link{stroke:#333;fill:none}#mermaid-svg-ItAMfr7qJql3gq4T .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-ItAMfr7qJql3gq4T .edgeLabel rect{opacity:0.9}#mermaid-svg-ItAMfr7qJql3gq4T .edgeLabel span{color:#333}#mermaid-svg-ItAMfr7qJql3gq4T .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-ItAMfr7qJql3gq4T .cluster text{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T 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-ItAMfr7qJql3gq4T .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-ItAMfr7qJql3gq4T text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-ItAMfr7qJql3gq4T .actor-line{stroke:grey}#mermaid-svg-ItAMfr7qJql3gq4T .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-ItAMfr7qJql3gq4T .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-ItAMfr7qJql3gq4T #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-ItAMfr7qJql3gq4T .sequenceNumber{fill:#fff}#mermaid-svg-ItAMfr7qJql3gq4T #sequencenumber{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T #crosshead path{fill:#333;stroke:#333}#mermaid-svg-ItAMfr7qJql3gq4T .messageText{fill:#333;stroke:#333}#mermaid-svg-ItAMfr7qJql3gq4T .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-ItAMfr7qJql3gq4T .labelText,#mermaid-svg-ItAMfr7qJql3gq4T .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-ItAMfr7qJql3gq4T .loopText,#mermaid-svg-ItAMfr7qJql3gq4T .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-ItAMfr7qJql3gq4T .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-ItAMfr7qJql3gq4T .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-ItAMfr7qJql3gq4T .noteText,#mermaid-svg-ItAMfr7qJql3gq4T .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-ItAMfr7qJql3gq4T .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-ItAMfr7qJql3gq4T .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-ItAMfr7qJql3gq4T .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-ItAMfr7qJql3gq4T .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T .section{stroke:none;opacity:0.2}#mermaid-svg-ItAMfr7qJql3gq4T .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-ItAMfr7qJql3gq4T .section2{fill:#fff400}#mermaid-svg-ItAMfr7qJql3gq4T .section1,#mermaid-svg-ItAMfr7qJql3gq4T .section3{fill:#fff;opacity:0.2}#mermaid-svg-ItAMfr7qJql3gq4T .sectionTitle0{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T .sectionTitle1{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T .sectionTitle2{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T .sectionTitle3{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-ItAMfr7qJql3gq4T .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T .grid path{stroke-width:0}#mermaid-svg-ItAMfr7qJql3gq4T .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-ItAMfr7qJql3gq4T .task{stroke-width:2}#mermaid-svg-ItAMfr7qJql3gq4T .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T .taskText:not([font-size]){font-size:11px}#mermaid-svg-ItAMfr7qJql3gq4T .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-ItAMfr7qJql3gq4T .task.clickable{cursor:pointer}#mermaid-svg-ItAMfr7qJql3gq4T .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-ItAMfr7qJql3gq4T .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-ItAMfr7qJql3gq4T .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-ItAMfr7qJql3gq4T .taskText0,#mermaid-svg-ItAMfr7qJql3gq4T .taskText1,#mermaid-svg-ItAMfr7qJql3gq4T .taskText2,#mermaid-svg-ItAMfr7qJql3gq4T .taskText3{fill:#fff}#mermaid-svg-ItAMfr7qJql3gq4T .task0,#mermaid-svg-ItAMfr7qJql3gq4T .task1,#mermaid-svg-ItAMfr7qJql3gq4T .task2,#mermaid-svg-ItAMfr7qJql3gq4T .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-ItAMfr7qJql3gq4T .taskTextOutside0,#mermaid-svg-ItAMfr7qJql3gq4T .taskTextOutside2{fill:#000}#mermaid-svg-ItAMfr7qJql3gq4T .taskTextOutside1,#mermaid-svg-ItAMfr7qJql3gq4T .taskTextOutside3{fill:#000}#mermaid-svg-ItAMfr7qJql3gq4T .active0,#mermaid-svg-ItAMfr7qJql3gq4T .active1,#mermaid-svg-ItAMfr7qJql3gq4T .active2,#mermaid-svg-ItAMfr7qJql3gq4T .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-ItAMfr7qJql3gq4T .activeText0,#mermaid-svg-ItAMfr7qJql3gq4T .activeText1,#mermaid-svg-ItAMfr7qJql3gq4T .activeText2,#mermaid-svg-ItAMfr7qJql3gq4T .activeText3{fill:#000 !important}#mermaid-svg-ItAMfr7qJql3gq4T .done0,#mermaid-svg-ItAMfr7qJql3gq4T .done1,#mermaid-svg-ItAMfr7qJql3gq4T .done2,#mermaid-svg-ItAMfr7qJql3gq4T .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-ItAMfr7qJql3gq4T .doneText0,#mermaid-svg-ItAMfr7qJql3gq4T .doneText1,#mermaid-svg-ItAMfr7qJql3gq4T .doneText2,#mermaid-svg-ItAMfr7qJql3gq4T .doneText3{fill:#000 !important}#mermaid-svg-ItAMfr7qJql3gq4T .crit0,#mermaid-svg-ItAMfr7qJql3gq4T .crit1,#mermaid-svg-ItAMfr7qJql3gq4T .crit2,#mermaid-svg-ItAMfr7qJql3gq4T .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-ItAMfr7qJql3gq4T .activeCrit0,#mermaid-svg-ItAMfr7qJql3gq4T .activeCrit1,#mermaid-svg-ItAMfr7qJql3gq4T .activeCrit2,#mermaid-svg-ItAMfr7qJql3gq4T .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-ItAMfr7qJql3gq4T .doneCrit0,#mermaid-svg-ItAMfr7qJql3gq4T .doneCrit1,#mermaid-svg-ItAMfr7qJql3gq4T .doneCrit2,#mermaid-svg-ItAMfr7qJql3gq4T .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-ItAMfr7qJql3gq4T .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-ItAMfr7qJql3gq4T .milestoneText{font-style:italic}#mermaid-svg-ItAMfr7qJql3gq4T .doneCritText0,#mermaid-svg-ItAMfr7qJql3gq4T .doneCritText1,#mermaid-svg-ItAMfr7qJql3gq4T .doneCritText2,#mermaid-svg-ItAMfr7qJql3gq4T .doneCritText3{fill:#000 !important}#mermaid-svg-ItAMfr7qJql3gq4T .activeCritText0,#mermaid-svg-ItAMfr7qJql3gq4T .activeCritText1,#mermaid-svg-ItAMfr7qJql3gq4T .activeCritText2,#mermaid-svg-ItAMfr7qJql3gq4T .activeCritText3{fill:#000 !important}#mermaid-svg-ItAMfr7qJql3gq4T .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-ItAMfr7qJql3gq4T g.classGroup text .title{font-weight:bolder}#mermaid-svg-ItAMfr7qJql3gq4T g.clickable{cursor:pointer}#mermaid-svg-ItAMfr7qJql3gq4T g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-ItAMfr7qJql3gq4T g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-ItAMfr7qJql3gq4T .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-ItAMfr7qJql3gq4T .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-ItAMfr7qJql3gq4T .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-ItAMfr7qJql3gq4T .dashed-line{stroke-dasharray:3}#mermaid-svg-ItAMfr7qJql3gq4T #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-ItAMfr7qJql3gq4T #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-ItAMfr7qJql3gq4T #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-ItAMfr7qJql3gq4T #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-ItAMfr7qJql3gq4T #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-ItAMfr7qJql3gq4T #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-ItAMfr7qJql3gq4T #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-ItAMfr7qJql3gq4T #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-ItAMfr7qJql3gq4T .commit-id,#mermaid-svg-ItAMfr7qJql3gq4T .commit-msg,#mermaid-svg-ItAMfr7qJql3gq4T .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-ItAMfr7qJql3gq4T g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-ItAMfr7qJql3gq4T g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-ItAMfr7qJql3gq4T g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-ItAMfr7qJql3gq4T .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-ItAMfr7qJql3gq4T .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-ItAMfr7qJql3gq4T .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-ItAMfr7qJql3gq4T .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-ItAMfr7qJql3gq4T .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-ItAMfr7qJql3gq4T .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-ItAMfr7qJql3gq4T .edgeLabel text{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-ItAMfr7qJql3gq4T .node circle.state-start{fill:black;stroke:black}#mermaid-svg-ItAMfr7qJql3gq4T .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-ItAMfr7qJql3gq4T #statediagram-barbEnd{fill:#9370db}#mermaid-svg-ItAMfr7qJql3gq4T .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-ItAMfr7qJql3gq4T .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-ItAMfr7qJql3gq4T .statediagram-state .divider{stroke:#9370db}#mermaid-svg-ItAMfr7qJql3gq4T .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-ItAMfr7qJql3gq4T .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-ItAMfr7qJql3gq4T .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-ItAMfr7qJql3gq4T .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-ItAMfr7qJql3gq4T .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-ItAMfr7qJql3gq4T .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-ItAMfr7qJql3gq4T .note-edge{stroke-dasharray:5}#mermaid-svg-ItAMfr7qJql3gq4T .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-ItAMfr7qJql3gq4T .error-icon{fill:#522}#mermaid-svg-ItAMfr7qJql3gq4T .error-text{fill:#522;stroke:#522}#mermaid-svg-ItAMfr7qJql3gq4T .edge-thickness-normal{stroke-width:2px}#mermaid-svg-ItAMfr7qJql3gq4T .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-ItAMfr7qJql3gq4T .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-ItAMfr7qJql3gq4T .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-ItAMfr7qJql3gq4T .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-ItAMfr7qJql3gq4T .marker{fill:#333}#mermaid-svg-ItAMfr7qJql3gq4T .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-ItAMfr7qJql3gq4T .invis > * { fill:none !important; stroke:none !important; } #mermaid-svg-ItAMfr7qJql3gq4T .invis tspan { !important; } #mermaid-svg-ItAMfr7qJql3gq4T .stroke > * { stroke-width:4px !important; } #mermaid-svg-ItAMfr7qJql3gq4T .stroke tspan { !important; } #mermaid-svg-ItAMfr7qJql3gq4T {color: rgba(0, 0, 0, 0.75);font: ;}
  
  a
  
  b
  
  ε
  
  a
  
  1
  
  2
  
  3
  
  4

产生目录

在文档的任何地方输入[TOC]回车即可在该处生成整个文档的目录，与放置的位置无关。
注意只有使用Markdown语法的#标题会被收录进目录，使用<h1>等HTML标签是不会被收录的。（其他级别的标题也一样）。
- 利用这个特性，你可以使用<h1>等来定义装饰性标题，但其不会被收录（但是会影响自动编号）。
[TOC]
- 文章目录
  - 前言
  - 全局设置
  - 效果类
  - - 修改字体、颜色、字体大小、行高等
    - 文字居中(靠右)对齐
    - 图片转存至相对路径
    - 图片缩放
    - 图片居中
  - 内容类
  - - Excel的表格与Markdown表格的互转
    - `mermaid`相关
    - 使用特殊文字
      
      使用`classDef`语法来自定义`mermaid`节点（以自动机为例）
    - 产生目录
    - 手动分页
    - 临时解决
      
      全局解决
    - 禁止导出时，长表格的分页
    - Markdown转思维导图
    - Markdown转docx之后删除图片的可选文字（通常为文件名）
    - 标题自动编号

手动分页

临时解决

在**导出PDF时（注意编辑器内没有页的概念）**往往想要手动分一下页。
借助css的break-after: page;属性实现，这是新的css3的语法。
- css2的对应语法是page-break-after: always;。
分页代码在预览时是看不见的。
<div style='break-after: page;'></div>

这是分页代码的前面一句话。

这是分页代码的后面一句话。

全局解决

要背这样一段代码而且每次都要打出来还是挺麻烦的，我们可以通过定义一个特定的class的div，然后通过修改全局设置，让其自动填充分页代码。
这是一个全局设置。
class的名字可以自己取，甚至可以用中文，我就用pb了（指page break）.
在css文件中增加
- ```
  .pb{break-after: page;}
```
之后再想要分页时，写一个类为pb的div定义即可。
- <div class='pb'></div>

这是分页代码前面一句话。

禁止导出时，长表格的分页

在默认情况下，导出PDF时遇到较长的表格时，Typora不会在当页绘制该表格，而是会大面积留白，然后从下一页开始绘制，显得非常丑陋。
这是一个全局属性。

打开base.user.css，添加以下代码即可。

  @media print {table {page-break-inside: auto;}}

之后再导出时，表格就不会分页了。

Markdown转思维导图

这个倒是与Typora没有什么关系。XMind Zen可以通过Markdown生成思维导图。
在XMind Zen中选择文件->导入->Markdown，即可根据Markdown的内容生成导图。
是不是觉得笔者写作的版面有点奇怪？其实就是为了适应这个功能。
- 使用标题来划分板块，因为之后会生成节点。
- 尽量将文字放在列表中，这样每一个表项都会生成一个叶子节点。
还可以进一步调整样式，使其更好看。

Markdown转docx之后删除图片的可选文字（通常为文件名）

务必使用Typora内置的导出选项调用pandoc导出为docx。 而不是在外部通过pandoc工具手动导出，因为Typora修改了一些pandoc的设置，使其导出更漂亮。
Markdown的![]()语法中，中括号就是图片的标题（或称为可选文字）。
一般在我们粘帖插入图片时，Typora会产生一个随机的文件名，将图片存储在{文档名}.assets文件夹中。同时将图片的标题设置为该随机文件名。
在编辑器或者导出的PDF中，是看不见该标题的，但是导出为Word时，就出现了。
由于在导出的Word中，这些标题的格式都是一样的，所以选中其中一个标题，然后在开始面板、选择选项卡中点击选定所有格式类似的文本即可选中所有的标题，然后按退格键或者删除键即可全部删除。

标题自动编号

这是个老生常谈的问题，Typora本身没有自动编号的功能，官网上给出了一种借助CSS的计数器的实现，可以在编辑器、侧边栏和[TOC]中增加编号。但是注意，这种方式并没有修改Markdown文档，所以在导出PDF的时候，书签内是没有编号的（但是正文和[TOC]中有）。
这是一个全局设置。
参考Typora自动编号功能——最强版_幻心矢的博客-CSDN博客_typora 序号，原理已经说明的足够清楚了，我不再狗尾续貂。
我对其进行了一些修改，主要是
- 完全不对一级标题编号，因为太大，很丑。
- 标号的风格类似1.2.3 这是标题的内容。
修改base.user.css，增加以下内容。

  /*加序号注释见n.css*//* 正文标题区: #write *//* [TOC]目录树区: .md-toc-content *//* 侧边栏的目录大纲区: .sidebar-content *//** * 说明：*     Typora的标题共有6级，从h1到h6。*     我个人觉得h1级的标题太大，所以我的标题都是从h2级开始。*     个人习惯每篇文章都有一个总标题，有一个目录，所以h2级的标题前两个都不会计数。*     一般情况下，我虽然不使用h1级的标题，但是为了以防万一，h1级的标题前两个也都不会计数。*     若想启用h1级标题，就取消包含“content: counter(h1) "."”项的注释，然后将包含“content: counter(h2) "."”的项注释掉即可。*/ /** initialize css counter */#write, .sidebar-content,.md-toc-content{/* 设置全局计数器的基准 *//* 因为我喜欢从h2级标题用起，所以这里设置为h2 */counter-reset: h2}#write h1, .outline-h1, .md-toc-item.md-toc-h1 {counter-reset: h2}#write h2, .outline-h2, .md-toc-item.md-toc-h2 {counter-reset: h3}#write h3, .outline-h3, .md-toc-item.md-toc-h3 {counter-reset: h4}#write h4, .outline-h4, .md-toc-item.md-toc-h4 {counter-reset: h5}#write h5, .outline-h5, .md-toc-item.md-toc-h5 {counter-reset: h6}/** put counter result into headings */#write h1:before,.outline-h1>.outline-item>.outline-label:before,.md-toc-item.md-toc-h1>.md-toc-inner:before {counter-increment: h1;content: counter(h1) ". "}/* 使用h1标题时，去掉前两个h1标题的序号，包括正文标题、目录树和大纲 *//* nth-of-type中的数字表示获取第几个h1元素，请根据情况自行修改。 */#write h1:nth-of-type(1):before,.outline-h1:nth-of-type(1)>.outline-item>.outline-label:before,.md-toc-item.md-toc-h1:nth-of-type(1)>.md-toc-inner:before,#write h1:nth-of-type(2):before,.outline-h1:nth-of-type(2)>.outline-item>.outline-label:before,.md-toc-item.md-toc-h1:nth-of-type(2)>.md-toc-inner:before{counter-reset: h1;content: ""}#write h2:before,.outline-h2>.outline-item>.outline-label:before,.md-toc-item.md-toc-h2>.md-toc-inner:before {counter-increment: h2;content: counter(h2) " "/*". "*/}/* 使用h2标题时，去掉前两个h2标题的序号，包括正文标题、目录树和大纲 *//* nth-of-type中的数字表示获取第几个h2元素，请根据情况自行修改。 */#write h2:nth-of-type(0):before,.outline-h2:nth-of-type(0)>.outline-item>.outline-label:before,.md-toc-item.md-toc-h2:nth-of-type(0)>.md-toc-inner:before,#write h2:nth-of-type(0):before,.outline-h2:nth-of-type(0)>.outline-item>.outline-label:before,.md-toc-item.md-toc-h2:nth-of-type(0)>.md-toc-inner:before{counter-reset: h2;content: ""}#write h3:before,h3.md-focus.md-heading:before, /** override the default style for focused headings */.outline-h3>.outline-item>.outline-label:before,.md-toc-item.md-toc-h3>.md-toc-inner:before {text-decoration: none;counter-increment: h3;/* content: counter(h1) "." counter(h2) "." counter(h3) ". " */content: counter(h2) "." counter(h3) " "}#write h4:before,h4.md-focus.md-heading:before,.outline-h4>.outline-item>.outline-label:before,.md-toc-item.md-toc-h4>.md-toc-inner:before {text-decoration: none;counter-increment: h4;/* content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " */content: counter(h2) "." counter(h3) "." counter(h4) " "}#write h5:before,h5.md-focus.md-heading:before,.outline-h5>.outline-item>.outline-label:before,.md-toc-item.md-toc-h5>.md-toc-inner:before {text-decoration: none;counter-increment: h5;/* content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " */content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "}#write h6:before,h6.md-focus.md-heading:before,.outline-h6>.outline-item>.outline-label:before,.md-toc-item.md-toc-h6>.md-toc-inner:before {text-decoration: none;counter-increment: h6;/* content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " */content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "}/** override the default style for focused headings */#write>h3.md-focus:before,#write>h4.md-focus:before,#write>h5.md-focus:before,#write>h6.md-focus:before,h3.md-focus:before,h4.md-focus:before,h5.md-focus:before,h6.md-focus:before {color: inherit;border: inherit;border-radius: inherit;position: inherit;left:initial;float: none;top:initial;font-size: inherit;padding-left: inherit;padding-right: inherit;vertical-align: inherit;font-weight: inherit;line-height: inherit;}

[Typora Markdown BP] 修改文字格式、图片缩放对齐居中、Excel表格互转、手动分页、表格不分页、Mermaid自定义绘图（以自动机为例）、思维导图导出、word导出删文字、自动编号相关推荐

思维导图 | XMind 8 Update 8 Pro 自动破解版
如果你曾经用过思维导图,那么一定对Xmind不陌生.以前做的比较简单,没有仔细研究,细看才发现原来Xmind竟是这么强大的工具! 有时候时常觉得头脑迷惑,许多事情想不透彻,我想这应该就是欠缺逻辑思维的 ...
markdown 行内公式_如何轻松将笔记转为思维导图(Word、Markdown)
目录简介 Markdown -> XMind Word -> XMind 简介思维导图是一种一种图像式思维的工具,便于我们理解知识之间的逻辑关系. 在我们的学习.生活中,我们习惯于使用 ...
在为知笔记中使用Markdown和思维导图
为知笔记Wiz是一款很好的网摘和笔记工具,作为为知的忠实用户,我在为知收费后第一时间就购买了两年的授权,毕竟这么多年积累的资料都在为知上,我也习惯了使用Wiz来做些工作相关的笔记.为知笔记自带Mark ...
太牛逼了，Markdown 几行字符就可以生成思维导图了！
大家好,我是 JackTian. 我第一次接触Markdown 编辑器,还是从运营这个公众号的一段日子里说起. Markdown 刚开始的文章排版很乱,Markdown 编辑器这东西也从来没听说过,随 ...
思维导图 XMind 闯关之路（第03关）插入图片
本系列文章主要是XMind软件的一个基础教程,文章总纲链接:专题分纲目录思维导图 XMind 闯关之路这里依然以我们以上一关关卡测试为基础,能够做到: 1 子分支插入图片接下来我们开始在 ...
Word文档排版——自动编号
Word文档排版--自动编号背景 1 章节及标题自动编号 1.1 目标 1.2 创建样式 1.3 自动编号 2 图片.表格.公式自动编号 3 图片.表格.公式自动编号时能关联到章节号 4 参考文献自 ...
word插入公式并自动编号
word插入公式并自动编号 [Word公式编号右对齐,自动编号和引用的方法] 首先插入一行三列的表格全部选中,布局中点水平对齐对中间的单元格按ctrl+e居中然后插入公式,对右边的单元格按ctrl ...
Word中如何创建自动编号的标题？
一个月轻松网上挣$50-$1500 Word中如何创建自动编号的标题? 1．为了创建自动编号的标题,风格统一的标题,首先要创建自己的Format Style. 2．从下拉菜单中打开Styles a ...
人工智能AI会话+文字转为markdown格式/思维导图的工具的介绍和使用
AI会话工具和文字转换为markdown格式 1.这里首先要有一个xmind思维导图软件,下载链接在下方. XMind: 2.本章中列举的AI工具是近期国内交火的prompt(文心一言作者还没排上队 ...

[Typora Markdown BP] 修改文字格式、图片缩放对齐居中、Excel表格互转、手动分页、表格不分页、Mermaid自定义绘图（以自动机为例）、思维导图导出、word导出删文字、自动编号

目录

文章目录

前言

全局设置

效果类

修改字体、颜色、字体大小、行高等

文字居中(靠右)对齐

图片转存至相对路径

图片缩放

图片居中

内容类

Excel的表格与Markdown表格的互转

`mermaid`相关

使用特殊文字

使用`classDef`语法来自定义`mermaid`节点（以自动机为例）

产生目录

文章目录

手动分页

临时解决

全局解决

禁止导出时，长表格的分页

Markdown转思维导图

Markdown转docx之后删除图片的可选文字（通常为文件名）

标题自动编号

[Typora Markdown BP] 修改文字格式、图片缩放对齐居中、Excel表格互转、手动分页、表格不分页、Mermaid自定义绘图（以自动机为例）、思维导图导出、word导出删文字、自动编号相关推荐

最新文章

热门文章

[Typora Markdown BP] 修改文字格式、图片缩放对齐居中、Excel表格互转、手动分页、表格不分页、Mermaid自定义绘图（以自动机为例）、思维导图导出、word导出删文字、自动编号

目录

文章目录

前言

全局设置

效果类

修改字体、颜色、字体大小、行高等

文字居中(靠右)对齐

图片转存至相对路径

图片缩放

图片居中

内容类

Excel的表格与Markdown表格的互转

mermaid相关

使用特殊文字

使用classDef语法来自定义mermaid节点（以自动机为例）

产生目录

文章目录

手动分页

临时解决

全局解决

禁止导出时，长表格的分页

Markdown转思维导图

Markdown转docx之后删除图片的可选文字（通常为文件名）

标题自动编号

[Typora Markdown BP] 修改文字格式、图片缩放对齐居中、Excel表格互转、手动分页、表格不分页、Mermaid自定义绘图（以自动机为例）、思维导图导出、word导出删文字、自动编号相关推荐

最新文章

热门文章

`mermaid`相关

使用`classDef`语法来自定义`mermaid`节点（以自动机为例）