Markdown基本语法大全_含各类图表_含例子说明

当在Markdown文本中输入@[toc](目录名称)时，编辑器会自动将各级标题生成目录

例子

@[toc](目录)
# 一级标题
## 二级标题

显示效果

共支持6级标题

例子

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

显示效果

3.1 加粗

例子：

**加粗的字**

显示效果：

加粗的字

3.2 键盘文本

例子：

复制文本的命令为：ctrl + c

显示效果：

复制文本的命令为：ctrl + c

3.3 斜体 例子：

*斜体*

显示效果： 斜体

3.4 行内代码

例子：

输出hello world：`print("hello world")`

显示效果：

输出hello world：print("hello world")

3.5 标记文本 例子：

==我是标记==

显示效果：

我是标记

3.6 删除文本 例子：

~~删除文本~~

显示效果： 删除文本

3.7 引用文本 例子：

> 引用1
> 引用2

显示效果：

引用1 引用2

3.8 上下标 例子：

H~2~O
2^10^

显示效果： H2O 210

4.1 有序列表

例子：

 1. 项目1
	2. 项目1.1
 		3. 项目1.1.1

显示效果：

1. 项目1
   2. 项目1.1
      3. 项目1.1.1

4.2 无序列表 例子：

- 项目
	- 项目
		- 项目

显示效果：

• 项目
  • 项目
    • 项目

4.3 检查列表 例子：

- [ ] 计划任务
- [x] 完成任务

显示效果：

• 计划任务
• 完成任务

4.4 自定义列表 第一行必须是空行，两个类别之间也需空行

例子：

C++
: 虚构函数

Java
: 虚拟机

显示效果：

在需要添加注脚的词后面添加[^注脚名称]， 在文中任意位置（一般在该段落的最后）添加注脚内容[^注脚名称]: 我是注脚的具体内容，在HTML页面显示的时候，注脚内容显示在文章末尾处

例子：

在我后面添加注脚[^1]
...
...
...
[^1]: 我是注脚的具体内容

显示效果：

6.1 链接 例子：

