markdown 文档 api
2024-06-22 02:14:35
编译环境
vsCode 编辑器 + Markdown 插件
Markdown 插件：
- Markdown All in One
- Markdown Preview Enhanced
适用环境
主要为了 github 中.md 文档的编写，以及把平时的总结都转成 .md 文件；
1. gihub reademe.md 文档
2. csdn 文档
Markdown API
1. Markdown 标题
1.1 Markdown 标题有两种格式。
使用 = 和 - 标记一级和二级标题
语法格式如下：
一级标题栗子
=================二级标题栗子
-----------------
展示效果：
1.2 使用 # 号标记
使用 # 号可表示 1-6 级标题
# 一级标题
## 二级标题
### 三级标题...
###### 六级标题
2. Markdown 段落
2.1 Markdown 段落
Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格 加上回车 。
也可以在段落后面使用一个空行来表示重新开始一个段落。
Markdown 段落 Markdown 段落
2.2 字体
Markdown 可以使用以下几种字体：
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
~~删除文本~~
展示效果：
斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本
删除文本
3. Markdown 列表
Markdown 支持有序列表和无序列表
3.1 无序列表
无序列表使用星号( * )、加号( + )或是减号( - )作为列表标记，这些标记后面要添加一个空格，然后再填写内容：
* 第一项
* 第二项
* 第三项+ 第一项
+ 第二项
+ 第三项- 第一项
- 第二项
- 第三项
展示效果：
- 第一项
- 第二项
- 第三项
- 第一项
- 第二项
- 第三项
- 第一项
- 第二项
- 第三项
3.2 有序列表
有序列表使用数字并加上 . 号来表示，如：
1. 第一项
2. 第二项
3. 第三项
展示效果：
- 第一项
- 第二项
- 第三项
3.3 列表嵌套
1. 第一项：- 第一项嵌套的第一个元素- 第一项嵌套的第二个元素
2. 第二项：- 第二项嵌套的第一个元素- 第二项嵌套的第二个元素
展示效果：
- 第一项：
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
- 第二项：
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
4. Markdown 区块
4.1 区块
Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号：
> 区块展示
> 区块展示
> 区块展示
展示效果：
区块展示
区块展示
区块展示
另外区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推：
> 最外层
> > 第一层嵌套
> > > 第二层嵌套
展示效果：
最外层
第一层嵌套
第二层嵌套
4.2 区块中使用列表
区块中使用列表实例如下：
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项
展示效果：
区块中使用列表
- 第一项
- 第二项
- 第一项
- 第二项
- 第三项
4.3 列表中使用区块
如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。
列表中使用区块实例如下：
* 第一项> 四个空格缩进> 四个空格缩进
* 第二项
展示效果：
- 第一项
四个空格缩进
四个空格缩进 - 第二项
5. Markdown 代码
5.1 代码片段
如果是段落上的一个函数或片段的代码可以用反引号把它包起来（ ` ），例如：
`hello()`
展示效果：
hello()
5.2 代码区块
用 ```包裹一段代码，并指定一种语言（也可以不指定）
```javascript'use strict';```
展示效果：
'use strict';
6. Markdown 链接
6.1 链接使用方法
[链接名称](链接地址)
或
<链接地址>
栗子：
[百度](www.baidu.com)
展示效果：百度
6.2 Markdown 变量方式使用链接
变量 var1 作为链接 [baidu][var1]
在文档的结尾给变量赋值[var1]: www.baidu.com
展示效果：变量 var1 作为链接 百度
7. Markdown 图片
7.1 图片链接使用方式：
开头一个感叹号 !
接着一个方括号，里面放上图片的替代文字
接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 ‘title’ 属性的文字。
7.2 Markdown 变量方式使用图片链接
变量var1作为链接 [百度][var2]
在文档的结尾给变量赋值[var2]: https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
展示效果：
7.3 使用 <img> 标签
Markdown 还没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的 <img> 标签。
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" style="width:30%;">
展示效果：
8. Markdown 表格
8.1 Markdown 简单表格
Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
使用方式：
| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
展示效果：
| 表头 | 表头 |
|---|---|
| 单元格 | 单元格 |
| 单元格 | 单元格 |
8.2 对齐方式
-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。
栗子：
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格单元格 | 单元格单元格 | 单元格单元格 |
| 单元格单元格 | 单元格单元格 | 单元格单元格 |
展示效果：
| 左对齐 | 右对齐 | 居中对齐 |
|---|---|---|
| 单元格单元格 | 单元格单元格 | 单元格单元格 |
| 单元格单元格 | 单元格单元格 | 单元格单元格 |
9. Markdown 高级技巧
9.1 支持的 HTML 元素
不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。
HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br> 等, 栗子：
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
展示效果：
使用 Ctrl+Alt+Del 重启电脑
9.2 转义
Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：
**文本加粗**
\*\* 正常显示星号 \*\*
展示效果：
文本加粗
** 正常显示星号 **
9.3 普通符号
Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号
9.4 typora 画流程图、时序图(顺序图)、甘特图
以下几个实例效果图如下：
9.4.1 横向流程图源码格式：
#mermaid-svg-nNJ1xudHsnSgj5c3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-nNJ1xudHsnSgj5c3 .error-icon{fill:#552222;}#mermaid-svg-nNJ1xudHsnSgj5c3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-nNJ1xudHsnSgj5c3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-nNJ1xudHsnSgj5c3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-nNJ1xudHsnSgj5c3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-nNJ1xudHsnSgj5c3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-nNJ1xudHsnSgj5c3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-nNJ1xudHsnSgj5c3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-nNJ1xudHsnSgj5c3 .marker.cross{stroke:#333333;}#mermaid-svg-nNJ1xudHsnSgj5c3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-nNJ1xudHsnSgj5c3 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-nNJ1xudHsnSgj5c3 .cluster-label text{fill:#333;}#mermaid-svg-nNJ1xudHsnSgj5c3 .cluster-label span{color:#333;}#mermaid-svg-nNJ1xudHsnSgj5c3 .label text,#mermaid-svg-nNJ1xudHsnSgj5c3 span{fill:#333;color:#333;}#mermaid-svg-nNJ1xudHsnSgj5c3 .node rect,#mermaid-svg-nNJ1xudHsnSgj5c3 .node circle,#mermaid-svg-nNJ1xudHsnSgj5c3 .node ellipse,#mermaid-svg-nNJ1xudHsnSgj5c3 .node polygon,#mermaid-svg-nNJ1xudHsnSgj5c3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-nNJ1xudHsnSgj5c3 .node .label{text-align:center;}#mermaid-svg-nNJ1xudHsnSgj5c3 .node.clickable{cursor:pointer;}#mermaid-svg-nNJ1xudHsnSgj5c3 .arrowheadPath{fill:#333333;}#mermaid-svg-nNJ1xudHsnSgj5c3 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-nNJ1xudHsnSgj5c3 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-nNJ1xudHsnSgj5c3 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-nNJ1xudHsnSgj5c3 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-nNJ1xudHsnSgj5c3 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-nNJ1xudHsnSgj5c3 .cluster text{fill:#333;}#mermaid-svg-nNJ1xudHsnSgj5c3 .cluster span{color:#333;}#mermaid-svg-nNJ1xudHsnSgj5c3 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-nNJ1xudHsnSgj5c3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
a=1
a=2
方形
圆角
条件a
结果1
结果2
横向流程图
9.4.2 竖向流程图源码格式：
#mermaid-svg-sCM0fx3je0muNjf3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-sCM0fx3je0muNjf3 .error-icon{fill:#552222;}#mermaid-svg-sCM0fx3je0muNjf3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-sCM0fx3je0muNjf3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-sCM0fx3je0muNjf3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-sCM0fx3je0muNjf3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-sCM0fx3je0muNjf3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-sCM0fx3je0muNjf3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-sCM0fx3je0muNjf3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-sCM0fx3je0muNjf3 .marker.cross{stroke:#333333;}#mermaid-svg-sCM0fx3je0muNjf3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-sCM0fx3je0muNjf3 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-sCM0fx3je0muNjf3 .cluster-label text{fill:#333;}#mermaid-svg-sCM0fx3je0muNjf3 .cluster-label span{color:#333;}#mermaid-svg-sCM0fx3je0muNjf3 .label text,#mermaid-svg-sCM0fx3je0muNjf3 span{fill:#333;color:#333;}#mermaid-svg-sCM0fx3je0muNjf3 .node rect,#mermaid-svg-sCM0fx3je0muNjf3 .node circle,#mermaid-svg-sCM0fx3je0muNjf3 .node ellipse,#mermaid-svg-sCM0fx3je0muNjf3 .node polygon,#mermaid-svg-sCM0fx3je0muNjf3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-sCM0fx3je0muNjf3 .node .label{text-align:center;}#mermaid-svg-sCM0fx3je0muNjf3 .node.clickable{cursor:pointer;}#mermaid-svg-sCM0fx3je0muNjf3 .arrowheadPath{fill:#333333;}#mermaid-svg-sCM0fx3je0muNjf3 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-sCM0fx3je0muNjf3 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-sCM0fx3je0muNjf3 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-sCM0fx3je0muNjf3 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-sCM0fx3je0muNjf3 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-sCM0fx3je0muNjf3 .cluster text{fill:#333;}#mermaid-svg-sCM0fx3je0muNjf3 .cluster span{color:#333;}#mermaid-svg-sCM0fx3je0muNjf3 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-sCM0fx3je0muNjf3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
a=1
a=2
方形
圆角
条件a
结果1
结果2
竖向流程图
9.4.3 标准流程图源码格式：
Created with Raphaël 2.3.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no
9.4.4 标准流程图源码格式（横向）：
Created with Raphaël 2.3.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no
9.4.5 UML时序图源码样例：
#mermaid-svg-EIGR1to6WxkAdPZB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-EIGR1to6WxkAdPZB .error-icon{fill:#552222;}#mermaid-svg-EIGR1to6WxkAdPZB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-EIGR1to6WxkAdPZB .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-EIGR1to6WxkAdPZB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-EIGR1to6WxkAdPZB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-EIGR1to6WxkAdPZB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-EIGR1to6WxkAdPZB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-EIGR1to6WxkAdPZB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-EIGR1to6WxkAdPZB .marker.cross{stroke:#333333;}#mermaid-svg-EIGR1to6WxkAdPZB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-EIGR1to6WxkAdPZB .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-EIGR1to6WxkAdPZB text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-EIGR1to6WxkAdPZB .actor-line{stroke:grey;}#mermaid-svg-EIGR1to6WxkAdPZB .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-EIGR1to6WxkAdPZB .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-EIGR1to6WxkAdPZB #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-EIGR1to6WxkAdPZB .sequenceNumber{fill:white;}#mermaid-svg-EIGR1to6WxkAdPZB #sequencenumber{fill:#333;}#mermaid-svg-EIGR1to6WxkAdPZB #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-EIGR1to6WxkAdPZB .messageText{fill:#333;stroke:#333;}#mermaid-svg-EIGR1to6WxkAdPZB .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-EIGR1to6WxkAdPZB .labelText,#mermaid-svg-EIGR1to6WxkAdPZB .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-EIGR1to6WxkAdPZB .loopText,#mermaid-svg-EIGR1to6WxkAdPZB .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-EIGR1to6WxkAdPZB .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-EIGR1to6WxkAdPZB .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-EIGR1to6WxkAdPZB .noteText,#mermaid-svg-EIGR1to6WxkAdPZB .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-EIGR1to6WxkAdPZB .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-EIGR1to6WxkAdPZB .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-EIGR1to6WxkAdPZB .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-EIGR1to6WxkAdPZB .actorPopupMenu{position:absolute;}#mermaid-svg-EIGR1to6WxkAdPZB .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-EIGR1to6WxkAdPZB .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-EIGR1to6WxkAdPZB .actor-man circle,#mermaid-svg-EIGR1to6WxkAdPZB line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-EIGR1to6WxkAdPZB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 对象A 对象B 对象B你好吗?（请求） 对象B的描述 对象A的描述(提示) 我很好(响应) 你真的好吗？ 对象A 对象B 标题：复杂使用
9.4.6 UML时序图源码复杂样例：
#mermaid-svg-4KfTal61cSqP3ENu {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-4KfTal61cSqP3ENu .error-icon{fill:#552222;}#mermaid-svg-4KfTal61cSqP3ENu .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-4KfTal61cSqP3ENu .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-4KfTal61cSqP3ENu .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-4KfTal61cSqP3ENu .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-4KfTal61cSqP3ENu .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-4KfTal61cSqP3ENu .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-4KfTal61cSqP3ENu .marker{fill:#333333;stroke:#333333;}#mermaid-svg-4KfTal61cSqP3ENu .marker.cross{stroke:#333333;}#mermaid-svg-4KfTal61cSqP3ENu svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-4KfTal61cSqP3ENu .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-4KfTal61cSqP3ENu text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-4KfTal61cSqP3ENu .actor-line{stroke:grey;}#mermaid-svg-4KfTal61cSqP3ENu .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-4KfTal61cSqP3ENu .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-4KfTal61cSqP3ENu #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-4KfTal61cSqP3ENu .sequenceNumber{fill:white;}#mermaid-svg-4KfTal61cSqP3ENu #sequencenumber{fill:#333;}#mermaid-svg-4KfTal61cSqP3ENu #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-4KfTal61cSqP3ENu .messageText{fill:#333;stroke:#333;}#mermaid-svg-4KfTal61cSqP3ENu .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-4KfTal61cSqP3ENu .labelText,#mermaid-svg-4KfTal61cSqP3ENu .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-4KfTal61cSqP3ENu .loopText,#mermaid-svg-4KfTal61cSqP3ENu .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-4KfTal61cSqP3ENu .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-4KfTal61cSqP3ENu .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-4KfTal61cSqP3ENu .noteText,#mermaid-svg-4KfTal61cSqP3ENu .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-4KfTal61cSqP3ENu .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-4KfTal61cSqP3ENu .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-4KfTal61cSqP3ENu .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-4KfTal61cSqP3ENu .actorPopupMenu{position:absolute;}#mermaid-svg-4KfTal61cSqP3ENu .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-4KfTal61cSqP3ENu .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-4KfTal61cSqP3ENu .actor-man circle,#mermaid-svg-4KfTal61cSqP3ENu line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-4KfTal61cSqP3ENu :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 对象A 对象B 小三 C 对象B你好吗?（请求） 对象B的描述 对象A的描述(提示) 我很好(响应) 你好吗 对象B找我了 你真的好吗？ 我们是朋友 没人陪我玩 对象A 对象B 小三 C 标题：复杂使用
9.4.7 UML标准时序图样例：
#mermaid-svg-auVPRdM8EsRVYfHh {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-auVPRdM8EsRVYfHh .error-icon{fill:#552222;}#mermaid-svg-auVPRdM8EsRVYfHh .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-auVPRdM8EsRVYfHh .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-auVPRdM8EsRVYfHh .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-auVPRdM8EsRVYfHh .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-auVPRdM8EsRVYfHh .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-auVPRdM8EsRVYfHh .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-auVPRdM8EsRVYfHh .marker{fill:#333333;stroke:#333333;}#mermaid-svg-auVPRdM8EsRVYfHh .marker.cross{stroke:#333333;}#mermaid-svg-auVPRdM8EsRVYfHh svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-auVPRdM8EsRVYfHh .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-auVPRdM8EsRVYfHh text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-auVPRdM8EsRVYfHh .actor-line{stroke:grey;}#mermaid-svg-auVPRdM8EsRVYfHh .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-auVPRdM8EsRVYfHh .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-auVPRdM8EsRVYfHh #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-auVPRdM8EsRVYfHh .sequenceNumber{fill:white;}#mermaid-svg-auVPRdM8EsRVYfHh #sequencenumber{fill:#333;}#mermaid-svg-auVPRdM8EsRVYfHh #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-auVPRdM8EsRVYfHh .messageText{fill:#333;stroke:#333;}#mermaid-svg-auVPRdM8EsRVYfHh .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-auVPRdM8EsRVYfHh .labelText,#mermaid-svg-auVPRdM8EsRVYfHh .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-auVPRdM8EsRVYfHh .loopText,#mermaid-svg-auVPRdM8EsRVYfHh .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-auVPRdM8EsRVYfHh .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-auVPRdM8EsRVYfHh .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-auVPRdM8EsRVYfHh .noteText,#mermaid-svg-auVPRdM8EsRVYfHh .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-auVPRdM8EsRVYfHh .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-auVPRdM8EsRVYfHh .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-auVPRdM8EsRVYfHh .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-auVPRdM8EsRVYfHh .actorPopupMenu{position:absolute;}#mermaid-svg-auVPRdM8EsRVYfHh .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-auVPRdM8EsRVYfHh .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-auVPRdM8EsRVYfHh .actor-man circle,#mermaid-svg-auVPRdM8EsRVYfHh line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-auVPRdM8EsRVYfHh :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 李四 王五 王五你好吗？ 与疾病战斗 loop [健康检查] 合理 食物 看医生... 很好! 你怎么样? 很好! 张三 李四 王五 标题：复杂使用
9.4.8 甘特图样例：
Mon 06 Mon 13 Mon 20 需求 原型 UI设计 未来任务 学习准备理解需求 设计框架 开发 未来任务 耍 功能测试 压力测试 测试报告 设计 开发 测试 软件开发甘特图
10. 其它
使用空标题进增加上下文本间距
#
# 参考资料
[菜鸟教程-Markdown 教程](https://www.runoob.com/markdown/md-code.html)
[百度-度娘图片](https://www.baidu.com)
[知乎-VS Code中的Markdown插件](https://zhuanlan.zhihu.com/p/265197528)
[Github](https://github.com)
展示效果：
参考资料
- 菜鸟教程-Markdown 教程
- 百度-度娘图片
- 知乎-VS Code中的Markdown插件
- Github
markdown 文档 api相关推荐
- C#解析Markdown文档，实现替换图片链接操作
前言 又是好久没写博客了 其实也不是没写,是最近在「做一个博客」,从2月21日开始,大概一个多星期的时间,疯狂刷进度,边写代码边写了一整系列的博客开发笔记,目前为止已经写了16篇了,然后上3月之后工作 ...
- VScode编辑同步Markdown文档到印象笔记
VScode编辑同步Markdown文档到印象笔记 第一步 下载VSCode 到Visual Studio Code官网下载VSCode,并安装 第二步 安装VScode相关插件 需要两个插件: ev ...
- MarkText + iPic + 阿里云Oss 搭建markdown文档写作
MarkText + iPic + 阿里云Oss 搭建markdown文档写作 本文记录如何下载配置MarkText编辑器以及如何使用iPic+阿里云的对象存储搭建一个markdown的图床 下载安装 ...
- MarkdownView：Markdown 文档预览视图组件
原文链接:https://github.com/keitaoouchi/MarkdownView MarkdownView:Markdown 文档预览视图组件.# 为开源点赞# -- 由SwiftLa ...
- 查看文档(API) (NSString)
查看文档(API) OC的数据类型 NSInteger: 整型(32 = int, 64 = long) CGFloat: 浮点型(32 = floa ...
- idea中的markdown文档如何插入图片
一.情景说明 有些时候我们需要在我们的项目中写类似readme.md文档,聪明的你知道怎么在该文档中插入本项目中的图片? 二.markdown中插入本地图片 插入网络图片  单一文档 API 介绍和使用 update和delete API
大家好,我是烤鸭: 今天分享的是官网6.x 单一文档(Single document APIs)APIs. 本文这是部分翻译,如果想看全部的,还是建议阅读官方api.链接: https://ww ...
- Zimbra开发接口文档API下载地址
开源版本下载地址: https://www.zimbra.com/documentation/ 文档API接口下载地址: https://wiki.zimbra.com/wiki/SOAP_API_R ...
最新文章
- 看完 50000 张专辑封面后，AI 设计师疯狂输出
- 课后作业:字符串加密
- qt c语言程序运行时间,c – 在Qt中计时事件的最佳方法
- CycleGAN非配对图像生成，定制你的卡通照
- mysql8 win10启动_Windows10 mysql 8.0.12 非安装版配置启动方法
- 视不可当:信息图与可视化传播
- header中Content-Disposition的作用
- redis内存淘汰和持久化_REDIS的淘汰机制与持久化
- python日志保存为html文件,用 Python 抓取公号文章保存成 HTML
- android 血压计开发,智能血压计方案开发
- 关于OpenCV使用遇到的问题集（多数为转载）
- mongodb分组查询 php,MongoVUE下实现MongoDB的Group分组查询
- 计算机科学美国大学专业,2015年U.S.NEWS计算机科学专业美国大学排名
- 中铁二局全面推行建筑工地务工人员实名制管理
- 云班课使用浏览器倍速播放插件
- VMWare安装报错：此安装程序要求您重新启动系统以完成 Microsoft VC Redistributable安装，然后重新运行该安装程序。
- 自适应Simpson法P4525 【模板】自适应辛普森法1
- 视频：这不是科幻，厉害了，用人工智能修长城
- Win7+修改管理员账户Administrator名字的方法
- SDKMAN因为网络问题用不了怎么办？