一文了解Markdown

无论是内容创作者、程序开发者、自媒体博主，或是日常随手记录的使用者，Markdown 都是高效的写作利器。依托极简的标记语法，既能轻松排版文稿，又可一键转换成规范美观的富文本格式。本文从基础到进阶，系统梳理 Markdown 全量语法，带你轻松上手，体验高效写作。

Markdown 是一款轻量化标记语言，依靠简洁易懂的符号规则修饰纯文本，可便捷编译为 HTML，兼顾易用性与拓展性，是文稿撰写与技术文档编写的优选方案。

Markdown 基础语法

1. 标题：让你的内容层次分明

用 # 号来创建标题。# 的数量表示标题的级别，从一级到六级。

📝 原始代码：

markdown 复制代码

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

🎨 渲染效果：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

标题前面建议加一个空格，部分解析器对此有严格要求。

2. 段落与换行：自然流畅

Markdown 中的段落就是一行接一行的文本。要创建新段落，只需在两行文本之间空一行。

📝 原始代码：

markdown 复制代码

这是第一段文字。段落内的换行
不会产生新的段落。

这是第二段文字。中间空了一行，所以它成了新段落。

如果要在段落内强制换行，  
可以在行末加两个空格再回车。

🎨 渲染效果：

这是第一段文字。段落内的换行

不会产生新的段落。

这是第二段文字。中间空了一行，所以它成了新段落。

如果要在段落内强制换行，

可以在行末加两个空格再回车。

3. 字体样式：强调你的文字

通过简单的符号包裹文字，就能实现粗体、斜体、删除线等效果。

📝 原始代码：

markdown 复制代码

**这是粗体文字**

__这也是粗体文字__

*这是斜体文字*

_这也是斜体文字_

***这是粗斜体文字***

~~这是删除线文字~~

`这是行内代码`

🎨 渲染效果：

这是粗体文字

这也是粗体文字

这是斜体文字

这也是斜体文字

这是粗斜体文字

这是删除线文字

这是行内代码

4. 列表：整洁有序

📝 原始代码：

markdown 复制代码

### 无序列表

- 项目一
- 项目二
  - 嵌套项目 2.1
  - 嵌套项目 2.2
- 项目三

### 有序列表

1. 第一步
2. 第二步
   1. 子步骤 2.1
   2. 子步骤 2.2
3. 第三步

🎨 渲染效果：

无序列表

项目一
项目二
- 嵌套项目 2.1
- 嵌套项目 2.2
项目三

有序列表

第一步
第二步
1. 子步骤 2.1
2. 子步骤 2.2
第三步

无序列表支持 -、* 或 + 三种符号，效果一致。嵌套只需缩进两个空格或一个 Tab。

5. 链接与图片：丰富内容

📝 原始代码：

markdown 复制代码

### 链接