[CSDN官方网站](https://www.csdn.net/)

显示效果： CSDN官方网站

6.2 引用类型链接 该格式的URL在Markdown中更易于显示和阅读，引用类型链接的第二部分一般放在Markdown文件的末尾处

例子：

[CSDN官方网站][CSDN]

[CSDN]: https://www.csdn.net/

显示效果： CSDN官方网站

6.3 图片 CSDN可以进行本地图片的拖拽上传，图片默认是居中显示，可以通过参数控制图片的大小

例子：

![美女图片](https://img-blog.csdnimg.cn/img_convert/9ae30424fa42b891bcea5e31d715199f.png#pic_center =500x600)

显示效果：

默认是文本格式，也可以是java、scala、python等编程语言的代码风格

例子：

显示效果：

#include 
using namespace std;

int main() {
	cout 二宝 二宝 -->> 小宝: 二宝—>>小宝 小宝 -x 二宝: 二宝tspan{fill:black;stroke:none;}#mermaid-svg-HcKonRO9GxDy1P7W .loopText,#mermaid-svg-HcKonRO9GxDy1P7W .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-HcKonRO9GxDy1P7W .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-HcKonRO9GxDy1P7W .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-HcKonRO9GxDy1P7W .noteText,#mermaid-svg-HcKonRO9GxDy1P7W .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-HcKonRO9GxDy1P7W .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HcKonRO9GxDy1P7W .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HcKonRO9GxDy1P7W .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HcKonRO9GxDy1P7W .actorPopupMenu{position:absolute;}#mermaid-svg-HcKonRO9GxDy1P7W .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-HcKonRO9GxDy1P7W .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-HcKonRO9GxDy1P7W .actor-man circle,#mermaid-svg-HcKonRO9GxDy1P7W line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-HcKonRO9GxDy1P7W :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
   
    
    
     
      大宝
     
    
   
  
  
   
   
    
    
     
      二宝
     
    
   
  
  
   
   
    
    
     
      小宝
     
    
   
  
  
   
    
   
  
  
   
    
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   大宝--->>二宝
  
  
  
   二宝--->>小宝
  
  
  
   二宝 实线箭头
–>> 虚线箭头
-x 带x的实线箭头
–x 带x的虚线箭头
 
note标记含义：
 
note left of xxx：位于xxx对象的左侧
note over xxx：覆盖在xxx对象上
note right of xxx：位于xxx对象的右侧
 
12.2 使用Mermaid产生一个流程图 
例子： ```mermaid graph LR A[长方形] --小样, 接招–> B{菱形} B --> C((圆形)) C ==别欺负我兄弟==> A ```
 
显示效果：
 

 
  #mermaid-svg-ttx4rCmUDlm0iAwP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ttx4rCmUDlm0iAwP .error-icon{fill:#552222;}#mermaid-svg-ttx4rCmUDlm0iAwP .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ttx4rCmUDlm0iAwP .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ttx4rCmUDlm0iAwP .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ttx4rCmUDlm0iAwP .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ttx4rCmUDlm0iAwP .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ttx4rCmUDlm0iAwP .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ttx4rCmUDlm0iAwP .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ttx4rCmUDlm0iAwP .marker.cross{stroke:#333333;}#mermaid-svg-ttx4rCmUDlm0iAwP svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ttx4rCmUDlm0iAwP .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ttx4rCmUDlm0iAwP .cluster-label text{fill:#333;}#mermaid-svg-ttx4rCmUDlm0iAwP .cluster-label span{color:#333;}#mermaid-svg-ttx4rCmUDlm0iAwP .label text,#mermaid-svg-ttx4rCmUDlm0iAwP span{fill:#333;color:#333;}#mermaid-svg-ttx4rCmUDlm0iAwP .node rect,#mermaid-svg-ttx4rCmUDlm0iAwP .node circle,#mermaid-svg-ttx4rCmUDlm0iAwP .node ellipse,#mermaid-svg-ttx4rCmUDlm0iAwP .node polygon,#mermaid-svg-ttx4rCmUDlm0iAwP .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ttx4rCmUDlm0iAwP .node .label{text-align:center;}#mermaid-svg-ttx4rCmUDlm0iAwP .node.clickable{cursor:pointer;}#mermaid-svg-ttx4rCmUDlm0iAwP .arrowheadPath{fill:#333333;}#mermaid-svg-ttx4rCmUDlm0iAwP .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ttx4rCmUDlm0iAwP .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ttx4rCmUDlm0iAwP .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ttx4rCmUDlm0iAwP .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ttx4rCmUDlm0iAwP .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ttx4rCmUDlm0iAwP .cluster text{fill:#333;}#mermaid-svg-ttx4rCmUDlm0iAwP .cluster span{color:#333;}#mermaid-svg-ttx4rCmUDlm0iAwP 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-ttx4rCmUDlm0iAwP :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
  
   
    
    
     
      
      
       
        
       
      
     
     
      
      
       
        
       
      
     
     
      
      
       
        
       
      
     
    
    
     
      
       
       
        

         小样, 接招
        
       
      
     
     
      
       
       
        

         
        
       
      
     
     
      
       
       
        

         别欺负我兄弟
        
       
      
     
    
    
     
      
      
       
        
         

          长方形
         
        
       
      
     
     
      
      
       
        
         

          菱形
         
        
       
      
     
     
      
      
       
        
         

          圆形
         
        
       
      
     
    
   
  
 
 
说明： graph：表示绘制流程图 图的方向：
 
TB从上到下
BT从下到上
RL从右到左
LR从左到右
TD同TB
 
定义一个图形实例的方式为id[图形实例描述]，id可以在后面直接使用，其中不同图形的类型如下：
 
[]表示圆形
()表示圆角矩形
>]表示不对称的矩形
{}表示菱形
(())表示圆形
 
节点之间的连接：
 
A --> B A带箭头指向B
A --- B A不带箭头指向B
A -.- B A用虚线指向B
A -.-> B A用带箭头的虚线指向B
A ==> B A用加粗的箭头指向B
A --描述-- B A不带箭头指向B并在中间加上文字描述
A --描述--> B A带箭头指向B并在中间加上文字描述
A -.描述.-> B A用带箭头的虚线指向B并在中间加上文字描述
A ==描述==> B A用加粗的箭头指向B并在中间加上文字描述
 
13. FLowchart流程图 
更多内容参考flowchart
 
例子： ```mermaid flowchat st=>start: 开始 e=>end: 登录成功 op=>operation: 输入账号和密码登录 cond=>condition: 登录成功？
 
st->op->cond cond(yes)->e cond(no)->op ```
 
显示效果：
 

 
  
   Created with Raphaël 2.3.0
  
  
   
    
   
   
    
   
   
    
   
   
    
   
  
  
  
   
    开始
   
  
  
  
   
    输入账号和密码登录
   
  
  
  
   
    登录成功？
   
  
  
  
   
    登录成功
   
  
  
  
  
  
   
    yes
   
  
  
  
   
    no
   
  
 
 
说明： flowchat：表示绘制flowchat流程图
 
定义一个图形实例的方式为：id=>操作模块: 图形实例说明，id可以在后面进行引用，其中=>两边不能有空格，常用的操作模块如下：
 
start 开始
end 结束
operation 普通操作块
condition 条件判断块
subroutine 子任务块
inputoutput 输入输出块
 
转向控制方式为：id1->id2->id3，其中->两边不能有空格
 
condition有两种结果：
 
cond(yes)->e 表示符合条件转向e
cond(no)->op 表示不符合条件转向op