• 基本语法（摘要）
  • 1. 标题 (Headings)
  • 2. 脚注 (Footnotes)
  • 3. 列表 (Lists)
  • 4. 网络链接 (Hyperlinks)
  • 5. 图片引入 (Images)
  • 6. 高级链接 (Advanced Links)
• 图表
  • 1. 横向流程图
  • 2. 竖向流程图
  • 3. 标准流程图
  • 4. 标准流程图（横向）
  • 5. UML 时序图
  • 6. 复杂的 UML 时序图
  • 7. UML 标准时序图
  • 8. 甘特图
• 自动生成大纲
  - 使用 Markdown All in One 插件
  - 使用命令行工具
• VSCode环境
  • 在 VSCode 中配置环境

基本语法（摘要）

1. 标题 (Headings)

使用 # 符号来表示不同级别的标题。# 的数量越多，标题级别越低。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

2. 脚注 (Footnotes)

Markdown 脚注可以通过以下语法添加：

这是一个带有脚注的句子[^1]。

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

3. 列表 (Lists)

无序列表使用 -、* 或 + 开头：

- 项目 1
- 项目 2
  - 嵌套项目 2.1
  - 嵌套项目 2.2

有序列表使用数字加 . 开头：

1. 第一项
2. 第二项
   1. 嵌套第一项
   2. 嵌套第二项

4. 网络链接 (Hyperlinks)

插入超链接的基本语法如下：

[显示文本](https://www.example.com)

5. 图片引入 (Images)

引入图片的语法与链接类似，只是前面加了一个感叹号 !：

![替代文本](https://www.example.com/image.png)

6. 高级链接 (Advanced Links)

可以通过标签引用来实现高级链接：

这是一个 [Google][1] 的链接。

[1]: https://www.google.com "Google 的链接"

---

图表

图表大部分都使用了 Mermaid 语法，部分使用了 Flowchart.js，需要在 VSCode 中安装相应的插件才能正确预览和渲染。

【部分图表，未能显示，待后续更新。】

1. 横向流程图

用途：用于展示流程或工作流的步骤，通常从左到右进行。

Mermaid 源码：

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]

说明：

• graph LR 表示流程图从左到右（Left to Right）。
• A[方形] 创建一个方形节点。
• --> 用于连接节点。
• {条件a} 表示条件判断，|a=1| 是连接的条件。

2. 竖向流程图

用途：类似于横向流程图，但流程从上到下显示。

Mermaid 源码：

graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]

说明：

• graph TD 表示流程图从上到下（Top to Down）。
• 其他语法与横向流程图相同。

3. 标准流程图

用途：用于展示标准的业务流程，适合用于简单的逻辑操作描述。

Flowchart.js 源码：

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

说明：

• st=>start 创建一个开始框。
• op=>operation 创建一个处理框。
• cond=>condition 创建一个判断框。
• -> 用于连接节点。
• cond(yes) 表示条件为 “是” 的连接。

4. 标准流程图（横向）

用途：标准流程图的横向展示。

Flowchart.js 源码：

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

说明：

• 在 Flowchart.js 中，right 和 bottom 可以用于指定流程的方向。

5. UML 时序图

用途：展示对象之间的交互顺序，常用于描述系统中的消息传递过程。

Mermaid 源码：

对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？

说明：

• -> 表示消息传递。
• Note right of 对象B 表示在对象B右侧添加注释。
• --> 表示返回的消息。

6. 复杂的 UML 时序图

用途：描述更复杂的交互过程，包含多个对象和消息。

Mermaid 源码：

Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

说明：

• participant C 用于引入新的参与者。
• Note over 小三,对象B 表示跨越两个对象的注释。
• -->> 表示异步消息。

7. UML 标准时序图

用途：用于描述系统中多个对象之间的标准交互顺序。

Mermaid 源码：

sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

说明：

• loop 表示一个循环过程。
• <br/> 可以用于在注释中换行。

8. 甘特图

用途：用于项目管理中，展示任务的时间安排和进展。

Mermaid 源码：

gantt
    dateFormat  YYYY-MM-DD
    title 软件开发甘特图
    section 设计
    需求                      :done,    des1, 2014-01-06,2014-01-08
    原型                      :active,  des2, 2014-01-09, 3d
    UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
    section 开发
    学习准备理解需求           :crit, done, 2014-01-06,24h
    设计框架                   :crit, done, after des2, 2d
    开发                       :crit, active, 3d
    未来任务                   :crit, 5d
    section 测试
    功能测试                   :active, a1, after des3, 3d
    压力测试                   :after a1  , 20h
    测试报告                   : 48h

说明：

• gantt 用于创建甘特图。
• dateFormat 设置日期格式。
• section 用于定义任务的分类。

---

自动生成大纲

如果您的 Markdown 文件比较大，手动创建大纲可能比较繁琐，您可以使用 VSCode 插件或命令行工具自动生成。

使用 Markdown All in One 插件

1. 安装插件：

   • 在 VSCode 的扩展市场搜索并安装 Markdown All in One 插件。

2. 生成大纲：

   • 打开 Markdown 文件，然后使用快捷键 Ctrl + Shift + P 调出命令面板。
   • 输入 Markdown All in One: Create Table of Contents，选择后插件会自动在当前文件中插入一个大纲。

使用命令行工具

您也可以使用命令行工具，如 doctoc 来生成大纲：

1. 安装 doctoc：

   • 使用 npm 安装 doctoc：npm install -g doctoc

2. 生成大纲：

   • 在终端中导航到您的 Markdown 文件目录，运行命令：doctoc your-file.md
   • doctoc 会自动扫描文件中的标题，并在文件的开头插入一个大纲。

---

VSCode环境

VSCode 环境配置

在 VSCode 中配置环境

1. 安装 Markdown 插件：

   • 打开 VSCode，点击左侧的扩展图标（四个方块）。
   • 搜索并安装以下插件：
     • Markdown All in One：提供了增强的 Markdown 支持，包括任务列表、表格和脚注等。
     • • Mermaid Markdown Syntax Highlighting：提供 Mermaid 语法的高亮和渲染支持。
     • Markdown Preview Enhanced：允许使用更高级的 Markdown 预览功能，支持 Mermaid 和 Flowchart.js。
     • Markdown Footnotes（可选）：专门用于更好地处理脚注。

2. 使用 Markdown 预览功能：

   • 打开 Markdown 文件（.md 文件）。
   • 按 Ctrl + Shift + V 可以打开 Markdown 的预览窗口。
   • 也可以右键点击文件标签，然后选择 “Open Preview”。

3. 启用任务列表和脚注：

   • 插件安装完成后，确保在设置中启用了相关选项，例如任务列表和脚注支持。一般情况下，插件会自动启用这些功能。

4. 实时预览：

   • 如果需要实时预览，可以使用 “Markdown Preview Enhanced” 插件，该插件提供了一个更强大的实时预览功能。