Markdown骚操作｜字体颜色、字体背景、流程图一网打尽【建议收藏】

白色玫瑰 程序猿

时间: 2023-07-11 阅读: 1 字数:114159

html markdown
{}
本文二哥带领大家来学习一下Markdown文档编辑的那些高端操作。 推荐MD编辑器：Typora 注：除最后一个图外，均可用于CSDN Markdown！ 注：文中代码块中给出书写格式，下方给出效果展示。 别犹豫了！先收藏吧！ 一...

本文二哥带领大家来学习一下Markdown文档编辑的那些高端操作。

推荐MD编辑器：Typora

<font color="red" face="黑体">注：除最后一个图外，均可用于CSDN Markdown！</font> <font color="red" face="黑体">注：文中代码块中给出书写格式，下方给出效果展示。</font>

<font color="red" face="黑体" size="5.5">别犹豫了！先收藏吧！</font>

一、标题

为了使段落展示的更加清晰，Markdown中设置了多级标题的表达形式，级别用#来表示，几个#就表示几级标题，代码形式如下：

<font color="red">注意#后面要有一个空格</font>

# 一级标题
## 二级标题
### 三级标题

示例如下：

一级标题

二级标题

三级标题

<hr>

二、字体

Markdown中提供了如下几种常用的字体格式。

斜体

*斜体*
_斜体_

斜体 斜体

<hr>

粗体

**粗体**
__粗体__

粗体 粗体

<hr>

粗斜体

***粗斜体***
___粗斜体___

粗斜体 粗斜体

<hr>

删除线

~~删除线~~

<s>删除线</s>

<hr>

分割线

***
---

<hr> <hr>

脚注

[^脚注]

Typora展示如下： 在这里插入图片描述

<hr>

除了markdown中自带的几种字体格式之外，我们还可以配合HTML代码进行字体的改变。

文本颜色

<font color="red">红色字体</font>
<font color="green">绿色字体</font>
<font color="blue">蓝色字体</font>

<font color="red">红色字体</font> <font color="green">绿色字体</font> <font color="blue">蓝色字体</font>

<hr>

字体格式

<font face="黑体">黑体字</font>

<font face="黑体">黑体字</font>

<hr>

文本大小

<font size=5>5号字</font>

<font size="5">5号字</font>

<hr>

组合使用

<font color="red" face="黑体" size=5>别犹豫了！点赞吧！</font>

<font color="red" face="黑体" size="5">别犹豫了！点赞吧！</font>

<hr>

文本高亮显示

<mark>高亮显示</mark>

<mark>高亮显示</mark>

<hr>

添加背景颜色

<table><tr><td bgcolor="yellow">搞点颜色</td></tr></table>nn```
 
 <table>  <tbody>   <tr>   <td bgcolor="yellow">搞点颜色</td>   </tr>  </tbody> </table>nn <hr> 
 
文本注音
 
 >  
  
当我们遇到生僻字或者为了突出某个字的时候可以使用注音的方式。

<ruby>饕餮 <rt>tāo tiè</rt></ruby>

 
 
<ruby>饕餮 <rt>tāo tiè</rt></ruby>
 
 <hr> 
 
下划线

<u>下划线</u>

 
 
<u>下划线</u>
 
 <hr> 
 
## 三、列表和板块
 
 
为了使得排版更清晰，Markdown中提供了多种格式的列表和排版块供我们组合使用。
 
 
无序列表
 
 
<font color="red">注意符号后面要有一个空格</font>
  • 无序列表
  • 无序列表
  • 无序列表
 
 
  无序列表  
 
  无序列表  
 
  无序列表  
 <hr> 
 
有序列表
  1. 第一项
  2. 第二项
  3. 第三项
 
 
  第一项  第二项  第三项  
 <hr> 
 
嵌套列表
 
 >  
  
使用嵌套列表的时候需要在子列表的前面加上4个空格。
  • 第一级
    • 第二级
 
 
  第一级 
   
   第二级     
 <hr> 
 
区块引用

外层区块

第一层区块

第二层区块

 
 >  
  
外层区块
 
  >  
   
第一层区块
 
   >  
   
第二层区块
 
   
 
  
 
 
 
 <hr> 
 
片段代码块
 
 >  
  
Markdown中提供了能够随时在文本中添加片段代码块的方法。字符为键盘左上角的按键`。

