本文主要介绍了Makedown的基础语法和扩展语法
注意:
要保持间距,建议标题的前后都要空 1 行# 与标题文本之间也要有 1 个空格,否则会导致阅读困难不要有多余的空格:建议标题要写在一行的开头,结尾也不要有空格建议标题的结尾不要有标点符号建议标题要尽量简短,方便引用粗体语法
**加粗的内容** 或 __加粗内容__斜体语法
*斜体内容* 或 _斜体内容_注意:
粗体和斜体建议使用 * 语法粗体和斜体内容建议不要有空格语法:
==文字==语法:
<u>文字</u>下划线
语法:
我们可以这样引用一个脚注[^脚注] [^脚注]:脚注的说明示例:
我们可以这样应用一个脚注1
Markdown 中的段落由一行或多行文本组成,不同段落之间使用空行来标记
语法说明 1) 如果行与行之间没有空行,则会被视为同意段落
2) 如果行与行之间有空行,则被视为不同的段落
3) 空行是指行内什么都没有,或者只有空格或者制表符
4) 如果想在段内换行,则需要在上一行的结尾插入两个以上的空格然后按回车键
说明:
1) 列表中可以嵌套列表
2) 有序列表和无序列表页可以相互嵌套
使用规范
建议使用 - 标记无序列表如果一个列表中所有的列表项都没有换行,建议使用一个空格如果列表项有换行,则建议给无序列表使用3个空格,给有序列表使用2个空格如果一个列表中的每个列表项都只有1行,建议列表项之间不要有空行如果列表项中有换行,建议在列表项之间空 1 行,语法说明
1) 分隔线使用至少3个以上的 */-/_来标记
2) 行内不能有其他字符
3) 可以在标记符中间加上空格
语法说明
1) 图片地址可以是网络地址,也可以是本地地址
2) 本地图片支持相对领和绝对路径两种方式
文字链接就是把链接地址直接写在文本中
语法:
[链接文字](链接地址)实例:
百度
谷歌
GitHub
把链接地址在某个地方统一定义好,然后在正文中通过“变量”来引用,可读性一下子就变强
引用链接是把链接地址作为“变量”现在Markdown文件的诶不定义好,然后在正文中进行引用
语法:
正文中引用链接标记 [链接文字][链接标记] 在底部链接标记 [链接标记]:链接地址实例:
[百度][1] [1]:www.baidu.com百度
语法说明:
链接标记可以有字母、数字、空格、和标点符号链接标记不区分大小写定义的链接内容可以放在任何位置,建议放在尾页当链接地址是网络地址时要以http/https开头,否则会被识别为本地地址将网址或者邮箱用<>包裹起来会自动转换为超链接
语法:
<URL 或 邮箱地址>实例:
18335909110@163.com
语法:
`代码`实例:
使用 cd ..命令切换到上一级目录
代码块以4个空格或者Tab开头
printf(“hello”);
很多扩展语法提供了围栏代码块,并且支持语法高亮
示例:
若果你想跑路可以执行 `rm -f * /`命令 如果你不想`跑路`请限制执行删除权限 如果代码超过1行,请使用围栏代码块,并显示的声明语言,这样做便于阅读,并且可以显示语法高亮示例:
```python print "hello" ``` shell命令 中不能换行,因此可以在行尾使用 \表示换行建议在有输出内容的Shell命令前加$,没有输出内容的Shell命令前不要加$语法:
> + 引用内容说明:
多行引用也可以在每一行的开头都插入>在引用中可以嵌套引用在引用中可以使用其他Markdown语法段落与换行的格式在引用中也是适用的使用规范:
建议在引用的标记符号>之后添加一个空格建议每一行引用都使用引用符号>不要在引用中添加空行语法:
\特殊符号可以被转义的符号:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E84TR6Bn-1603338479921)(E:\Markdown\image-可以被转义的符号.png)]
语法:
~~被删除的文字~~语法:
使用:包裹表情代码即可示例:
:smile:😄
更多表情符号
标准语法中使用<>包裹的URL地址被自动是别并解析为为超链接
扩展语法可以不是用<>包裹,自动连接只是别以www或http://开头的URL地址
如果不想使用自动连接, 也可以使用 `` 包裹URL地址
语法:
|表头1 | 表头2 | 表头3 | |---- | ---- | -----| |内容1 | 内容2 | 内容3 | |内容1 | 内容2 | 内容3 |说明:
单元格使用|来分割开,建议最前和最后都是用|
单元格和|之间的空格会被移除掉
表头和其他行使用----来分隔
表格对其格式如下
左对齐(默认)::----右对齐:----:居中对齐::----:块级元素(代码区块,引用区块)不能插入表格中
语法:
- [ ] 未勾选 - [x] 已勾选示例:
喝
吃
睡语法:
```语言类型 代码片段 ``` 或者 ~~~语言类型 代码片段 ~~~语法说明:
使用连续 3个 ` 或者3个~~~包裹
锚点,也称书签,用来标记文档特定位置,使用锚点可以跳转到当前文档或者其他文档中指定的标记位置
Markdown会被选人成HTML,在HTML页面中可以通过锚点实现跳转;Github、GitBook项目文档中的目录也是通过锚点实现跳转的
语法:
[锚点描述](#锚点名)说明:
锚点名建议使用字母和数字锚点名区分大小写锚点名中不能含有空格,也不能含有特殊字符示例:
基础语法
一些需要加空格的情况
中文或者英文和数字之间要加空格英文标点符号和后面的字符之间当在中文、英文中使用>表示路径时,两边都需要加空格不加空格的情况
中文标点符号和数字、中文、英文之间不需要添加空格数字和百分号之间数字和单位符号之间英文和数字组合成的名字之间当/表示“或”、“路径”时,与前后的字符之间货币符号之间负号后不加空格全角:中文标点符号,占两个字节
半角:英文标点符号和数字,占 1 个字节
中文排版中,使用全角
英文排版中,使用半角
插入代码围栏
操作快捷键插入代码围栏Ctrl + Shift + K语法:
<u>这段文字有下户线</u> 快捷键: Ctrl + U需要开启设置:【偏好设置】→【Markdown】→【Markdown扩展语法】→【内联公式】
语法:
$数学公式$示例:
分数: $ f(x, y) = \frac{x^2}{y^2} $ 开根号: $ f(x, y) = \sqrt[n]{{x ^ 2} {y ^ 3}} $ 省略号: $ f(x_1, x_2, \ldots, x_n) = x_1 + x_2 + \cdots + x_n $$ f(x, y) = \frac{x2}{y2} $
$ f(x, y) = \sqrt[n]{{x ^ 2} {y ^ 3}} $
$ f(x_1, x_2, \cdots, x_n) = x_1^2 + x_2 + \dots + x_n $
语法:(对比公式中的上标和下标)
~下标内容~ ^上标内容^示例:
H2O
x2 + y2
语法:
==高亮内容==语法:
<!--我是注释-->说明:
在编辑好预览时,注释的内容会被显示在导出 PDF 或 Word 时,注释会被隐藏语法:
$$ 数学公式 $$ 快捷键:Ctrl + Shift + M示例:
$$ \mathbf{V_1} \times \mathbf{V_2} = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{[\partial Y]}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} $$$$ \mathbf{V_1} \times \mathbf{V_2} = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \
\frac{\partial X}{\partial u} & \frac{[\partial Y]}{\partial u} & 0 \
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \
\end{vmatrix} $$
语法:
@[toc]使用说明:
在需要插入目录的地方输入[TOC] 回车即可
我们可以这样引用一个脚注2
Typora提供的序列图语法标记功能是基于开源项目js-sequence-diagrams
语法:
```mermaid sequenceDiagram js-sequence-diagrams 语法 ```示例:
#mermaid-svg-9GtvDvifGzvjXHUA .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-9GtvDvifGzvjXHUA .label text{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA .node rect,#mermaid-svg-9GtvDvifGzvjXHUA .node circle,#mermaid-svg-9GtvDvifGzvjXHUA .node ellipse,#mermaid-svg-9GtvDvifGzvjXHUA .node polygon,#mermaid-svg-9GtvDvifGzvjXHUA .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-9GtvDvifGzvjXHUA .node .label{text-align:center;fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA .node.clickable{cursor:pointer}#mermaid-svg-9GtvDvifGzvjXHUA .arrowheadPath{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-9GtvDvifGzvjXHUA .flowchart-link{stroke:#333;fill:none}#mermaid-svg-9GtvDvifGzvjXHUA .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-9GtvDvifGzvjXHUA .edgeLabel rect{opacity:0.9}#mermaid-svg-9GtvDvifGzvjXHUA .edgeLabel span{color:#333}#mermaid-svg-9GtvDvifGzvjXHUA .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-9GtvDvifGzvjXHUA .cluster text{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA 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-9GtvDvifGzvjXHUA .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-9GtvDvifGzvjXHUA text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-9GtvDvifGzvjXHUA .actor-line{stroke:grey}#mermaid-svg-9GtvDvifGzvjXHUA .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-9GtvDvifGzvjXHUA .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-9GtvDvifGzvjXHUA #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-9GtvDvifGzvjXHUA .sequenceNumber{fill:#fff}#mermaid-svg-9GtvDvifGzvjXHUA #sequencenumber{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA #crosshead path{fill:#333;stroke:#333}#mermaid-svg-9GtvDvifGzvjXHUA .messageText{fill:#333;stroke:#333}#mermaid-svg-9GtvDvifGzvjXHUA .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-9GtvDvifGzvjXHUA .labelText,#mermaid-svg-9GtvDvifGzvjXHUA .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-9GtvDvifGzvjXHUA .loopText,#mermaid-svg-9GtvDvifGzvjXHUA .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-9GtvDvifGzvjXHUA .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-9GtvDvifGzvjXHUA .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-9GtvDvifGzvjXHUA .noteText,#mermaid-svg-9GtvDvifGzvjXHUA .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-9GtvDvifGzvjXHUA .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-9GtvDvifGzvjXHUA .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-9GtvDvifGzvjXHUA .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-9GtvDvifGzvjXHUA .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA .section{stroke:none;opacity:0.2}#mermaid-svg-9GtvDvifGzvjXHUA .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-9GtvDvifGzvjXHUA .section2{fill:#fff400}#mermaid-svg-9GtvDvifGzvjXHUA .section1,#mermaid-svg-9GtvDvifGzvjXHUA .section3{fill:#fff;opacity:0.2}#mermaid-svg-9GtvDvifGzvjXHUA .sectionTitle0{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA .sectionTitle1{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA .sectionTitle2{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA .sectionTitle3{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-9GtvDvifGzvjXHUA .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA .grid path{stroke-width:0}#mermaid-svg-9GtvDvifGzvjXHUA .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-9GtvDvifGzvjXHUA .task{stroke-width:2}#mermaid-svg-9GtvDvifGzvjXHUA .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA .taskText:not([font-size]){font-size:11px}#mermaid-svg-9GtvDvifGzvjXHUA .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-9GtvDvifGzvjXHUA .task.clickable{cursor:pointer}#mermaid-svg-9GtvDvifGzvjXHUA .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-9GtvDvifGzvjXHUA .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-9GtvDvifGzvjXHUA .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-9GtvDvifGzvjXHUA .taskText0,#mermaid-svg-9GtvDvifGzvjXHUA .taskText1,#mermaid-svg-9GtvDvifGzvjXHUA .taskText2,#mermaid-svg-9GtvDvifGzvjXHUA .taskText3{fill:#fff}#mermaid-svg-9GtvDvifGzvjXHUA .task0,#mermaid-svg-9GtvDvifGzvjXHUA .task1,#mermaid-svg-9GtvDvifGzvjXHUA .task2,#mermaid-svg-9GtvDvifGzvjXHUA .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-9GtvDvifGzvjXHUA .taskTextOutside0,#mermaid-svg-9GtvDvifGzvjXHUA .taskTextOutside2{fill:#000}#mermaid-svg-9GtvDvifGzvjXHUA .taskTextOutside1,#mermaid-svg-9GtvDvifGzvjXHUA .taskTextOutside3{fill:#000}#mermaid-svg-9GtvDvifGzvjXHUA .active0,#mermaid-svg-9GtvDvifGzvjXHUA .active1,#mermaid-svg-9GtvDvifGzvjXHUA .active2,#mermaid-svg-9GtvDvifGzvjXHUA .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-9GtvDvifGzvjXHUA .activeText0,#mermaid-svg-9GtvDvifGzvjXHUA .activeText1,#mermaid-svg-9GtvDvifGzvjXHUA .activeText2,#mermaid-svg-9GtvDvifGzvjXHUA .activeText3{fill:#000 !important}#mermaid-svg-9GtvDvifGzvjXHUA .done0,#mermaid-svg-9GtvDvifGzvjXHUA .done1,#mermaid-svg-9GtvDvifGzvjXHUA .done2,#mermaid-svg-9GtvDvifGzvjXHUA .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-9GtvDvifGzvjXHUA .doneText0,#mermaid-svg-9GtvDvifGzvjXHUA .doneText1,#mermaid-svg-9GtvDvifGzvjXHUA .doneText2,#mermaid-svg-9GtvDvifGzvjXHUA .doneText3{fill:#000 !important}#mermaid-svg-9GtvDvifGzvjXHUA .crit0,#mermaid-svg-9GtvDvifGzvjXHUA .crit1,#mermaid-svg-9GtvDvifGzvjXHUA .crit2,#mermaid-svg-9GtvDvifGzvjXHUA .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-9GtvDvifGzvjXHUA .activeCrit0,#mermaid-svg-9GtvDvifGzvjXHUA .activeCrit1,#mermaid-svg-9GtvDvifGzvjXHUA .activeCrit2,#mermaid-svg-9GtvDvifGzvjXHUA .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-9GtvDvifGzvjXHUA .doneCrit0,#mermaid-svg-9GtvDvifGzvjXHUA .doneCrit1,#mermaid-svg-9GtvDvifGzvjXHUA .doneCrit2,#mermaid-svg-9GtvDvifGzvjXHUA .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-9GtvDvifGzvjXHUA .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-9GtvDvifGzvjXHUA .milestoneText{font-style:italic}#mermaid-svg-9GtvDvifGzvjXHUA .doneCritText0,#mermaid-svg-9GtvDvifGzvjXHUA .doneCritText1,#mermaid-svg-9GtvDvifGzvjXHUA .doneCritText2,#mermaid-svg-9GtvDvifGzvjXHUA .doneCritText3{fill:#000 !important}#mermaid-svg-9GtvDvifGzvjXHUA .activeCritText0,#mermaid-svg-9GtvDvifGzvjXHUA .activeCritText1,#mermaid-svg-9GtvDvifGzvjXHUA .activeCritText2,#mermaid-svg-9GtvDvifGzvjXHUA .activeCritText3{fill:#000 !important}#mermaid-svg-9GtvDvifGzvjXHUA .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-9GtvDvifGzvjXHUA g.classGroup text .title{font-weight:bolder}#mermaid-svg-9GtvDvifGzvjXHUA g.clickable{cursor:pointer}#mermaid-svg-9GtvDvifGzvjXHUA g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-9GtvDvifGzvjXHUA g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-9GtvDvifGzvjXHUA .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-9GtvDvifGzvjXHUA .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-9GtvDvifGzvjXHUA .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-9GtvDvifGzvjXHUA .dashed-line{stroke-dasharray:3}#mermaid-svg-9GtvDvifGzvjXHUA #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9GtvDvifGzvjXHUA #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9GtvDvifGzvjXHUA #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-9GtvDvifGzvjXHUA #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-9GtvDvifGzvjXHUA #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9GtvDvifGzvjXHUA #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9GtvDvifGzvjXHUA #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9GtvDvifGzvjXHUA #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-9GtvDvifGzvjXHUA .commit-id,#mermaid-svg-9GtvDvifGzvjXHUA .commit-msg,#mermaid-svg-9GtvDvifGzvjXHUA .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-9GtvDvifGzvjXHUA g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-9GtvDvifGzvjXHUA g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-9GtvDvifGzvjXHUA g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-9GtvDvifGzvjXHUA .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-9GtvDvifGzvjXHUA .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-9GtvDvifGzvjXHUA .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-9GtvDvifGzvjXHUA .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-9GtvDvifGzvjXHUA .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-9GtvDvifGzvjXHUA .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-9GtvDvifGzvjXHUA .edgeLabel text{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-9GtvDvifGzvjXHUA .node circle.state-start{fill:black;stroke:black}#mermaid-svg-9GtvDvifGzvjXHUA .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-9GtvDvifGzvjXHUA #statediagram-barbEnd{fill:#9370db}#mermaid-svg-9GtvDvifGzvjXHUA .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-9GtvDvifGzvjXHUA .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-9GtvDvifGzvjXHUA .statediagram-state .divider{stroke:#9370db}#mermaid-svg-9GtvDvifGzvjXHUA .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-9GtvDvifGzvjXHUA .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-9GtvDvifGzvjXHUA .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-9GtvDvifGzvjXHUA .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-9GtvDvifGzvjXHUA .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-9GtvDvifGzvjXHUA .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-9GtvDvifGzvjXHUA .note-edge{stroke-dasharray:5}#mermaid-svg-9GtvDvifGzvjXHUA .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-9GtvDvifGzvjXHUA .error-icon{fill:#522}#mermaid-svg-9GtvDvifGzvjXHUA .error-text{fill:#522;stroke:#522}#mermaid-svg-9GtvDvifGzvjXHUA .edge-thickness-normal{stroke-width:2px}#mermaid-svg-9GtvDvifGzvjXHUA .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-9GtvDvifGzvjXHUA .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-9GtvDvifGzvjXHUA .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-9GtvDvifGzvjXHUA .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-9GtvDvifGzvjXHUA .marker{fill:#333}#mermaid-svg-9GtvDvifGzvjXHUA .marker.cross{stroke:#333} :root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-9GtvDvifGzvjXHUA { color: rgba(0, 0, 0, 0.75); font: ; } 张三 李四 李四,吃了吗? 我显示在李四的右边 好久不见,三儿,我刚吃过! 张三 李四Typora 提供的流程图语法标记是基于开源项目flowchart.js
语法:
```mermaid flowchat flowchart 语法 ```示例:
Created with Raphaël 2.2.0 开始 我是帅哥 Yes or No? 结束 yes noTypora 继承了Mermaid, Mermaid 支持使用文本的方式生成图表
语法参考链接
示例:
```makdown %% 序列图举例(注释) sequenceDiagram 张三->>李四: 吃了吗? 李四-->>张三: 好久不见,三儿,我刚吃过! Note right of 李四: 我显示在李四的右边 ``` #mermaid-svg-HJdjM1Z00sCQi4yJ .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .label text{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .node rect,#mermaid-svg-HJdjM1Z00sCQi4yJ .node circle,#mermaid-svg-HJdjM1Z00sCQi4yJ .node ellipse,#mermaid-svg-HJdjM1Z00sCQi4yJ .node polygon,#mermaid-svg-HJdjM1Z00sCQi4yJ .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-HJdjM1Z00sCQi4yJ .node .label{text-align:center;fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .node.clickable{cursor:pointer}#mermaid-svg-HJdjM1Z00sCQi4yJ .arrowheadPath{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-HJdjM1Z00sCQi4yJ .flowchart-link{stroke:#333;fill:none}#mermaid-svg-HJdjM1Z00sCQi4yJ .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-HJdjM1Z00sCQi4yJ .edgeLabel rect{opacity:0.9}#mermaid-svg-HJdjM1Z00sCQi4yJ .edgeLabel span{color:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-HJdjM1Z00sCQi4yJ .cluster text{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ 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-HJdjM1Z00sCQi4yJ .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-HJdjM1Z00sCQi4yJ text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-HJdjM1Z00sCQi4yJ .actor-line{stroke:grey}#mermaid-svg-HJdjM1Z00sCQi4yJ .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .sequenceNumber{fill:#fff}#mermaid-svg-HJdjM1Z00sCQi4yJ #sequencenumber{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ #crosshead path{fill:#333;stroke:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .messageText{fill:#333;stroke:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-HJdjM1Z00sCQi4yJ .labelText,#mermaid-svg-HJdjM1Z00sCQi4yJ .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-HJdjM1Z00sCQi4yJ .loopText,#mermaid-svg-HJdjM1Z00sCQi4yJ .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-HJdjM1Z00sCQi4yJ .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-HJdjM1Z00sCQi4yJ .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-HJdjM1Z00sCQi4yJ .noteText,#mermaid-svg-HJdjM1Z00sCQi4yJ .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-HJdjM1Z00sCQi4yJ .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-HJdjM1Z00sCQi4yJ .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-HJdjM1Z00sCQi4yJ .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-HJdjM1Z00sCQi4yJ .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ .section{stroke:none;opacity:0.2}#mermaid-svg-HJdjM1Z00sCQi4yJ .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-HJdjM1Z00sCQi4yJ .section2{fill:#fff400}#mermaid-svg-HJdjM1Z00sCQi4yJ .section1,#mermaid-svg-HJdjM1Z00sCQi4yJ .section3{fill:#fff;opacity:0.2}#mermaid-svg-HJdjM1Z00sCQi4yJ .sectionTitle0{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .sectionTitle1{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .sectionTitle2{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .sectionTitle3{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-HJdjM1Z00sCQi4yJ .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ .grid path{stroke-width:0}#mermaid-svg-HJdjM1Z00sCQi4yJ .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-HJdjM1Z00sCQi4yJ .task{stroke-width:2}#mermaid-svg-HJdjM1Z00sCQi4yJ .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ .taskText:not([font-size]){font-size:11px}#mermaid-svg-HJdjM1Z00sCQi4yJ .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-HJdjM1Z00sCQi4yJ .task.clickable{cursor:pointer}#mermaid-svg-HJdjM1Z00sCQi4yJ .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-HJdjM1Z00sCQi4yJ .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-HJdjM1Z00sCQi4yJ .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-HJdjM1Z00sCQi4yJ .taskText0,#mermaid-svg-HJdjM1Z00sCQi4yJ .taskText1,#mermaid-svg-HJdjM1Z00sCQi4yJ .taskText2,#mermaid-svg-HJdjM1Z00sCQi4yJ .taskText3{fill:#fff}#mermaid-svg-HJdjM1Z00sCQi4yJ .task0,#mermaid-svg-HJdjM1Z00sCQi4yJ .task1,#mermaid-svg-HJdjM1Z00sCQi4yJ .task2,#mermaid-svg-HJdjM1Z00sCQi4yJ .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-HJdjM1Z00sCQi4yJ .taskTextOutside0,#mermaid-svg-HJdjM1Z00sCQi4yJ .taskTextOutside2{fill:#000}#mermaid-svg-HJdjM1Z00sCQi4yJ .taskTextOutside1,#mermaid-svg-HJdjM1Z00sCQi4yJ .taskTextOutside3{fill:#000}#mermaid-svg-HJdjM1Z00sCQi4yJ .active0,#mermaid-svg-HJdjM1Z00sCQi4yJ .active1,#mermaid-svg-HJdjM1Z00sCQi4yJ .active2,#mermaid-svg-HJdjM1Z00sCQi4yJ .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-HJdjM1Z00sCQi4yJ .activeText0,#mermaid-svg-HJdjM1Z00sCQi4yJ .activeText1,#mermaid-svg-HJdjM1Z00sCQi4yJ .activeText2,#mermaid-svg-HJdjM1Z00sCQi4yJ .activeText3{fill:#000 !important}#mermaid-svg-HJdjM1Z00sCQi4yJ .done0,#mermaid-svg-HJdjM1Z00sCQi4yJ .done1,#mermaid-svg-HJdjM1Z00sCQi4yJ .done2,#mermaid-svg-HJdjM1Z00sCQi4yJ .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-HJdjM1Z00sCQi4yJ .doneText0,#mermaid-svg-HJdjM1Z00sCQi4yJ .doneText1,#mermaid-svg-HJdjM1Z00sCQi4yJ .doneText2,#mermaid-svg-HJdjM1Z00sCQi4yJ .doneText3{fill:#000 !important}#mermaid-svg-HJdjM1Z00sCQi4yJ .crit0,#mermaid-svg-HJdjM1Z00sCQi4yJ .crit1,#mermaid-svg-HJdjM1Z00sCQi4yJ .crit2,#mermaid-svg-HJdjM1Z00sCQi4yJ .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-HJdjM1Z00sCQi4yJ .activeCrit0,#mermaid-svg-HJdjM1Z00sCQi4yJ .activeCrit1,#mermaid-svg-HJdjM1Z00sCQi4yJ .activeCrit2,#mermaid-svg-HJdjM1Z00sCQi4yJ .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-HJdjM1Z00sCQi4yJ .doneCrit0,#mermaid-svg-HJdjM1Z00sCQi4yJ .doneCrit1,#mermaid-svg-HJdjM1Z00sCQi4yJ .doneCrit2,#mermaid-svg-HJdjM1Z00sCQi4yJ .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-HJdjM1Z00sCQi4yJ .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-HJdjM1Z00sCQi4yJ .milestoneText{font-style:italic}#mermaid-svg-HJdjM1Z00sCQi4yJ .doneCritText0,#mermaid-svg-HJdjM1Z00sCQi4yJ .doneCritText1,#mermaid-svg-HJdjM1Z00sCQi4yJ .doneCritText2,#mermaid-svg-HJdjM1Z00sCQi4yJ .doneCritText3{fill:#000 !important}#mermaid-svg-HJdjM1Z00sCQi4yJ .activeCritText0,#mermaid-svg-HJdjM1Z00sCQi4yJ .activeCritText1,#mermaid-svg-HJdjM1Z00sCQi4yJ .activeCritText2,#mermaid-svg-HJdjM1Z00sCQi4yJ .activeCritText3{fill:#000 !important}#mermaid-svg-HJdjM1Z00sCQi4yJ .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-HJdjM1Z00sCQi4yJ g.classGroup text .title{font-weight:bolder}#mermaid-svg-HJdjM1Z00sCQi4yJ g.clickable{cursor:pointer}#mermaid-svg-HJdjM1Z00sCQi4yJ g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-HJdjM1Z00sCQi4yJ g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-HJdjM1Z00sCQi4yJ .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-HJdjM1Z00sCQi4yJ .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-HJdjM1Z00sCQi4yJ .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-HJdjM1Z00sCQi4yJ .dashed-line{stroke-dasharray:3}#mermaid-svg-HJdjM1Z00sCQi4yJ #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-HJdjM1Z00sCQi4yJ #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-HJdjM1Z00sCQi4yJ #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-HJdjM1Z00sCQi4yJ #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-HJdjM1Z00sCQi4yJ #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-HJdjM1Z00sCQi4yJ #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-HJdjM1Z00sCQi4yJ #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-HJdjM1Z00sCQi4yJ #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-HJdjM1Z00sCQi4yJ .commit-id,#mermaid-svg-HJdjM1Z00sCQi4yJ .commit-msg,#mermaid-svg-HJdjM1Z00sCQi4yJ .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-HJdjM1Z00sCQi4yJ g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-HJdjM1Z00sCQi4yJ g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-HJdjM1Z00sCQi4yJ g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-HJdjM1Z00sCQi4yJ .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-HJdjM1Z00sCQi4yJ .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-HJdjM1Z00sCQi4yJ .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-HJdjM1Z00sCQi4yJ .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-HJdjM1Z00sCQi4yJ .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-HJdjM1Z00sCQi4yJ .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-HJdjM1Z00sCQi4yJ .edgeLabel text{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-HJdjM1Z00sCQi4yJ .node circle.state-start{fill:black;stroke:black}#mermaid-svg-HJdjM1Z00sCQi4yJ .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-HJdjM1Z00sCQi4yJ #statediagram-barbEnd{fill:#9370db}#mermaid-svg-HJdjM1Z00sCQi4yJ .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-HJdjM1Z00sCQi4yJ .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-HJdjM1Z00sCQi4yJ .statediagram-state .divider{stroke:#9370db}#mermaid-svg-HJdjM1Z00sCQi4yJ .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-HJdjM1Z00sCQi4yJ .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-HJdjM1Z00sCQi4yJ .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-HJdjM1Z00sCQi4yJ .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-HJdjM1Z00sCQi4yJ .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-HJdjM1Z00sCQi4yJ .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-HJdjM1Z00sCQi4yJ .note-edge{stroke-dasharray:5}#mermaid-svg-HJdjM1Z00sCQi4yJ .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-HJdjM1Z00sCQi4yJ .error-icon{fill:#522}#mermaid-svg-HJdjM1Z00sCQi4yJ .error-text{fill:#522;stroke:#522}#mermaid-svg-HJdjM1Z00sCQi4yJ .edge-thickness-normal{stroke-width:2px}#mermaid-svg-HJdjM1Z00sCQi4yJ .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-HJdjM1Z00sCQi4yJ .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-HJdjM1Z00sCQi4yJ .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-HJdjM1Z00sCQi4yJ .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-HJdjM1Z00sCQi4yJ .marker{fill:#333}#mermaid-svg-HJdjM1Z00sCQi4yJ .marker.cross{stroke:#333} :root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-HJdjM1Z00sCQi4yJ { color: rgba(0, 0, 0, 0.75); font: ; } 张三 李四 吃了吗? 好久不见,三儿,我刚吃过! 我显示在李四的右边 张三 李四语法参考链接
示例:
```mermaid graph TD A[开始] -->B(我是帅哥) B --> C{Yes or No?} C -->|Yes| D[结束] C -->|No| B ``` #mermaid-svg-bsiYHL0oh2dd2ZEP .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .label text{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .node rect,#mermaid-svg-bsiYHL0oh2dd2ZEP .node circle,#mermaid-svg-bsiYHL0oh2dd2ZEP .node ellipse,#mermaid-svg-bsiYHL0oh2dd2ZEP .node polygon,#mermaid-svg-bsiYHL0oh2dd2ZEP .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-bsiYHL0oh2dd2ZEP .node .label{text-align:center;fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .node.clickable{cursor:pointer}#mermaid-svg-bsiYHL0oh2dd2ZEP .arrowheadPath{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-bsiYHL0oh2dd2ZEP .flowchart-link{stroke:#333;fill:none}#mermaid-svg-bsiYHL0oh2dd2ZEP .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-bsiYHL0oh2dd2ZEP .edgeLabel rect{opacity:0.9}#mermaid-svg-bsiYHL0oh2dd2ZEP .edgeLabel span{color:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-bsiYHL0oh2dd2ZEP .cluster text{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP 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-bsiYHL0oh2dd2ZEP .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-bsiYHL0oh2dd2ZEP text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-bsiYHL0oh2dd2ZEP .actor-line{stroke:grey}#mermaid-svg-bsiYHL0oh2dd2ZEP .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .sequenceNumber{fill:#fff}#mermaid-svg-bsiYHL0oh2dd2ZEP #sequencenumber{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP #crosshead path{fill:#333;stroke:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .messageText{fill:#333;stroke:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-bsiYHL0oh2dd2ZEP .labelText,#mermaid-svg-bsiYHL0oh2dd2ZEP .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-bsiYHL0oh2dd2ZEP .loopText,#mermaid-svg-bsiYHL0oh2dd2ZEP .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-bsiYHL0oh2dd2ZEP .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-bsiYHL0oh2dd2ZEP .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-bsiYHL0oh2dd2ZEP .noteText,#mermaid-svg-bsiYHL0oh2dd2ZEP .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-bsiYHL0oh2dd2ZEP .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-bsiYHL0oh2dd2ZEP .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-bsiYHL0oh2dd2ZEP .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-bsiYHL0oh2dd2ZEP .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP .section{stroke:none;opacity:0.2}#mermaid-svg-bsiYHL0oh2dd2ZEP .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-bsiYHL0oh2dd2ZEP .section2{fill:#fff400}#mermaid-svg-bsiYHL0oh2dd2ZEP .section1,#mermaid-svg-bsiYHL0oh2dd2ZEP .section3{fill:#fff;opacity:0.2}#mermaid-svg-bsiYHL0oh2dd2ZEP .sectionTitle0{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .sectionTitle1{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .sectionTitle2{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .sectionTitle3{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-bsiYHL0oh2dd2ZEP .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP .grid path{stroke-width:0}#mermaid-svg-bsiYHL0oh2dd2ZEP .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-bsiYHL0oh2dd2ZEP .task{stroke-width:2}#mermaid-svg-bsiYHL0oh2dd2ZEP .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP .taskText:not([font-size]){font-size:11px}#mermaid-svg-bsiYHL0oh2dd2ZEP .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-bsiYHL0oh2dd2ZEP .task.clickable{cursor:pointer}#mermaid-svg-bsiYHL0oh2dd2ZEP .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-bsiYHL0oh2dd2ZEP .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-bsiYHL0oh2dd2ZEP .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-bsiYHL0oh2dd2ZEP .taskText0,#mermaid-svg-bsiYHL0oh2dd2ZEP .taskText1,#mermaid-svg-bsiYHL0oh2dd2ZEP .taskText2,#mermaid-svg-bsiYHL0oh2dd2ZEP .taskText3{fill:#fff}#mermaid-svg-bsiYHL0oh2dd2ZEP .task0,#mermaid-svg-bsiYHL0oh2dd2ZEP .task1,#mermaid-svg-bsiYHL0oh2dd2ZEP .task2,#mermaid-svg-bsiYHL0oh2dd2ZEP .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-bsiYHL0oh2dd2ZEP .taskTextOutside0,#mermaid-svg-bsiYHL0oh2dd2ZEP .taskTextOutside2{fill:#000}#mermaid-svg-bsiYHL0oh2dd2ZEP .taskTextOutside1,#mermaid-svg-bsiYHL0oh2dd2ZEP .taskTextOutside3{fill:#000}#mermaid-svg-bsiYHL0oh2dd2ZEP .active0,#mermaid-svg-bsiYHL0oh2dd2ZEP .active1,#mermaid-svg-bsiYHL0oh2dd2ZEP .active2,#mermaid-svg-bsiYHL0oh2dd2ZEP .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-bsiYHL0oh2dd2ZEP .activeText0,#mermaid-svg-bsiYHL0oh2dd2ZEP .activeText1,#mermaid-svg-bsiYHL0oh2dd2ZEP .activeText2,#mermaid-svg-bsiYHL0oh2dd2ZEP .activeText3{fill:#000 !important}#mermaid-svg-bsiYHL0oh2dd2ZEP .done0,#mermaid-svg-bsiYHL0oh2dd2ZEP .done1,#mermaid-svg-bsiYHL0oh2dd2ZEP .done2,#mermaid-svg-bsiYHL0oh2dd2ZEP .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-bsiYHL0oh2dd2ZEP .doneText0,#mermaid-svg-bsiYHL0oh2dd2ZEP .doneText1,#mermaid-svg-bsiYHL0oh2dd2ZEP .doneText2,#mermaid-svg-bsiYHL0oh2dd2ZEP .doneText3{fill:#000 !important}#mermaid-svg-bsiYHL0oh2dd2ZEP .crit0,#mermaid-svg-bsiYHL0oh2dd2ZEP .crit1,#mermaid-svg-bsiYHL0oh2dd2ZEP .crit2,#mermaid-svg-bsiYHL0oh2dd2ZEP .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-bsiYHL0oh2dd2ZEP .activeCrit0,#mermaid-svg-bsiYHL0oh2dd2ZEP .activeCrit1,#mermaid-svg-bsiYHL0oh2dd2ZEP .activeCrit2,#mermaid-svg-bsiYHL0oh2dd2ZEP .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-bsiYHL0oh2dd2ZEP .doneCrit0,#mermaid-svg-bsiYHL0oh2dd2ZEP .doneCrit1,#mermaid-svg-bsiYHL0oh2dd2ZEP .doneCrit2,#mermaid-svg-bsiYHL0oh2dd2ZEP .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-bsiYHL0oh2dd2ZEP .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-bsiYHL0oh2dd2ZEP .milestoneText{font-style:italic}#mermaid-svg-bsiYHL0oh2dd2ZEP .doneCritText0,#mermaid-svg-bsiYHL0oh2dd2ZEP .doneCritText1,#mermaid-svg-bsiYHL0oh2dd2ZEP .doneCritText2,#mermaid-svg-bsiYHL0oh2dd2ZEP .doneCritText3{fill:#000 !important}#mermaid-svg-bsiYHL0oh2dd2ZEP .activeCritText0,#mermaid-svg-bsiYHL0oh2dd2ZEP .activeCritText1,#mermaid-svg-bsiYHL0oh2dd2ZEP .activeCritText2,#mermaid-svg-bsiYHL0oh2dd2ZEP .activeCritText3{fill:#000 !important}#mermaid-svg-bsiYHL0oh2dd2ZEP .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-bsiYHL0oh2dd2ZEP g.classGroup text .title{font-weight:bolder}#mermaid-svg-bsiYHL0oh2dd2ZEP g.clickable{cursor:pointer}#mermaid-svg-bsiYHL0oh2dd2ZEP g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-bsiYHL0oh2dd2ZEP g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-bsiYHL0oh2dd2ZEP .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-bsiYHL0oh2dd2ZEP .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-bsiYHL0oh2dd2ZEP .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-bsiYHL0oh2dd2ZEP .dashed-line{stroke-dasharray:3}#mermaid-svg-bsiYHL0oh2dd2ZEP #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-bsiYHL0oh2dd2ZEP #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-bsiYHL0oh2dd2ZEP #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-bsiYHL0oh2dd2ZEP #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-bsiYHL0oh2dd2ZEP #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-bsiYHL0oh2dd2ZEP #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-bsiYHL0oh2dd2ZEP #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-bsiYHL0oh2dd2ZEP #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-bsiYHL0oh2dd2ZEP .commit-id,#mermaid-svg-bsiYHL0oh2dd2ZEP .commit-msg,#mermaid-svg-bsiYHL0oh2dd2ZEP .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-bsiYHL0oh2dd2ZEP g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-bsiYHL0oh2dd2ZEP g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-bsiYHL0oh2dd2ZEP g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-bsiYHL0oh2dd2ZEP .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-bsiYHL0oh2dd2ZEP .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-bsiYHL0oh2dd2ZEP .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-bsiYHL0oh2dd2ZEP .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-bsiYHL0oh2dd2ZEP .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-bsiYHL0oh2dd2ZEP .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-bsiYHL0oh2dd2ZEP .edgeLabel text{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-bsiYHL0oh2dd2ZEP .node circle.state-start{fill:black;stroke:black}#mermaid-svg-bsiYHL0oh2dd2ZEP .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-bsiYHL0oh2dd2ZEP #statediagram-barbEnd{fill:#9370db}#mermaid-svg-bsiYHL0oh2dd2ZEP .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-bsiYHL0oh2dd2ZEP .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-bsiYHL0oh2dd2ZEP .statediagram-state .divider{stroke:#9370db}#mermaid-svg-bsiYHL0oh2dd2ZEP .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-bsiYHL0oh2dd2ZEP .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-bsiYHL0oh2dd2ZEP .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-bsiYHL0oh2dd2ZEP .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-bsiYHL0oh2dd2ZEP .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-bsiYHL0oh2dd2ZEP .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-bsiYHL0oh2dd2ZEP .note-edge{stroke-dasharray:5}#mermaid-svg-bsiYHL0oh2dd2ZEP .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-bsiYHL0oh2dd2ZEP .error-icon{fill:#522}#mermaid-svg-bsiYHL0oh2dd2ZEP .error-text{fill:#522;stroke:#522}#mermaid-svg-bsiYHL0oh2dd2ZEP .edge-thickness-normal{stroke-width:2px}#mermaid-svg-bsiYHL0oh2dd2ZEP .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-bsiYHL0oh2dd2ZEP .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-bsiYHL0oh2dd2ZEP .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-bsiYHL0oh2dd2ZEP .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-bsiYHL0oh2dd2ZEP .marker{fill:#333}#mermaid-svg-bsiYHL0oh2dd2ZEP .marker.cross{stroke:#333} :root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-bsiYHL0oh2dd2ZEP { color: rgba(0, 0, 0, 0.75); font: ; } Yes No 开始 我是帅哥 Yes or No? 结束语法参考链接
示例:
```mermaid %% 甘特图示例 gantt dateFormat YYYY-MM-DD title 项目开发周期 section 需求评审 需求评审 :2018-01-01,2018-01-02 section 功能开发 开发编码 :2018-01-03,2018-01-08 开发自测 :2018-01-08,2018-01-09 section 项目测试 第一轮测试 :2018-01-09,2018-01-14 第二轮测试 :2018-01-14,2018-01-16 ``` %% 甘特图示例 gantt dateFormat YYYY-MM-DD title 项目开发周期 section 需求评审 需求评审 :2018-01-01,2018-01-02 section 功能开发 开发编码 :2018-01-03,2018-01-08 开发自测 :2018-01-08,2018-01-09 section 项目测试 第一轮测试 :2018-01-09,2018-01-14 第二轮测试 :2018-01-14,2018-01-16graph TD A[开始] -->B(我是帅哥) B --> C{Yes or No?} C -->|Yes| D[结束] C -->|No| B ```
```mermaid graph TD A[开始] -->B(我是帅哥) B --> C{Yes or No?} C -->|Yes| D[结束] C -->|No| B语法参考链接
示例:
```mermaid %% 甘特图示例 gantt dateFormat YYYY-MM-DD title 项目开发周期 section 需求评审 需求评审 :2018-01-01,2018-01-02 section 功能开发 开发编码 :2018-01-03,2018-01-08 开发自测 :2018-01-08,2018-01-09 section 项目测试 第一轮测试 :2018-01-09,2018-01-14 第二轮测试 :2018-01-14,2018-01-16 ``` %% 甘特图示例 gantt dateFormat YYYY-MM-DD title 项目开发周期 section 需求评审 需求评审 :2018-01-01,2018-01-02 section 功能开发 开发编码 :2018-01-03,2018-01-08 开发自测 :2018-01-08,2018-01-09 section 项目测试 第一轮测试 :2018-01-09,2018-01-14 第二轮测试 :2018-01-14,2018-01-16飒飒的 ↩︎
这是脚注 ↩︎
