0
0

Markdown 语法大全详解

Markdown 语法大全详解

Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写，Markdown被大量使用，如Github、Wikipedia、简书等。

1. 样式标题

Markdown 支持使用 

#

符号来创建不同级别的标题。

#

符号的数量代表了标题的级别。

# 这是 H1 标题
## 这是 H2 标题
### 这是 H3 标题
#### 这是 H4 标题
##### 这是 H5 标题
###### 这是 H6 标题

这是 H1 标题

这是 H2 标题

这是 H3 标题

这是 H4 标题
这是 H5 标题
这是 H6 标题

不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑，请用一个空格在 # 和标题之间进行分隔。

2. 段落

段落由一行或多行文本组成，每段之间需要有一个空行隔开。

这是一个段落。它可以包含多个句子。

这是另一个段落。

这是一个段落。它可以包含多个句子。

这是另一个段落。

3. 强调

用于突出显示文本。

斜体

*斜体文本* 或 _斜体文本_

斜体文本 或 斜体文本

粗体

**粗体文本** 或 __粗体文本__

粗体文本 或 粗体文本

斜体和粗体

***斜体加粗文本*** 或 ___斜体加粗文本___

斜体加粗文本 或 斜体加粗文本

4. 列表

列表分为有序列表和无序列表。

无序列表

- 项目 1
- 项目 2
- 项目 3
  • 项目 1
  • 项目 2
  • 项目 3

有序列表

1. 项目 1
2. 项目 2
3. 项目 3
  1. 项目 1
  2. 项目 2
  3. 项目 3

嵌套列表

- 项目 1
- 项目 2
  - 子项目 1
  - 子项目 2
- 项目 3
  • 项目 1
  • 项目 2 - 子项目 1- 子项目 2
  • 项目 3

5. 链接

链接可以指向网页或者文件。

[链接文本](https://example.com)

链接文本

6. 图像

插入图像也很简单 这张图片好像没法加载…

![替代文字](https://imagepphcloud.thepaper.cn/pph/image/126/870/199.jpg)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B0zSBx1M-1722265538317)(https://imagepphcloud.thepaper.cn/pph/image/126/870/199.jpg)]

7. 代码

内联代码

`内联代码`

内联代码

代码块

\```\n
代码块\n
````\n

代码块

8. 表格

表格可以帮助组织数据。

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 数据 1 | 数据 2 | 数据 3 |
| 数据 4 | 数据 5 | 数据 6 |

列 1列 2列 3数据 1数据 2数据 3数据 4数据 5数据 6

9. 水平线

水平线用于分隔不同的部分。

---

10. 引用

引用通常用于展示原文。

> 这是一个引用。

这是一个引用。

11. 删除线

~~被删除的文字~~

被删除的文字

12. 任务列表

- [ ] 未完成的任务
- [x] 已完成的任务
  • 未完成的任务
  • 已完成的任务

13. 数学公式

Markdown 本身不支持数学公式，但许多Markdown编辑器支持使用 LaTeX 格式来插入数学公式。

行内公式

$E = mc^2$

     E 
    
   
     = 
    
   
     m 
    
    
    
      c 
     
    
      2 
     
    
   
  
    E = mc^2 
   
  
E=mc2

独立公式

$$ E = mc^2 $$

      E 
     
    
      = 
     
    
      m 
     
     
     
       c 
      
     
       2 
      
     
    
   
     E = mc^2 
    
   
 E=mc2

14. 脚注

脚注可以用来添加额外的信息或引用。

这里有一个脚注[^1]。

[^1]: 这是脚注的内容。

这里有一个脚注1。

15. 定义列表

定义列表用于定义术语或概念。

名词:
: 定义
: 更多解释

名词:

定义

更多解释

16. 代码高亮

对于代码块，可以通过指定语言来实现语法高亮。

\```\n
```python
def hello_world():
    print("Hello, world!")
````\n

defhello_world():print("Hello, world!")

17. 表格对齐

有些Markdown编辑器支持表格中的单元格对齐方式。

| 左对齐 | 居中对齐 | 右对齐 |
| :---- | :-----: | ----: |
| 文本  |   文本  |  文本 |
| 文本  |   文本  |  文本 |

左对齐居中对齐右对齐文本文本文本文本文本文本

18. YAML 前置元数据

Markdown 文件有时会包含YAML格式的前置元数据，用于存储文件的相关信息。

---
title: 我的文章标题
author: John Doe
date: 2024-07-29
---

# 开始正文

title: 我的文章标题

author: John Doe
date: 2024-07-29

开始正文

18. 高级数学公式

一些Markdown编辑器支持使用LaTeX语法来编写更复杂的数学公式。

$$ \int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi} $$

       ∫ 
      
      
      
        − 
       
      
        ∞ 
       
      
      
      
        + 
       
      
        ∞ 
       
      
     
     
     
       e 
      
      
      
        − 
       
       
       
         x 
        
       
         2 
        
       
      
     
    
      d 
     
    
      x 
     
    
      = 
     
     
     
       π 
      
     
    
   
     \int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi} 
    
   
 ∫−∞+∞​e−x2dx=π​