hello World

 
 
hello World
 
 <hr> 
 
代码块
 
 >  
  
Markdown中的代码块可以匹配几乎类型的代码样式。在使用的时候我们可以选择指定（也可不指定）对应的语言。

​python print('Hello World') ​

print('Hello World')

 
 <hr> 
 
公式块
 
 >  
  
对于数学相关学者来说，通常需要编写数学公式，在Markdown可以使用$$来作为公式块，在其中进行Latex类型公式的输入。

$y=x^2+1$

$$y=x^2+1$$

 
 
 y = x 2 + 1 y=x^2+1 y=x2+1
 
 
 y = x 2 + 1 y=x^2+1 y=x2+1
 
 <hr> 
 
## 四、图片与表格
 
 
Markdown在提供了控制图片添加大小、位置的方法。
 
 
MD添加图片（传统方式）

alt 属性文本

 
 
使用img添加图片
 
 >  
  
使用img添加图片的时候，width用于控制宽度，height用于控制高度，div align用于控制位置（left、center、right）
 
 
 
 


![](https://img-home.csdnimg.cn/images/20201124032511.png) 
 <hr> 
 
添加表格
 
 >  
  
MD中添加表格的方式比较单一，添加表格的时候可以控制文字的对齐方式：
 
  
   -: 设置内容和标题栏居右对齐。   :- 设置内容和标题栏居左对齐。   :-: 设置内容和标题栏居中对齐。
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格 
 
 <table>  <thead>   <tr>   <th align="left">左对齐</th>   <th align="right">右对齐</th>   <th align="center">居中对齐</th>   </tr>  </thead>  <tbody>   <tr>   <td align="left">单元格</td>   <td align="right">单元格</td>   <td align="center">单元格</td>   </tr>   <tr>   <td align="left">单元格</td>   <td align="right">单元格</td>   <td align="center">单元格</td>   </tr>  </tbody> </table>nn <hr> 
 
添加链接

这是二哥的主页： 二哥不像程序员

 
 
这是二哥的主页： <a href="https://blog.csdn.net/qq_35164554?spm=1000.2115.3001.5343">二哥不像程序员</a>
 
 <hr> 
 
## 五、流程图
 
 
很多人觉得Markdown的缺点就在于无法绘图，其实我们可以使用多种代码的组合进行多个流程图的绘制，示例如下：
 
 
横向流程图

​mermaid graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图] ​

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

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}</style> 
   <style>#mermaid-svg-S5HgFnJya1a7Gc7p {
   color: rgba(0, 0, 0, 0.75);
   font: ;
  }</style> <g> 
   <g class="output"> 
    <g class="clusters"></g> 
    <g class="edgePaths"> 
     <g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;"> 
      
</path> 
      <defs> 
      <marker id="arrowhead66" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> 
       
</path> 
      </marker> 
      </defs> 
     </g> 
     <g class="edgePath LS-B LE-C" style="opacity: 1;" id="L-B-C"> 
      
</path> 
      <defs> 
      <marker id="arrowhead67" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> 
       
</path> 
      </marker> 
      </defs> 
     </g> 
     <g class="edgePath LS-C LE-D" style="opacity: 1;" id="L-C-D"> 
      
</path> 
      <defs> 
      <marker id="arrowhead68" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> 
       
</path> 
      </marker> 
      </defs> 
     </g> 
     <g class="edgePath LS-C LE-E" style="opacity: 1;" id="L-C-E"> 
      
</path> 
      <defs> 
      <marker id="arrowhead69" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> 
       
