Markdown 与 Mermaid 常用语法
<h1 id="markdown常用语法">Markdown常用语法</h1><h2 id="目录">目录</h2>
<ul>
<li>
<p>一、核心语法</p>
<ul>
<li>1.1 标题</li>
<li>1.2 代码块</li>
<li>1.3 粗体，斜体等</li>
<li>1.4 图片和链接</li>
<li>1.5 表格</li>
</ul>
</li>
<li>
<p>二、其他常用语法</p>
<ul>
<li>2.1 删除线</li>
<li>2.2 任务列表</li>
<li>2.3 添加脚注</li>
<li>2.4 表格格式和格内换行</li>
<li>2.5 目录生成 & 锚点链接</li>
<li>2.6 一些常用图标</li>
<li>2.7 latex公式</li>
<li>2.8 高级引用和提示框</li>
</ul>
</li>
<li>
<p>三、mermaid图</p>
<ul>
<li>3.1 简介</li>
<li>3.2 基础用法
<ul>
<li>3.2.1 流程图</li>
<li>3.2.2 序列图</li>
<li>3.2.3 饼图</li>
<li>3.2.4 甘特图</li>
<li>3.2.5 类图</li>
<li>3.2.6 状态图</li>
</ul>
</li>
</ul>
</li>
<li>
<p>总结</p>
</li>
</ul>
<h2 id="核心语法">一、核心语法</h2>
<h3 id="11标题">1.1 标题</h3>
<pre><code class="language-markdown"># 一级标题
## 二级标题
### 三级标题
...
</code></pre>
<h3 id="12代码块">1.2 代码块</h3>
<pre><code class="language-markdown">```c
#include <stdio.h>
int main() {
return 0;
}
```
</code></pre>
<h3 id="13粗体斜体等">1.3 粗体，斜体等</h3>
<pre><code class="language-markdown">**粗体**
*斜体*
- 节点
行内代码`printf()`
</code></pre>
<h3 id="14图片和链接">1.4 图片和链接</h3>
<pre><code class="language-markdown">1. [百度](www.baidu.com)
2. 
3. 带图注的图片和设置图片居中
<figure align="center">
<img src = "路径" width = "0-1000">
<figcaption> 图1：xxx示意图
<\figure>
</code></pre>
<h3 id="15表格">1.5 表格</h3>
<pre><code class="language-markdown">| 内容 | 内容 | 内容 |
|-----|-----|------|
| xxx | xxx | xxx |
...
</code></pre>
<h2 id="其他常用语法">二、其他常用语法</h2>
<h3 id="21删除线">2.1 删除线</h3>
<pre><code class="language-markdown">~~要被划线的文字~~
</code></pre>
<h3 id="22任务列表">2.2 任务列表</h3>
<pre><code class="language-markdown">- 已经完成的任务
- [ ] 未完成的任务
</code></pre>
<h3 id="23添加脚注">2.3 添加脚注</h3>
<pre><code class="language-markdown">带脚注的句子[^1]
[^1]: 脚注内容
</code></pre>
<h3 id="24表格格式和格内换行">2.4 表格格式和格内换行</h3>
<pre><code class="language-markdown">| 左对齐 | 居中 |右对齐|
|:-------------|:---:|----:|
|line1<br>line2|单元格|单元格|
</code></pre>
<blockquote>
<p>注：表格格式示例：</p>
</blockquote>
<table>
<thead>
<tr>
<th style="text-align: left">左对齐</th>
<th style="text-align: center">居中</th>
<th style="text-align: right">右对齐</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">line1<br>line2</td>
<td style="text-align: center">单元格</td>
<td style="text-align: right">单元格</td>
</tr>
</tbody>
</table>
<h3 id="25目录生成">2.5 目录生成 & 锚点链接</h3>
<pre><code>## 目录
- [简介](#1简介)
- [安装](#2安装)
- [使用指南](#3使用指南)
- [基础用法](#31基础用法)
- [高级功能](#32高级功能)
- (#4api-参考)
#### 基础用法 {31基础用法}
跨文件链接：[首页](../../README.md)
底部导航栏
---
**导航**:
[上一章: 安装指南](./installation.md) │
[目录](../README.md) │
[下一章: 配置说明](./configuration.md)
---底部导航栏
底部导航栏
</code></pre>
<h3 id="26一些常用图标">2.6 一些常用图标</h3>
<pre><code>✨ 新功能 🐛 修复 🚀 优化 📚 文档
💡 提示 ⚠️ 警告 ❌ 错误 ✅ 成功
✅ 完成 ⏳ 进行中🚧 维护中 ❌ 取消
📁 文档 🔧 工具 🐛 Bug修复🚀 新功能
🔴 高优先级 🟡 中等优先级 🟢 低优先级
</code></pre>
<h3 id="27latex公式">2.7 latex公式</h3>
<pre><code class="language-markdown">行内公式：$E = mc^2$
公式块：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
</code></pre>
<h3 id="28高级引用和提示框">2.8 高级引用和提示框</h3>
<pre><code class="language-markdown">> **💡 提示**
> 这是一个提示信息，用于提供有用的建议。
多级嵌套引用
> 主要观点
>
> > 支持论据 1
> >
> > > 详细解释和例子
> >
> > 支持论据 2
>
> 总结结论
</code></pre>
<h2 id="mermaid图">三、mermaid图</h2>
<h3 id="31简介">3.1 简介</h3>
<p>mermaid是一个基于JavaScript的图表绘制工具，可以使用纯文本的方式创建各种图表。</p>
<h3 id="32基础用法">3.2 基础用法</h3>
<pre><code class="language-markdown">```mermaid
图表类型
图表内容...
```
</code></pre>
<h4 id="321流程图">3.2.1 流程图</h4>
<pre><code class="language-markdown">```mermaid
graph LR
A((开始)) --> B{判断}
B --> |是| C[执行操作]
B --> |否| D((结束))
C --> D
```
方向：
graph TD # 从上到下 Top-Down
graph LR # 从左到右 Left-Right
graph RL # 从右到左 Right-Left
graph BT # 从下到上 Bottom-Top
节点形状：
```mermaid
graph LR
A[矩形] --> B(圆角矩形)
B --> C{菱形}
C --> D((圆形))
C --> E>非对称]
E --> F{{六边形}}
```
</code></pre>
<blockquote>
<p>注：示例</p>
</blockquote>
<div class="mermaid">graph LR
A((开始)) --> B{判断}
B --> |是| C[执行操作]
B --> |否| D((结束))
C --> D
</div><h4 id="322序列图">3.2.2 序列图</h4>
<pre><code class="language-markdown">基础序列图
```mermaid
sequenceDiagram
participant 用户
participant 前端
participant 后端
participant 数据库
用户 ->> 前端: 点击登录
前端->>后端: 发送登录请求
后端->>数据库: 查询用户信息
数据库-->>后端: 返回用户数据
后端-->>前端: 返回登录结果
前端-->>用户: 显示登录状态
```
高级用法：循环和条件
```mermaid
sequenceDiagram
participant 用户
participant 系统
用户->>系统: 提交订单
loop 库存检查
系统->>系统: 检查商品库存
end
alt 库存充足
系统->>系统: 扣减库存
系统-->>用户: 订单创建成功
else 库存不足
系统-->>用户: 库存不足提示
end
```
</code></pre>
<blockquote>
<p>注：序列示例图</p>
<blockquote>
<p>基础序列图：</p>
</blockquote>
</blockquote>
<div class="mermaid">sequenceDiagram
participant 用户
participant 前端
participant 后端
participant 数据库
用户 ->> 前端: 点击登录
前端->>后端: 发送登录请求
后端->>数据库: 查询用户信息
数据库-->>后端: 返回用户数据
后端-->>前端: 返回登录结果
前端-->>用户: 显示登录状态
</div><blockquote>
<blockquote>
<p>循环<code>loop</code>和条件<code>alt</code>：</p>
</blockquote>
</blockquote>
<div class="mermaid">sequenceDiagram
participant 用户
participant 系统
用户->>系统: 提交订单
loop 库存检查
系统->>系统: 检查商品库存
end
alt 库存充足
系统->>系统: 扣减库存
系统-->>用户: 订单创建成功
else 库存不足
系统-->>用户: 库存不足提示
end
</div><h4 id="323饼图">3.2.3 饼图</h4>
<pre><code class="language-markdown">```mermaid
pie title 项目时间分配
"需求分析" : 20
"开发" : 40
"测试" : 25
"部署" : 10
"文档" : 5
```
</code></pre>
<blockquote>
<p>注：饼图示例</p>
</blockquote>
<div class="mermaid">pie title 项目时间分配
"需求分析" : 20
"开发" : 40
"测试" : 25
"部署" : 10
"文档" : 5
</div><h4 id="324甘特图">3.2.4 甘特图</h4>
<p>甘特图的核心是任务和时间，语法围绕这两点展开，主要包含：</p>
<ul>
<li>
<p>基础配置（标题、日期格式）</p>
</li>
<li>
<p>阶段划分（section）</p>
</li>
<li>
<p>具体任务（每个任务的名称、状态、ID、时间）</p>
<ul>
<li>
<p>具体的格式是---<code>任务名称 : [状态] , 任务ID , 开始时间 , 持续时间/结束时间</code></p>
</li>
<li>
<p>状态不写的话默认是未开始。任务ID是自定义的唯一标识</p>
</li>
</ul>
</li>
</ul>
<pre><code class="language-markdown">```mermaid
gantt
title 网站开发项目计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des1, 2025-01-01, 7d
原型设计 :active, des2, after des1, 5d
UI设计 :des3, after des2, 10d
section 开发阶段
前端开发 :dev1, after des3, 15d
后端开发 :dev2, after des3, 20d
测试 :test1, after dev1, 10d
```
</code></pre>
<blockquote>
<p>注：示例</p>
</blockquote>
<div class="mermaid">gantt
title 网站开发项目计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des1, 2025-01-01, 7d
原型设计 :active, des2, after des1, 5d
UI设计 :des3, after des2, 10d
section 开发阶段
前端开发 :dev1, after des3, 15d
后端开发 :dev2,after des3, 20d
测试 :test1, after dev1, 10d
</div><h4 id="325类图">3.2.5 类图</h4>
<pre><code class="language-markdown">classDiagram
%% 创建一个简单的类
class Dog {
+string name
+int age
+bark()
-eat()
}
</code></pre>
<p>成员前的符号<code>+-#</code>分别表示，<code>public, private, protected</code>。</p>
<p><code>mermaid</code>支持类之间的多种关系箭头。</p>
<ul>
<li>继承关系 <code>子类 --|> 父类</code></li>
<li>关联 <code>--></code></li>
<li>依赖 <code>..></code></li>
<li>组合 <code>*--</code> 强依赖（部分随整体消亡）</li>
<li>聚合 <code>o--</code> 弱依赖（部分可独立存在）</li>
</ul>
<blockquote>
<p>注：类图示例：</p>
</blockquote>
<div class="mermaid">classDiagram
class Animal {
+eat()
+sleep()
}
class Dog {
+bark()
}
class Cat {
+meow()
}
Dog --|> Animal
Cat --|> Animal
</div><h4 id="326状态图">3.2.6 状态图</h4>
<pre><code class="language-markdown">简单的基本状态
stateDiagram-v2
[*] --> Idle
Idle --> Running
Running --> [*]
</code></pre>
<p>[*] 表示起始或者结束点。</p>
<pre><code class="language-markdown">带标签的状态图
stateDiagram-v2
[*] --> Idle
Idle --> Running : start button pressed
Running --> Paused : pause button pressed
Paused --> Running : resume
Running --> [*] : stop
状态分支
stateDiagram-v2
[*] --> Check
Check -->
--> Approved : ok
--> Rejected : fail
复合状态图
stateDiagram-v2
[*] --> Active
state Active {
[*] --> Working
Working --> Waiting : task done
Waiting --> Working : new task
}
Active --> Inactive : power off
Inactive --> Active : power on
给某个节点添加文字描述
stateDiagram-v2
state "Waiting\n(等待中)" as W
[*] --> W
W --> Running : start
Running --> [*]
</code></pre>
<blockquote>
<p>注：示例：</p>
</blockquote>
<div class="mermaid">stateDiagram-v2
[*] --> Idle
Idle --> Running : start
Running --> Paused : pause
Paused --> Running : resume
Running --> Error : failure
Error --> [*]
state Running {
[*] --> Init
Init --> Process : ready
Process --> Done : finish
Done --> [*]
}
</div><h1 id="总结">总结：</h1>
<p>本文为<code>markdown</code>常用语法的总结，不能说完整，只是我平时最常用的一些功能，后续会持续补充。文中一些示例来源于<code>ChatGPT, DeepSeek等</code>。</p><br><br>
来源：https://www.cnblogs.com/ayuan01/p/19177730/markdown-note-study
頁:
[1]