19.嵌套引用

将两个引用嵌套起来

> 这是一个引用。
> > 这是一个嵌套引用。

这是一个引用。

这是一个嵌套引用。

20. 转义字符

在Markdown中，如果想要显示某些特殊字符而不是让它们被解析为Markdown语法的一部分，可以使用反斜杠 

\

来转义这些字符。

转义字符示例

  • **反斜杠 (\)**：\\\
  • **星号 (*)*：\*
  • **下划线 (_)**：\__
  • **大括号 ({}) 和方括号 ([])**：\{ \} \[ \]{ } [ ]
  • **尖括号 (<>)**：\< \>< >
  • **竖线 (|)**：\||
  • **反引号 (``)**：````````
  • **井号 (#)**：\##
  • **减号 (-)**：\--
  • **点 (.) 和感叹号 (!)**：\. \!. !
  • 其他特殊字符：例如美元符号 $、百分号 % 等，通常不需要转义，除非在某些特定情况下（如数学公式）需要使用。

示例

假设你想在一个段落中显示星号 

*

和下划线 

_

而不是让它们被解析为斜体，你可以这样写：

这不是 * 斜体文本 *，也不是 _ 下划线文本 _。

这不是 * 斜体文本 *，也不是 _ 下划线文本 _。

显示结果：

这不是 * 斜体文本 *，也不是 _ 下划线文本 _。

注意

  • 在某些情况下，如使用星号或下划线时，只有当它们位于单词边界时才需要转义。例如，在单词中间的下划线或星号通常不需要转义。
  • 当使用代码块时，通常不需要转义内部的特殊字符。
  • 对于某些Markdown编辑器，你可能需要转义两次才能正确显示转义字符，例如 \\ 显示为 \。

21. 内嵌 HTML 标签

在 Markdown 中，任何有效的 HTML 标签都可以直接使用，而不会被 Markdown 解析器特别处理。这意味着你可以使用 HTML 来添加额外的样式或功能，例如 CSS 类、id、表格样式等。

示例

基本 HTML 标签
<b>加粗文本</b>
<i>斜体文本</i>
<em>强调文本</em>
<strong>强烈强调文本</strong>
<small>小字体文本</small>

加粗文本
斜体文本
强调文本
强烈强调文本
小字体文本

使用 CSS 类
<p class="highlight">这是一个带有 CSS 类的段落。</p>

这是一个带有 CSS 类的段落。

使用 CSS id
<p id="my-id">这是一个带有 CSS id 的段落。</p>

这是一个带有 CSS id 的段落。

使用 CSS 样式
<p style="color: red;">这是一个带有内联样式的段落。</p>

这是一个带有内联样式的段落。

使用表格
<table>
  <tr>
    <th>标题 1</th>
    <th>标题 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table>

标题 1标题 2数据 1数据 2

使用 div
<div class="container">
  <p>这是 div 内部的段落。</p>
</div>

这是 div 内部的段落。

使用 span
<span class="important">这是重要的文本。</span>

这是重要的文本。

使用图像
<img src="https://img-home.csdnimg.cn/images/20230724024159.png?be=1&origin_url=https://example.com/image.jpg" alt="示例图像" title="这是示例图像">

这是示例图像

使用锚点
<a href="https://example.com" target="_blank">访问示例网站</a>

访问示例网站

使用列表
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>
  • 列表项 1
  • 列表项 2
使用注释
<!-- 这是一个 HTML 注释 -->

22. 甘特图

Markdown 本身不支持直接绘制甘特图，但你可以使用Mermaid这样的工具来在Markdown文档中生成甘特图。Mermaid 是一种基于Markdown的图表生成工具，支持甘特图等多种图表。

甘特图示例
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划中               :         des3, after des2, 5d

这段代码将生成一个简单的甘特图。

#mermaid-svg-mv1Tt2e3rL7PfYnr {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-mv1Tt2e3rL7PfYnr .error-icon{fill:#552222;}#mermaid-svg-mv1Tt2e3rL7PfYnr .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-mv1Tt2e3rL7PfYnr .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-mv1Tt2e3rL7PfYnr .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-mv1Tt2e3rL7PfYnr .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-mv1Tt2e3rL7PfYnr .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-mv1Tt2e3rL7PfYnr .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-mv1Tt2e3rL7PfYnr .marker{fill:#333333;stroke:#333333;}#mermaid-svg-mv1Tt2e3rL7PfYnr .marker.cross{stroke:#333333;}#mermaid-svg-mv1Tt2e3rL7PfYnr svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-mv1Tt2e3rL7PfYnr .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-mv1Tt2e3rL7PfYnr .exclude-range{fill:#eeeeee;}#mermaid-svg-mv1Tt2e3rL7PfYnr .section{stroke:none;opacity:0.2;}#mermaid-svg-mv1Tt2e3rL7PfYnr .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-mv1Tt2e3rL7PfYnr .section2{fill:#fff400;}#mermaid-svg-mv1Tt2e3rL7PfYnr .section1,#mermaid-svg-mv1Tt2e3rL7PfYnr .section3{fill:white;opacity:0.2;}#mermaid-svg-mv1Tt2e3rL7PfYnr .sectionTitle0{fill:#333;}#mermaid-svg-mv1Tt2e3rL7PfYnr .sectionTitle1{fill:#333;}#mermaid-svg-mv1Tt2e3rL7PfYnr .sectionTitle2{fill:#333;}#mermaid-svg-mv1Tt2e3rL7PfYnr .sectionTitle3{fill:#333;}#mermaid-svg-mv1Tt2e3rL7PfYnr .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-mv1Tt2e3rL7PfYnr .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-mv1Tt2e3rL7PfYnr .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-mv1Tt2e3rL7PfYnr .grid path{stroke-width:0;}#mermaid-svg-mv1Tt2e3rL7PfYnr .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-mv1Tt2e3rL7PfYnr .task{stroke-width:2;}#mermaid-svg-mv1Tt2e3rL7PfYnr .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-mv1Tt2e3rL7PfYnr .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-mv1Tt2e3rL7PfYnr .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-mv1Tt2e3rL7PfYnr .task.clickable{cursor:pointer;}#mermaid-svg-mv1Tt2e3rL7PfYnr .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-mv1Tt2e3rL7PfYnr .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-mv1Tt2e3rL7PfYnr .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-mv1Tt2e3rL7PfYnr .taskText0,#mermaid-svg-mv1Tt2e3rL7PfYnr .taskText1,#mermaid-svg-mv1Tt2e3rL7PfYnr .taskText2,#mermaid-svg-mv1Tt2e3rL7PfYnr .taskText3{fill:white;}#mermaid-svg-mv1Tt2e3rL7PfYnr .task0,#mermaid-svg-mv1Tt2e3rL7PfYnr .task1,#mermaid-svg-mv1Tt2e3rL7PfYnr .task2,#mermaid-svg-mv1Tt2e3rL7PfYnr .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-mv1Tt2e3rL7PfYnr .taskTextOutside0,#mermaid-svg-mv1Tt2e3rL7PfYnr .taskTextOutside2{fill:black;}#mermaid-svg-mv1Tt2e3rL7PfYnr .taskTextOutside1,#mermaid-svg-mv1Tt2e3rL7PfYnr .taskTextOutside3{fill:black;}#mermaid-svg-mv1Tt2e3rL7PfYnr .active0,#mermaid-svg-mv1Tt2e3rL7PfYnr .active1,#mermaid-svg-mv1Tt2e3rL7PfYnr .active2,#mermaid-svg-mv1Tt2e3rL7PfYnr .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-mv1Tt2e3rL7PfYnr .activeText0,#mermaid-svg-mv1Tt2e3rL7PfYnr .activeText1,#mermaid-svg-mv1Tt2e3rL7PfYnr .activeText2,#mermaid-svg-mv1Tt2e3rL7PfYnr .activeText3{fill:black!important;}#mermaid-svg-mv1Tt2e3rL7PfYnr .done0,#mermaid-svg-mv1Tt2e3rL7PfYnr .done1,#mermaid-svg-mv1Tt2e3rL7PfYnr .done2,#mermaid-svg-mv1Tt2e3rL7PfYnr .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-mv1Tt2e3rL7PfYnr .doneText0,#mermaid-svg-mv1Tt2e3rL7PfYnr .doneText1,#mermaid-svg-mv1Tt2e3rL7PfYnr .doneText2,#mermaid-svg-mv1Tt2e3rL7PfYnr .doneText3{fill:black!important;}#mermaid-svg-mv1Tt2e3rL7PfYnr .crit0,#mermaid-svg-mv1Tt2e3rL7PfYnr .crit1,#mermaid-svg-mv1Tt2e3rL7PfYnr .crit2,#mermaid-svg-mv1Tt2e3rL7PfYnr .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-mv1Tt2e3rL7PfYnr .activeCrit0,#mermaid-svg-mv1Tt2e3rL7PfYnr .activeCrit1,#mermaid-svg-mv1Tt2e3rL7PfYnr .activeCrit2,#mermaid-svg-mv1Tt2e3rL7PfYnr .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-mv1Tt2e3rL7PfYnr .doneCrit0,#mermaid-svg-mv1Tt2e3rL7PfYnr .doneCrit1,#mermaid-svg-mv1Tt2e3rL7PfYnr .doneCrit2,#mermaid-svg-mv1Tt2e3rL7PfYnr .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-mv1Tt2e3rL7PfYnr .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-mv1Tt2e3rL7PfYnr .milestoneText{font-style:italic;}#mermaid-svg-mv1Tt2e3rL7PfYnr .doneCritText0,#mermaid-svg-mv1Tt2e3rL7PfYnr .doneCritText1,#mermaid-svg-mv1Tt2e3rL7PfYnr .doneCritText2,#mermaid-svg-mv1Tt2e3rL7PfYnr .doneCritText3{fill:black!important;}#mermaid-svg-mv1Tt2e3rL7PfYnr .activeCritText0,#mermaid-svg-mv1Tt2e3rL7PfYnr .activeCritText1,#mermaid-svg-mv1Tt2e3rL7PfYnr .activeCritText2,#mermaid-svg-mv1Tt2e3rL7PfYnr .activeCritText3{fill:black!important;}#mermaid-svg-mv1Tt2e3rL7PfYnr .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-mv1Tt2e3rL7PfYnr :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
2014-01-06 

  2014-01-07 

  2014-01-08 

  2014-01-09 

  2014-01-10 

  2014-01-11 

  2014-01-12 

  2014-01-13 

  2014-01-14 

  2014-01-15 

  2014-01-16 

  2014-01-17 

 已完成 

 进行中 

 计划中 

  现有任务 

Adding GANTT diagram functionality to mermaid

23. UML 图

Mermaid 同样支持多种UML图，包括类图、序列图、活动图等。

类图示例

sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四-->>王五: 你最近怎么样，王五？
李四--x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?

这段代码将生成一个简单的类图。

#mermaid-svg-fgu4IsexFZl9VhDp {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-fgu4IsexFZl9VhDp .error-icon{fill:#552222;}#mermaid-svg-fgu4IsexFZl9VhDp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-fgu4IsexFZl9VhDp .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-fgu4IsexFZl9VhDp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-fgu4IsexFZl9VhDp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-fgu4IsexFZl9VhDp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-fgu4IsexFZl9VhDp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-fgu4IsexFZl9VhDp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-fgu4IsexFZl9VhDp .marker.cross{stroke:#333333;}#mermaid-svg-fgu4IsexFZl9VhDp svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-fgu4IsexFZl9VhDp .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fgu4IsexFZl9VhDp text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-fgu4IsexFZl9VhDp .actor-line{stroke:grey;}#mermaid-svg-fgu4IsexFZl9VhDp .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-fgu4IsexFZl9VhDp .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-fgu4IsexFZl9VhDp #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-fgu4IsexFZl9VhDp .sequenceNumber{fill:white;}#mermaid-svg-fgu4IsexFZl9VhDp #sequencenumber{fill:#333;}#mermaid-svg-fgu4IsexFZl9VhDp #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-fgu4IsexFZl9VhDp .messageText{fill:#333;stroke:#333;}#mermaid-svg-fgu4IsexFZl9VhDp .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fgu4IsexFZl9VhDp .labelText,#mermaid-svg-fgu4IsexFZl9VhDp .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-fgu4IsexFZl9VhDp .loopText,#mermaid-svg-fgu4IsexFZl9VhDp .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-fgu4IsexFZl9VhDp .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-fgu4IsexFZl9VhDp .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-fgu4IsexFZl9VhDp .noteText,#mermaid-svg-fgu4IsexFZl9VhDp .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-fgu4IsexFZl9VhDp .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fgu4IsexFZl9VhDp .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fgu4IsexFZl9VhDp .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fgu4IsexFZl9VhDp .actorPopupMenu{position:absolute;}#mermaid-svg-fgu4IsexFZl9VhDp .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-fgu4IsexFZl9VhDp .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fgu4IsexFZl9VhDp .actor-man circle,#mermaid-svg-fgu4IsexFZl9VhDp line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-fgu4IsexFZl9VhDp :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
张三 

   李四 
 
   王五 
 
你好！李四, 最近怎么样? 

你最近怎么样，王五？ 

我很好，谢谢! 

我很好，谢谢! 

  李四想了很长时间, 文字太长了 

  不适合放在一行. 

打量着王五... 

很好... 王五, 你怎么样? 

  张三 

  李四 

  王五

24. flow 流程图

Mermaid 支持多种图表类型，其中流程图是非常常用的一种。

lowchat
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

25. Mermaid 类图

Mermaid 支持绘制类图，可以用来表示类之间的关系。

graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D

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

       长方形 
     

       圆 
     

       圆角长方形 
     

       菱形
Class Diagram类图示例
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 <|-- Class04
Class05 <|-- Class06
Class07 : equals(Class07 other){
}
Class07 : String getName(){
}
Class08 <|-- Class07
Class07 .. Class06 : Cool
Class06 .. Class02 : Super cool
Class04 : implements Interface01
Class05 : implements Interface00
Class06 : implements Interface00
Class07 : implements Interface00
Class08 : implements Interface02
Class09 : implements Interface01
Class04 <|-- Class05
Class04 <|-- Class06
Interface00 <|-- Interface01
Interface00 <|-- Interface02
[Class10] <|-- Class07
Class09 <|-- Class07
Class04 .. Class07 : "Cool"
Class06 .. Class07 : "Super cool"

这段代码将生成一个类图。

#mermaid-svg-ZFh7ntXq9So3hEDl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZFh7ntXq9So3hEDl .error-icon{fill:#552222;}#mermaid-svg-ZFh7ntXq9So3hEDl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ZFh7ntXq9So3hEDl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ZFh7ntXq9So3hEDl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ZFh7ntXq9So3hEDl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ZFh7ntXq9So3hEDl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ZFh7ntXq9So3hEDl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ZFh7ntXq9So3hEDl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ZFh7ntXq9So3hEDl .marker.cross{stroke:#333333;}#mermaid-svg-ZFh7ntXq9So3hEDl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ZFh7ntXq9So3hEDl g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-ZFh7ntXq9So3hEDl g.classGroup text .title{font-weight:bolder;}#mermaid-svg-ZFh7ntXq9So3hEDl .nodeLabel,#mermaid-svg-ZFh7ntXq9So3hEDl .edgeLabel{color:#131300;}#mermaid-svg-ZFh7ntXq9So3hEDl .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-ZFh7ntXq9So3hEDl .label text{fill:#131300;}#mermaid-svg-ZFh7ntXq9So3hEDl .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-ZFh7ntXq9So3hEDl .classTitle{font-weight:bolder;}#mermaid-svg-ZFh7ntXq9So3hEDl .node rect,#mermaid-svg-ZFh7ntXq9So3hEDl .node circle,#mermaid-svg-ZFh7ntXq9So3hEDl .node ellipse,#mermaid-svg-ZFh7ntXq9So3hEDl .node polygon,#mermaid-svg-ZFh7ntXq9So3hEDl .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ZFh7ntXq9So3hEDl .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-ZFh7ntXq9So3hEDl g.clickable{cursor:pointer;}#mermaid-svg-ZFh7ntXq9So3hEDl g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-ZFh7ntXq9So3hEDl g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-ZFh7ntXq9So3hEDl .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-ZFh7ntXq9So3hEDl .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-ZFh7ntXq9So3hEDl .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-ZFh7ntXq9So3hEDl .dashed-line{stroke-dasharray:3;}#mermaid-svg-ZFh7ntXq9So3hEDl #compositionStart,#mermaid-svg-ZFh7ntXq9So3hEDl .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ZFh7ntXq9So3hEDl #compositionEnd,#mermaid-svg-ZFh7ntXq9So3hEDl .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ZFh7ntXq9So3hEDl #dependencyStart,#mermaid-svg-ZFh7ntXq9So3hEDl .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ZFh7ntXq9So3hEDl #dependencyStart,#mermaid-svg-ZFh7ntXq9So3hEDl .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ZFh7ntXq9So3hEDl #extensionStart,#mermaid-svg-ZFh7ntXq9So3hEDl .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ZFh7ntXq9So3hEDl #extensionEnd,#mermaid-svg-ZFh7ntXq9So3hEDl .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ZFh7ntXq9So3hEDl #aggregationStart,#mermaid-svg-ZFh7ntXq9So3hEDl .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ZFh7ntXq9So3hEDl #aggregationEnd,#mermaid-svg-ZFh7ntXq9So3hEDl .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-ZFh7ntXq9So3hEDl .edgeTerminals{font-size:11px;}#mermaid-svg-ZFh7ntXq9So3hEDl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
Cool

Where am i?

«interface»

Class01

int chimp

int gorilla

size()

AveryLongClass

Class09

C2

C3

Class07

Object[] elementData

equals()

Class10

service>>

int id

size()

  1. 这是脚注的内容。 ↩︎
标签： 前端 开发语言 html
本文转载自: https://blog.csdn.net/w11111xxxl/article/details/140783343
版权归原作者 睿智的海鸥 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Markdown 语法大全详解”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航