</path> 
      </marker> 
      </defs> 
     </g> 
    </g> 
    <g class="edgeLabels"> 
     <g class="edgeLabel" transform="" style="opacity: 1;"> 
      <g transform="translate(0,0)" class="label"> 
      <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> 
      <foreignobject width="0" height="0"> 
         
        
      </foreignobject> 
      </g> 
     </g> 
     <g class="edgeLabel" style="opacity: 1;" transform=""> 
      <g transform="translate(0,0)" class="label"> 
      <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> 
      <foreignobject width="0" height="0"> 
         
        
      </foreignobject> 
      </g> 
     </g> 
     <g class="edgeLabel" style="opacity: 1;" transform="translate(394.7859344482422,31)"> 
      <g transform="translate(-13.5703125,-13)" class="label"> 
      <rect rx="0" ry="0" width="27.140625" height="26" style="fill:#e8e8e8;"></rect> 
      <foreignobject width="27.140625" height="26"> 
        a=1 
        
      </foreignobject> 
      </g> 
     </g> 
     <g class="edgeLabel" style="opacity: 1;" transform="translate(394.7859344482422,127)"> 
      <g transform="translate(-13.5703125,-13)" class="label"> 
      <rect rx="0" ry="0" width="27.140625" height="26" style="fill:#e8e8e8;"></rect> 
      <foreignobject width="27.140625" height="26"> 
        a=2 
        
      </foreignobject> 
      </g> 
     </g> 
    </g> 
    <g class="nodes"> 
     <g class="node default" id="A" transform="translate(58,79)" style="opacity: 1;"> 
      <rect rx="0" ry="0" x="-26" y="-23" width="52" height="46" class="label-container"></rect> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-16,-13)"> 
       <foreignobject width="32" height="26"> 
        
         方形 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
     <g class="node default" style="opacity: 1;" id="B" transform="translate(184,79)"> 
      <rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-16,-13)"> 
       <foreignobject width="32" height="26"> 
        
         圆角 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
     <g class="node default" style="opacity: 1;" id="C" transform="translate(308.1078109741211,79)"> 
      
</polygon> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-20.453125,-13)"> 
       <foreignobject width="40.90625" height="26"> 
        
         条件a 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
     <g class="node default" style="opacity: 1;" id="D" transform="translate(463.8093719482422,31)"> 
      <rect rx="0" ry="0" x="-30.453125" y="-23" width="60.90625" height="46" class="label-container"></rect> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-20.453125,-13)"> 
       <foreignobject width="40.90625" height="26"> 
        
         结果1 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
     <g class="node default" style="opacity: 1;" id="E" transform="translate(463.8093719482422,127)"> 
      <rect rx="0" ry="0" x="-30.453125" y="-23" width="60.90625" height="46" class="label-container"></rect> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-20.453125,-13)"> 
       <foreignobject width="40.90625" height="26"> 
        
         结果2 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
     <g class="node default" style="opacity: 1;" id="F" transform="translate(58,175)"> 
      <rect rx="0" ry="0" x="-50" y="-23" width="100" height="46" class="label-container"></rect> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-40,-13)"> 
       <foreignobject width="80" height="26"> 
        
         横向流程图 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
    </g> 
   </g> 
   </g> 
  </svg> 
  
 
纵向流程图

​mermaid graph TD A[方形] --> B(圆角) B --> C{条件a} C --> |a=1| D[结果1] C --> |a=2| E[结果2] F[竖向流程图] ​

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

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}</style> 
   <style>#mermaid-svg-DbnajYoeTYHtbGQK {
   color: rgba(0, 0, 0, 0.75);
   font: ;
  }</style> <g> 
   <g class="output"> 
    <g class="clusters"></g> 
    <g class="edgePaths"> 
     <g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;"> 
      
</path> 
      <defs> 
      <marker id="arrowhead89" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> 
       
</path> 
      </marker> 
      </defs> 
     </g> 
     <g class="edgePath LS-B LE-C" style="opacity: 1;" id="L-B-C"> 
      
</path> 
      <defs> 
      <marker id="arrowhead90" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> 
       
</path> 
      </marker> 
      </defs> 
     </g> 
     <g class="edgePath LS-C LE-D" style="opacity: 1;" id="L-C-D"> 
      
</path> 
      <defs> 
      <marker id="arrowhead91" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> 
       
</path> 
      </marker> 
      </defs> 
     </g> 
     <g class="edgePath LS-C LE-E" style="opacity: 1;" id="L-C-E"> 
      
</path> 
      <defs> 
      <marker id="arrowhead92" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto"> 
       