这是一个 [行内链接](https://github.com/doocs)。

这是一个 [带标题的链接](https://github.com/doocs "Doocs 开源社区")。

也可以使用参考式链接：[参考链接][ref]

[ref]: https://github.com/doocs

### 图片

![Doocs Logo](https://i-blog.csdnimg.cn/img_convert/ca5ed066153092d5e28c54e17691e610.png)

带链接的图片：[![Logo](https://i-blog.csdnimg.cn/img_convert/ca5ed066153092d5e28c54e17691e610.png)](https://github.com/doocs)

🎨 渲染效果：

链接

这是一个行内链接。

这是一个带标题的链接。

也可以使用参考式链接：参考链接

图片

因微信公众号平台不支持除公众号文章以外的链接，故其他平台的链接会呈现链接样式但无法点击跳转。对于这些链接请注意明文书写，或点击左上角「格式 → 微信外链接转底部引用」开启引用，这样就可以在底部观察到链接指向。

6. 引用：引用名言或引人深思的句子

使用 > 来创建引用。多层嵌套只需增加 > 的数量。

📝 原始代码：

markdown 复制代码

> 这是一段引用文字。
> 引用可以跨多行。
>
> 空一行仍然在同一个引用块中。

> 这是另一个引用块。
>
> > 这是嵌套引用。
> >
> > > 这是三层嵌套引用。

🎨 渲染效果：

这是一段引用文字。

引用可以跨多行。

空一行仍然在同一个引用块中。
这是另一个引用块。

这是嵌套引用。

这是三层嵌套引用。

7. 代码块：展示你的代码

📝 原始代码：

markdown 复制代码

行内代码：使用单个反引号包裹，如 `console.log("Hello")`。

### JavaScript 代码块

```js
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Doocs");
```

### Python 代码块

```python
def fibonacci(n):
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

print(list(fibonacci(10)))
```

### SQL 代码块

```sql
SELECT e.title, e.event_date
FROM events e
WHERE EXTRACT(MONTH FROM e.event_date) = 6
ORDER BY e.event_date;
```

### 纯文本（无语法高亮）

```text
这是一段纯文本，
不会触发语法高亮。
```

🎨 渲染效果：

行内代码：使用单个反引号包裹，如 console.log("Hello")。

JavaScript 代码块

js 复制代码

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Doocs");

Python 代码块

python 复制代码

def fibonacci(n):
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

print(list(fibonacci(10)))

SQL 代码块

sql 复制代码

SELECT e.title, e.event_date
FROM events e
WHERE EXTRACT(MONTH FROM e.event_date) = 6
ORDER BY e.event_date;

纯文本（无语法高亮）

text 复制代码

这是一段纯文本，
不会触发语法高亮。

指定语言标识符即可启用语法高亮，常用标识符：js、python、sql、bash、java、html、css、json、yaml 等。

8. 分割线：分割内容

📝 原始代码：

markdown 复制代码

段落一

---

段落二

***

段落三

___

段落四

🎨 渲染效果：

段落一

段落二

段落三

段落四

三种写法（---、***、___）效果完全一致，推荐使用 ---。

9. 表格：清晰展示数据

📝 原始代码：

markdown 复制代码

| 姓名       | 邮箱                     | 微信号     |
| ---------- | ------------------------ | ---------- |
| yanglbme   | contact@yanglibin.info   | YLB0109    |
| YangFong   | yangfong2022@gmail.com   | yq24197319 |
| thinkasany | thinkasany@gmail.com     | thinkasany |

### 带对齐的表格

| 左对齐     | 居中对齐    | 右对齐      |
| :--------- | :---------: | ----------: |
| 内容 A     | 内容 B      | 内容 C      |
| 长内容 AAA | 长内容 BBB  | 长内容 CCC  |

🎨 渲染效果：

姓名	邮箱	微信号
yanglbme	contact@yanglibin.info	YLB0109
YangFong	yangfong2022@gmail.com	yq24197319
thinkasany	thinkasany@gmail.com	thinkasany

带对齐的表格

左对齐	居中对齐	右对齐
内容 A	内容 B	内容 C
长内容 AAA	长内容 BBB	长内容 CCC

手动编写标记太麻烦？编辑器左上角点击「编辑 → 插入表格」，即可快速生成。

Markdown 进阶技巧

1. LaTeX 公式：完美展示数学表达式

Markdown 支持嵌入 LaTeX 语法展示数学公式（需渲染器支持，如 VS Code + 插件、Typora、语雀等）。

📝 原始代码：

markdown 复制代码

### 行内公式

质能方程：$E = mc^2$

勾股定理：$a^2 + b^2 = c^2$

求和公式：$\sum_{i=1}^{n} x_i$

### 块级公式

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

### 矩阵

$$
\begin{bmatrix}
a_{11} & a_{12} & a_{13} \\
a_{21} & a_{22} & a_{23} \\
a_{31} & a_{32} & a_{33}
\end{bmatrix}
$$

### 多行公式对齐

$$
\begin{aligned}
d_{i, j} &\leftarrow d_{i, j} + 1 \\
d_{i, y+1} &\leftarrow d_{i, y+1} - 1 \\
d_{x+1, j} &\leftarrow d_{x+1, j} - 1 \\
d_{x+1, y+1} &\leftarrow d_{x+1, y+1} + 1
\end{aligned}
$$

🎨 渲染效果：

行内公式

质能方程： E = m c 2 E = mc^2 E=mc2

勾股定理： a 2 + b 2 = c 2 a^2 + b^2 = c^2 a2+b2=c2

求和公式： ∑ i = 1 n x i \sum_{i=1}^{n} x_i ∑i=1nxi

块级公式

− b ± b 2 − 4 a c 2 a \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} 2a−b±b2−4ac

矩阵

$a 11 a 12 a 13 a 21 a 22 a 23 a 31 a 32 a 33$ \begin{bmatrix} a_{11} & a_{12} & a_{13} \\ a_{21} & a_{22} & a_{23} \\ a_{31} & a_{32} & a_{33} \end{bmatrix} a11a21a31a12a22a32a13a23a33

多行公式对齐

d i , j ← d i , j + 1 d i , y + 1 ← d i , y + 1 − 1 d x + 1 , j ← d x + 1 , j − 1 d x + 1 , y + 1 ← d x + 1 , y + 1 + 1 \begin{aligned} d_{i, j} &\leftarrow d_{i, j} + 1 \\ d_{i, y+1} &\leftarrow d_{i, y+1} - 1 \\ d_{x+1, j} &\leftarrow d_{x+1, j} - 1 \\ d_{x+1, y+1} &\leftarrow d_{x+1, y+1} + 1 \end{aligned} di,jdi,y+1dx+1,jdx+1,y+1←di,j+1←di,y+1−1←dx+1,j−1←dx+1,y+1+1

行内公式用单个 $ 包裹，块级公式用 $$ 包裹。LaTeX 是展示复杂数学表达的利器！

2. Mermaid 图表：可视化流程

Mermaid 是强大的可视化工具，可以在 Markdown 中直接创建流程图、时序图、饼图等（需渲染器支持，如 GitHub、Typora、语雀）。

2.1 流程图（Flowchart）

📝 原始代码：

markdown 复制代码

```mermaid
graph LR
  A[开始] --> B{是否登录?}
  B -->|是| C[进入主页]
  B -->|否| D[跳转登录]
  D --> E[输入账号密码]
  E --> C
  C --> F[结束]
```

🎨 渲染效果：
#mermaid-svg-wTXT9gczj8CkWGPx{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-wTXT9gczj8CkWGPx .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-wTXT9gczj8CkWGPx .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-wTXT9gczj8CkWGPx .error-icon{fill:#552222;}#mermaid-svg-wTXT9gczj8CkWGPx .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-wTXT9gczj8CkWGPx .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-wTXT9gczj8CkWGPx .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-wTXT9gczj8CkWGPx .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-wTXT9gczj8CkWGPx .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-wTXT9gczj8CkWGPx .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-wTXT9gczj8CkWGPx .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-wTXT9gczj8CkWGPx .marker{fill:#333333;stroke:#333333;}#mermaid-svg-wTXT9gczj8CkWGPx .marker.cross{stroke:#333333;}#mermaid-svg-wTXT9gczj8CkWGPx svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-wTXT9gczj8CkWGPx p{margin:0;}#mermaid-svg-wTXT9gczj8CkWGPx .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-wTXT9gczj8CkWGPx .cluster-label text{fill:#333;}#mermaid-svg-wTXT9gczj8CkWGPx .cluster-label span{color:#333;}#mermaid-svg-wTXT9gczj8CkWGPx .cluster-label span p{background-color:transparent;}#mermaid-svg-wTXT9gczj8CkWGPx .label text,#mermaid-svg-wTXT9gczj8CkWGPx span{fill:#333;color:#333;}#mermaid-svg-wTXT9gczj8CkWGPx .node rect,#mermaid-svg-wTXT9gczj8CkWGPx .node circle,#mermaid-svg-wTXT9gczj8CkWGPx .node ellipse,#mermaid-svg-wTXT9gczj8CkWGPx .node polygon,#mermaid-svg-wTXT9gczj8CkWGPx .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-wTXT9gczj8CkWGPx .rough-node .label text,#mermaid-svg-wTXT9gczj8CkWGPx .node .label text,#mermaid-svg-wTXT9gczj8CkWGPx .image-shape .label,#mermaid-svg-wTXT9gczj8CkWGPx .icon-shape .label{text-anchor:middle;}#mermaid-svg-wTXT9gczj8CkWGPx .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-wTXT9gczj8CkWGPx .rough-node .label,#mermaid-svg-wTXT9gczj8CkWGPx .node .label,#mermaid-svg-wTXT9gczj8CkWGPx .image-shape .label,#mermaid-svg-wTXT9gczj8CkWGPx .icon-shape .label{text-align:center;}#mermaid-svg-wTXT9gczj8CkWGPx .node.clickable{cursor:pointer;}#mermaid-svg-wTXT9gczj8CkWGPx .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-wTXT9gczj8CkWGPx .arrowheadPath{fill:#333333;}#mermaid-svg-wTXT9gczj8CkWGPx .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-wTXT9gczj8CkWGPx .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-wTXT9gczj8CkWGPx .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-wTXT9gczj8CkWGPx .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-wTXT9gczj8CkWGPx .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-wTXT9gczj8CkWGPx .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-wTXT9gczj8CkWGPx .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-wTXT9gczj8CkWGPx .cluster text{fill:#333;}#mermaid-svg-wTXT9gczj8CkWGPx .cluster span{color:#333;}#mermaid-svg-wTXT9gczj8CkWGPx 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-wTXT9gczj8CkWGPx .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-wTXT9gczj8CkWGPx rect.text{fill:none;stroke-width:0;}#mermaid-svg-wTXT9gczj8CkWGPx .icon-shape,#mermaid-svg-wTXT9gczj8CkWGPx .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-wTXT9gczj8CkWGPx .icon-shape p,#mermaid-svg-wTXT9gczj8CkWGPx .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-wTXT9gczj8CkWGPx .icon-shape .label rect,#mermaid-svg-wTXT9gczj8CkWGPx .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-wTXT9gczj8CkWGPx .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-wTXT9gczj8CkWGPx .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-wTXT9gczj8CkWGPx :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是
否
开始
是否登录?
进入主页
跳转登录
输入账号密码
结束

2.2 时序图（Sequence Diagram）

📝 原始代码：

markdown 复制代码

```mermaid
sequenceDiagram
  participant 客户端
  participant 服务器
  participant 数据库

  客户端->>服务器: 发送登录请求
  服务器->>数据库: 查询用户信息
  数据库-->>服务器: 返回用户数据
  服务器-->>客户端: 返回登录结果
```

🎨 渲染效果：
数据库服务器客户端数据库服务器客户端 #mermaid-svg-CmiEgqxq8bVSCZTu{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-CmiEgqxq8bVSCZTu .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-CmiEgqxq8bVSCZTu .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-CmiEgqxq8bVSCZTu .error-icon{fill:#552222;}#mermaid-svg-CmiEgqxq8bVSCZTu .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CmiEgqxq8bVSCZTu .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-CmiEgqxq8bVSCZTu .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CmiEgqxq8bVSCZTu .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CmiEgqxq8bVSCZTu .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-CmiEgqxq8bVSCZTu .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CmiEgqxq8bVSCZTu .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CmiEgqxq8bVSCZTu .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CmiEgqxq8bVSCZTu .marker.cross{stroke:#333333;}#mermaid-svg-CmiEgqxq8bVSCZTu svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CmiEgqxq8bVSCZTu p{margin:0;}#mermaid-svg-CmiEgqxq8bVSCZTu .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-CmiEgqxq8bVSCZTu text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-CmiEgqxq8bVSCZTu .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-CmiEgqxq8bVSCZTu .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-CmiEgqxq8bVSCZTu .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-CmiEgqxq8bVSCZTu .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-CmiEgqxq8bVSCZTu #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-CmiEgqxq8bVSCZTu .sequenceNumber{fill:white;}#mermaid-svg-CmiEgqxq8bVSCZTu #sequencenumber{fill:#333;}#mermaid-svg-CmiEgqxq8bVSCZTu #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-CmiEgqxq8bVSCZTu .messageText{fill:#333;stroke:none;}#mermaid-svg-CmiEgqxq8bVSCZTu .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-CmiEgqxq8bVSCZTu .labelText,#mermaid-svg-CmiEgqxq8bVSCZTu .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-CmiEgqxq8bVSCZTu .loopText,#mermaid-svg-CmiEgqxq8bVSCZTu .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-CmiEgqxq8bVSCZTu .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-CmiEgqxq8bVSCZTu .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-CmiEgqxq8bVSCZTu .noteText,#mermaid-svg-CmiEgqxq8bVSCZTu .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-CmiEgqxq8bVSCZTu .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-CmiEgqxq8bVSCZTu .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-CmiEgqxq8bVSCZTu .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-CmiEgqxq8bVSCZTu .actorPopupMenu{position:absolute;}#mermaid-svg-CmiEgqxq8bVSCZTu .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-CmiEgqxq8bVSCZTu .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-CmiEgqxq8bVSCZTu .actor-man circle,#mermaid-svg-CmiEgqxq8bVSCZTu line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-CmiEgqxq8bVSCZTu :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 发送登录请求查询用户信息返回用户数据返回登录结果

2.3 甘特图（Gantt Chart）

📝 原始代码：

markdown 复制代码

```mermaid
gantt
  title 项目开发计划
  dateFormat  YYYY-MM-DD

  section 需求阶段
  需求调研     :done,    req1, 2026-01-01, 3d

  section 开发阶段
  后端开发     :active,  dev1, after req1, 2d
  前端开发     :         dev2, after req1, 3d

  section 测试阶段
  集成测试     :         test, after dev2, 2d
```

🎨 渲染效果：
#mermaid-svg-IX3GsWvjr1a5hMY4{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-IX3GsWvjr1a5hMY4 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-IX3GsWvjr1a5hMY4 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-IX3GsWvjr1a5hMY4 .error-icon{fill:#552222;}#mermaid-svg-IX3GsWvjr1a5hMY4 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-IX3GsWvjr1a5hMY4 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-IX3GsWvjr1a5hMY4 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-IX3GsWvjr1a5hMY4 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-IX3GsWvjr1a5hMY4 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-IX3GsWvjr1a5hMY4 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-IX3GsWvjr1a5hMY4 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-IX3GsWvjr1a5hMY4 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-IX3GsWvjr1a5hMY4 .marker.cross{stroke:#333333;}#mermaid-svg-IX3GsWvjr1a5hMY4 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-IX3GsWvjr1a5hMY4 p{margin:0;}#mermaid-svg-IX3GsWvjr1a5hMY4 .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-IX3GsWvjr1a5hMY4 .exclude-range{fill:#eeeeee;}#mermaid-svg-IX3GsWvjr1a5hMY4 .section{stroke:none;opacity:0.2;}#mermaid-svg-IX3GsWvjr1a5hMY4 .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-IX3GsWvjr1a5hMY4 .section2{fill:#fff400;}#mermaid-svg-IX3GsWvjr1a5hMY4 .section1,#mermaid-svg-IX3GsWvjr1a5hMY4 .section3{fill:white;opacity:0.2;}#mermaid-svg-IX3GsWvjr1a5hMY4 .sectionTitle0{fill:#333;}#mermaid-svg-IX3GsWvjr1a5hMY4 .sectionTitle1{fill:#333;}#mermaid-svg-IX3GsWvjr1a5hMY4 .sectionTitle2{fill:#333;}#mermaid-svg-IX3GsWvjr1a5hMY4 .sectionTitle3{fill:#333;}#mermaid-svg-IX3GsWvjr1a5hMY4 .sectionTitle{text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-IX3GsWvjr1a5hMY4 .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-IX3GsWvjr1a5hMY4 .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-IX3GsWvjr1a5hMY4 .grid path{stroke-width:0;}#mermaid-svg-IX3GsWvjr1a5hMY4 .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-IX3GsWvjr1a5hMY4 .task{stroke-width:2;}#mermaid-svg-IX3GsWvjr1a5hMY4 .taskText{text-anchor:middle;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-IX3GsWvjr1a5hMY4 .taskTextOutsideRight{fill:black;text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-IX3GsWvjr1a5hMY4 .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-IX3GsWvjr1a5hMY4 .task.clickable{cursor:pointer;}#mermaid-svg-IX3GsWvjr1a5hMY4 .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-IX3GsWvjr1a5hMY4 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-IX3GsWvjr1a5hMY4 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-IX3GsWvjr1a5hMY4 .taskText0,#mermaid-svg-IX3GsWvjr1a5hMY4 .taskText1,#mermaid-svg-IX3GsWvjr1a5hMY4 .taskText2,#mermaid-svg-IX3GsWvjr1a5hMY4 .taskText3{fill:white;}#mermaid-svg-IX3GsWvjr1a5hMY4 .task0,#mermaid-svg-IX3GsWvjr1a5hMY4 .task1,#mermaid-svg-IX3GsWvjr1a5hMY4 .task2,#mermaid-svg-IX3GsWvjr1a5hMY4 .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-IX3GsWvjr1a5hMY4 .taskTextOutside0,#mermaid-svg-IX3GsWvjr1a5hMY4 .taskTextOutside2{fill:black;}#mermaid-svg-IX3GsWvjr1a5hMY4 .taskTextOutside1,#mermaid-svg-IX3GsWvjr1a5hMY4 .taskTextOutside3{fill:black;}#mermaid-svg-IX3GsWvjr1a5hMY4 .active0,#mermaid-svg-IX3GsWvjr1a5hMY4 .active1,#mermaid-svg-IX3GsWvjr1a5hMY4 .active2,#mermaid-svg-IX3GsWvjr1a5hMY4 .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-IX3GsWvjr1a5hMY4 .activeText0,#mermaid-svg-IX3GsWvjr1a5hMY4 .activeText1,#mermaid-svg-IX3GsWvjr1a5hMY4 .activeText2,#mermaid-svg-IX3GsWvjr1a5hMY4 .activeText3{fill:black!important;}#mermaid-svg-IX3GsWvjr1a5hMY4 .done0,#mermaid-svg-IX3GsWvjr1a5hMY4 .done1,#mermaid-svg-IX3GsWvjr1a5hMY4 .done2,#mermaid-svg-IX3GsWvjr1a5hMY4 .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText0,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText1,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText2,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText3{fill:black!important;}#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText0.taskTextOutsideLeft,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText0.taskTextOutsideRight,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText1.taskTextOutsideLeft,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText1.taskTextOutsideRight,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText2.taskTextOutsideLeft,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText2.taskTextOutsideRight,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText3.taskTextOutsideLeft,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-IX3GsWvjr1a5hMY4 .crit0,#mermaid-svg-IX3GsWvjr1a5hMY4 .crit1,#mermaid-svg-IX3GsWvjr1a5hMY4 .crit2,#mermaid-svg-IX3GsWvjr1a5hMY4 .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-IX3GsWvjr1a5hMY4 .activeCrit0,#mermaid-svg-IX3GsWvjr1a5hMY4 .activeCrit1,#mermaid-svg-IX3GsWvjr1a5hMY4 .activeCrit2,#mermaid-svg-IX3GsWvjr1a5hMY4 .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCrit0,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCrit1,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCrit2,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-IX3GsWvjr1a5hMY4 .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-IX3GsWvjr1a5hMY4 .milestoneText{font-style:italic;}#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText0,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText1,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText2,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText3{fill:black!important;}#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText0.taskTextOutsideLeft,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText0.taskTextOutsideRight,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText1.taskTextOutsideLeft,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText1.taskTextOutsideRight,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText2.taskTextOutsideLeft,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText2.taskTextOutsideRight,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText3.taskTextOutsideLeft,#mermaid-svg-IX3GsWvjr1a5hMY4 .doneCritText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-IX3GsWvjr1a5hMY4 .vert{stroke:navy;}#mermaid-svg-IX3GsWvjr1a5hMY4 .vertText{font-size:15px;text-anchor:middle;fill:navy!important;}#mermaid-svg-IX3GsWvjr1a5hMY4 .activeCritText0,#mermaid-svg-IX3GsWvjr1a5hMY4 .activeCritText1,#mermaid-svg-IX3GsWvjr1a5hMY4 .activeCritText2,#mermaid-svg-IX3GsWvjr1a5hMY4 .activeCritText3{fill:black!important;}#mermaid-svg-IX3GsWvjr1a5hMY4 .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-IX3GsWvjr1a5hMY4 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2026-01-01 2026-01-02 2026-01-03 2026-01-04 2026-01-05 2026-01-06 2026-01-07 2026-01-08 2026-01-09 需求调研后端开发前端开发集成测试需求阶段开发阶段测试阶段项目开发计划

2.4 饼图（Pie Chart）

📝 原始代码：

markdown 复制代码

```mermaid
pie
  title 编程语言使用分布
  "Python" : 42
  "JavaScript" : 28
  "Java" : 15
  "Go" : 10
  "其他" : 5
```

🎨 渲染效果：
#mermaid-svg-9AFykqIdPQT7lp38{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-9AFykqIdPQT7lp38 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-9AFykqIdPQT7lp38 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-9AFykqIdPQT7lp38 .error-icon{fill:#552222;}#mermaid-svg-9AFykqIdPQT7lp38 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9AFykqIdPQT7lp38 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-9AFykqIdPQT7lp38 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9AFykqIdPQT7lp38 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9AFykqIdPQT7lp38 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-9AFykqIdPQT7lp38 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9AFykqIdPQT7lp38 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9AFykqIdPQT7lp38 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9AFykqIdPQT7lp38 .marker.cross{stroke:#333333;}#mermaid-svg-9AFykqIdPQT7lp38 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9AFykqIdPQT7lp38 p{margin:0;}#mermaid-svg-9AFykqIdPQT7lp38 .pieCircle{stroke:#000000;stroke-width:2px;opacity:0.7;}#mermaid-svg-9AFykqIdPQT7lp38 .pieOuterCircle{stroke:#000000;stroke-width:1px;fill:none;}#mermaid-svg-9AFykqIdPQT7lp38 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000000;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-9AFykqIdPQT7lp38 .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#000000;font-size:17px;}#mermaid-svg-9AFykqIdPQT7lp38 .legend text{fill:#000000;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-9AFykqIdPQT7lp38 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 42% 28% 15% 10% 5% 编程语言使用分布 Python JavaScript Java Go 其他

更多 Mermaid 用法，参见：Mermaid 官方文档。Mermaid 的 graph LR 表示从左到右的流程图，graph TD 表示从上到下。

Markdown 常用技巧速查表

效果	语法	说明
粗体	`文字`	双星号或双下划线
斜体	`文字`	单星号或单下划线
删除线	`~~文字~~`	双波浪线
代码	`代码`	单反引号
链接	`[文字](url)`	方括号 + 圆括号
图片	`![alt](url)`	叹号 + 方括号 + 圆括号
> 引用	`> 文字`	大于号
# 标题	`# 标题`	井号 + 空格
---	`---`	三个及以上连字符
- 列表	`- 项目`	减号/星号/加号 + 空格
1. 列表	`1. 项目`	数字 + 点号 + 空格

Markdown 兼顾易用性与实用性，覆盖博客、技术文档、项目文案等各类写作场景。愿本篇内容帮你吃透 Markdown，解锁多样排版技巧，告别杂乱排版，让写作变得多姿多彩。