</path> 
      </marker> 
      </defs> 
     </g> 
    </g> 
    <g class="edgeLabels"> 
     <g class="edgeLabel" transform="" style="opacity: 1;"> 
      <g transform="translate(0,0)" class="label"> 
      <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> 
      <foreignobject width="0" height="0"> 
         
        
      </foreignobject> 
      </g> 
     </g> 
     <g class="edgeLabel" style="opacity: 1;" transform=""> 
      <g transform="translate(0,0)" class="label"> 
      <rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect> 
      <foreignobject width="0" height="0"> 
         
        
      </foreignobject> 
      </g> 
     </g> 
     <g class="edgeLabel" style="opacity: 1;" transform="translate(38.453125,334.2156219482422)"> 
      <g transform="translate(-13.5703125,-13)" class="label"> 
      <rect rx="0" ry="0" width="27.140625" height="26" style="fill:#e8e8e8;"></rect> 
      <foreignobject width="27.140625" height="26"> 
        a=1 
        
      </foreignobject> 
      </g> 
     </g> 
     <g class="edgeLabel" style="opacity: 1;" transform="translate(149.359375,334.2156219482422)"> 
      <g transform="translate(-13.5703125,-13)" class="label"> 
      <rect rx="0" ry="0" width="27.140625" height="26" style="fill:#e8e8e8;"></rect> 
      <foreignobject width="27.140625" height="26"> 
        a=2 
        
      </foreignobject> 
      </g> 
     </g> 
    </g> 
    <g class="nodes"> 
     <g class="node default" id="A" transform="translate(93.90625,31)" style="opacity: 1;"> 
      <rect rx="0" ry="0" x="-26" y="-23" width="52" height="46" class="label-container"></rect> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-16,-13)"> 
       <foreignobject width="32" height="26"> 
        
         方形 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
     <g class="node default" style="opacity: 1;" id="B" transform="translate(93.90625,127)"> 
      <rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-16,-13)"> 
       <foreignobject width="32" height="26"> 
        
         圆角 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
     <g class="node default" style="opacity: 1;" id="C" transform="translate(93.90625,248.1078109741211)"> 
      
</polygon> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-20.453125,-13)"> 
       <foreignobject width="40.90625" height="26"> 
        
         条件a 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
     <g class="node default" style="opacity: 1;" id="D" transform="translate(38.453125,395.2156219482422)"> 
      <rect rx="0" ry="0" x="-30.453125" y="-23" width="60.90625" height="46" class="label-container"></rect> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-20.453125,-13)"> 
       <foreignobject width="40.90625" height="26"> 
        
         结果1 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
     <g class="node default" style="opacity: 1;" id="E" transform="translate(149.359375,395.2156219482422)"> 
      <rect rx="0" ry="0" x="-30.453125" y="-23" width="60.90625" height="46" class="label-container"></rect> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-20.453125,-13)"> 
       <foreignobject width="40.90625" height="26"> 
        
         结果2 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
     <g class="node default" style="opacity: 1;" id="F" transform="translate(219.90625,31)"> 
      <rect rx="0" ry="0" x="-50" y="-23" width="100" height="46" class="label-container"></rect> 
      <g class="label" transform="translate(0,0)"> 
      <g transform="translate(-40,-13)"> 
       <foreignobject width="80" height="26"> 
        
         竖向流程图 
         
       </foreignobject> 
      </g> 
      </g> 
     </g> 
    </g> 
   </g> 
   </g> 
  </svg> 
  
 
纵向标准流程图

​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 ​

 
  
  <svg height="577.03125" version="1.1" width="416.03125" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;" viewbox="0 0 416.03125 577.03125" preserveaspectratio="xMidYMid meet"> <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    Created with Raphaël 2.3.0 
   </desc> <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
   <marker id="raphael-marker-endblock33-objjc9y6" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   <marker id="raphael-marker-endblock33-objsvwk9" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   <marker id="raphael-marker-endblock33-objnex3h" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   <marker id="raphael-marker-endblock33-obj4bjfa" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   <marker id="raphael-marker-endblock33-obj8p46w" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   <marker id="raphael-marker-endblock33-objqpqhb" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   </defs> <rect x="0" y="0" width="62" height="35.5" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="st" transform="matrix(1,0,0,1,69.3438,33.4219)"></rect> <text x="10" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="stt" class="flowchartt" transform="matrix(1,0,0,1,69.3438,33.4219)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     开始框 
   </tspan> 
   </text> <rect x="0" y="0" width="62" height="35.5" rx="0" ry="0" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="op" transform="matrix(1,0,0,1,69.3438,152.3438)"></rect> <text x="10" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="opt" class="flowchartt" transform="matrix(1,0,0,1,69.3438,152.3438)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     处理框 
   </tspan> 
   </text> 
</path> <text x="54.171875" y="49.171875" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="condt" class="flowchartt" transform="matrix(1,0,0,1,2,239.8438)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     判断框(是或否?) 
   </tspan> 
   </text> 
</path> <text x="30" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="iot" class="flowchartt" transform="matrix(1,0,0,1,35.3438,421.6094)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     输入输出框 
   </tspan> 
   </text> <rect x="0" y="0" width="62" height="35.5" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="e" transform="matrix(1,0,0,1,69.3438,540.5313)"></rect> <text x="10" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="et" class="flowchartt" transform="matrix(1,0,0,1,69.3438,540.5313)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     结束框 
   </tspan> 
   </text> <rect x="0" y="0" width="82" height="35.5" rx="0" ry="0" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="sub1" transform="matrix(1,0,0,1,308.0313,271.2656)"></rect> <rect x="10" y="0" width="62" height="35.5" rx="0" ry="0" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: sans-serif; font-weight: normal;" stroke-width="1" id="sub1i" transform="matrix(1,0,0,1,308.0313,271.2656)"></rect> <text x="20" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="sub1t" class="flowchartt" transform="matrix(1,0,0,1,308.0313,271.2656)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     子流程 
   </tspan> 
   </text> 
</path> 
</path> 
</path> <text x="105.34375" y="348.1875" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     yes 
   </tspan> 
   </text> 
</path> <text x="203.6875" y="279.015625" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     no 
   </tspan> 
   </text> 
</path> 
</path> 
  </svg> 
  
 
横向标准流程图

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

 
  
  <svg height="339.1875" version="1.1" width="778.71875" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;" viewbox="0 0 778.71875 339.1875" preserveaspectratio="xMidYMid meet"> <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    Created with Raphaël 2.3.0 
   </desc> <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
   <marker id="raphael-marker-endblock33-obj1z6ky" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   <marker id="raphael-marker-endblock33-objge6ex" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   <marker id="raphael-marker-endblock33-objeax53" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   <marker id="raphael-marker-endblock33-objs4h30" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   <marker id="raphael-marker-endblock33-objcoc6o" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   <marker id="raphael-marker-endblock33-obj9485i" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> 
   </marker> 
   </defs> <rect x="0" y="0" width="62" height="35.5" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="st" transform="matrix(1,0,0,1,69.3438,33.4219)"></rect> <text x="10" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="stt" class="flowchartt" transform="matrix(1,0,0,1,69.3438,33.4219)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     开始框 
   </tspan> 
   </text> <rect x="0" y="0" width="62" height="35.5" rx="0" ry="0" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="op" transform="matrix(1,0,0,1,250.6875,33.4219)"></rect> <text x="10" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="opt" class="flowchartt" transform="matrix(1,0,0,1,250.6875,33.4219)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     处理框 
   </tspan> 
   </text> 
</path> <text x="54.171875" y="49.171875" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="condt" class="flowchartt" transform="matrix(1,0,0,1,364.6875,2)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     判断框(是或否?) 
   </tspan> 
   </text> 
</path> <text x="30" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="iot" class="flowchartt" transform="matrix(1,0,0,1,398.0313,183.7656)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     输入输出框 
   </tspan> 
   </text> <rect x="0" y="0" width="62" height="35.5" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="e" transform="matrix(1,0,0,1,432.0313,302.6875)"></rect> <text x="10" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="et" class="flowchartt" transform="matrix(1,0,0,1,432.0313,302.6875)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     结束框 
   </tspan> 
   </text> <rect x="0" y="0" width="82" height="35.5" rx="0" ry="0" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="sub1" transform="matrix(1,0,0,1,670.7188,33.4219)"></rect> <rect x="10" y="0" width="62" height="35.5" rx="0" ry="0" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: sans-serif; font-weight: normal;" stroke-width="1" id="sub1i" transform="matrix(1,0,0,1,670.7188,33.4219)"></rect> <text x="20" y="17.75" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="sub1t" class="flowchartt" transform="matrix(1,0,0,1,670.7188,33.4219)" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     子流程 
   </tspan> 
   </text> 
</path> 
</path> 
</path> <text x="468.03125" y="110.34375" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     yes 
   </tspan> 
   </text> 
</path> <text x="566.375" y="41.171875" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" stroke-width="1"> 
   <tspan dy="4.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     no 
   </tspan> 
   </text> 
</path> 
</path> 
  </svg> 
  
 
UML时序图

​mermaid sequenceDiagram 二哥->>女神: 你好吗?（请求） Note right of 女神: 女神的答复 Note left of 二哥: 二哥在等待回复 女神-->>二哥: 我很好，什么事？(响应) 二哥->>女神: 今天天气不错 女神-->>二哥:下雨呢，滚！ ​

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

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}</style> 
   <style>#mermaid-svg-IBYzkOEpsmxJKHGU {
   color: rgba(0, 0, 0, 0.75);
   font: ;
  }</style> <g></g> <g> 
   </line> 
   <rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> 
   <text x="75" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"> 
    <tspan x="75" dy="0">
      二哥 
    </tspan> 
   </text> 
   </g> <g> 
   </line> 
   <rect x="242" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> 
   <text x="317" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"> 
    <tspan x="317" dy="0">
      女神 
    </tspan> 
   </text> 
   </g> <defs> 
   <marker id="arrowhead" refx="5" refy="2" markerwidth="6" markerheight="4" orient="auto"> 
    
</path> 
   </marker> 
   </defs> <defs> 
   <marker id="crosshead" markerwidth="15" markerheight="8" orient="auto" refx="16" refy="4"> 
    
</path> 
    
</path> 
   </marker> 
   </defs> <defs> 
   <marker id="sequencenumber" refx="15" refy="15" markerwidth="60" markerheight="40" orient="auto"> 
    <circle cx="15" cy="15" r="6"></circle> 
   </marker> 
   </defs> <text x="196" y="80" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
    你好吗?（请求） 
   </text> </line> <g> 
   <rect x="342" y="131" fill="#EDF2AE" stroke="#666" width="150" height="36" rx="0" ry="0" class="note"></rect> 
   <text x="417" y="136" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="noteText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 14px; font-weight: 400;"> 
    <tspan x="417">
      女神的答复 
    </tspan> 
   </text> 
   </g> <g> 
   <rect x="-100" y="177" fill="#EDF2AE" stroke="#666" width="150" height="36" rx="0" ry="0" class="note"></rect> 
   <text x="-25" y="182" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="noteText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 14px; font-weight: 400;"> 
    <tspan x="-25">
      二哥在等待回复 
    </tspan> 
   </text> 
   </g> <text x="196" y="228" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
    我很好，什么事？(响应) 
   </text> </line> <text x="196" y="276" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
    今天天气不错 
   </text> </line> <text x="196" y="324" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
    下雨呢，滚！ 
   </text> </line> <g> 
   <rect x="0" y="377" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> 
   <text x="75" y="409.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"> 
    <tspan x="75" dy="0">
      二哥 
    </tspan> 
   </text> 
   </g> <g> 
   <rect x="242" y="377" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> 
   <text x="317" y="409.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"> 
    <tspan x="317" dy="0">
      女神 
    </tspan> 
   </text> 
   </g> 
  </svg> 
  
 
UML时序图

​mermaid %% 时序图例子,-> 直线，-->虚线，->>实线箭头 sequenceDiagram participant 二哥 participant 三哥 二哥->>四弟: 中午吃啥？ loop 吃啥呢？ 三哥->三哥: ***** end Note right of 二哥: 烤肉 火锅 <br/>麻辣烫... 三哥->>二哥: 你说吃啥! 二哥-->>三哥:你想 四弟->>三哥: 三哥吃啥? 三哥-->>四弟: 不知道! ​

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

:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}</style> 
   <style>#mermaid-svg-6mbCuc0SZwMCKpzI {
   color: rgba(0, 0, 0, 0.75);
   font: ;
  }</style> <g></g> <g> 
   </line> 
   <rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> 
   <text x="75" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"> 
    <tspan x="75" dy="0">
      二哥 
    </tspan> 
   </text> 
   </g> <g> 
   </line> 
   <rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> 
   <text x="275" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"> 
    <tspan x="275" dy="0">
      三哥 
    </tspan> 
   </text> 
   </g> <g> 
   </line> 
   <rect x="400" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> 
   <text x="475" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"> 
    <tspan x="475" dy="0">
      四弟 
    </tspan> 
   </text> 
   </g> <defs> 
   <marker id="arrowhead" refx="5" refy="2" markerwidth="6" markerheight="4" orient="auto"> 
    
</path> 
   </marker> 
   </defs> <defs> 
   <marker id="crosshead" markerwidth="15" markerheight="8" orient="auto" refx="16" refy="4"> 
    
</path> 
    
</path> 
   </marker> 
   </defs> <defs> 
   <marker id="sequencenumber" refx="15" refy="15" markerwidth="60" markerheight="40" orient="auto"> 
    <circle cx="15" cy="15" r="6"></circle> 
   </marker> 
   </defs> <text x="275" y="80" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
    中午吃啥？ 
   </text> </line> <text x="275" y="173" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
    ***** 
   </text> 
</path> <g> 
   </line> 
   </line> 
   </line> 
   </line> 
   
</polygon> 
   <text x="215" y="136" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="labelText" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
     loop 
   </text> 
   <text x="300" y="141" text-anchor="middle" class="loopText" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;"> 
    <tspan x="300">
      [吃啥呢？] 
    </tspan> 
   </text> 
   </g> <g> 
   <rect x="100" y="294" fill="#EDF2AE" stroke="#666" width="150" height="52" rx="0" ry="0" class="note"></rect> 
   <text x="175" y="299" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="noteText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 14px; font-weight: 400;"> 
    <tspan x="175">
      烤肉 火锅 
    </tspan> 
   </text> 
   <text x="175" y="315" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="noteText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 14px; font-weight: 400;"> 
    <tspan x="175">
      麻辣烫... 
    </tspan> 
   </text> 
   </g> <text x="175" y="361" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
    你说吃啥! 
   </text> </line> <text x="175" y="409" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
    你想 
   </text> </line> <text x="375" y="457" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
    三哥吃啥? 
   </text> </line> <text x="375" y="513" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: &quot;trebuchet ms&quot;, verdana, arial; font-size: 16px; font-weight: 400;">
    不知道! 
   </text> </line> <g> 
   <rect x="0" y="566" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> 
   <text x="75" y="598.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"> 
    <tspan x="75" dy="0">
      二哥 
    </tspan> 
   </text> 
   </g> <g> 
   <rect x="200" y="566" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> 
   <text x="275" y="598.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"> 
    <tspan x="275" dy="0">
      三哥 
    </tspan> 
   </text> 
   </g> <g> 
   <rect x="400" y="566" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> 
   <text x="475" y="598.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, sans-serif;"> 
    <tspan x="475" dy="0">
      四弟 
    </tspan> 
   </text> 
   </g> 
  </svg> 
  
 
甘特图

​mermaid %% 语法示例 gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计 需求:done, des1, 2021-09-01,2021-09-03 原型:active, des2, 2021-09-05, 2d UI设计:des3, after des2, 5d 未来任务:des4, after des3, 5d section 开发 准备:crit, done, 2021-09-01,24h 设计框架:crit, done, after des2, 2d 开发:crit, active, 3d 补充:crit, 5d section 测试 功能测试:active, a1, after des3, 3d 压力测试:after a1 , 20h 测试报告: 48h ​

```

Typora中的显示如下： 在这里插入图片描述

<table> <tbody> <tr> <td bgcolor="yellow">❤️ 整理不易，点个赞吧～❤️</td> </tr> </tbody> </table>nn > 原文地址：https://blog.csdn.net/qq_35164554/article/details/120013432?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905959516800227485936%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905959516800227485936&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-27-120013432-null-null.142^v88^control,239^v2^insert_chatgpt&utm_term=markdown

本文章网址:https://www.sjxi.cn/detil/fd7d731fe0214800930aa7d1ebcf7e71

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号