VScode下MarkDown【自动生成目录】和【画流程图】（最全教程）

原创

已于 2022-07-27 01:20:36 修改 · 3.9w 阅读

145 ·

CC 4.0 BY-SA版权

文章标签：

#MarkDown Preview Enhance #VScode #MarkDown流程图

于 2019-11-27 02:38:29 首次发布

本文详细介绍了如何在VScode中利用Markdown Preview Enhanced插件进行流程图绘制，包括flow和mermaid的使用方法，以及如何自动生成目录。教程覆盖了流程图的各种类型和配置，是Markdown写作的实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于插件Markdown Preview Enhanced（MPE）的使用技巧

关于插件Markdown Preview Enhanced（MPE）的使用技巧

0. Preview（预览）

如果已经安装 MPE(Markdown Preview Enhanced) 插件后有两种MarkDown预览(Preview)方式：VScode自带的Preview和 MPE Preview。

名称: Markdown Preview Enhanced
ID: shd101wyy.markdown-preview-enhanced
说明: Markdown Preview Enhanced ported to vscode
版本: 0.6.3
发布者: Yiyi Wang
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

两种预览方式打开方式：

VScode Preview: 普通的预览就可以。
MPE Preview：鼠标右键选择 “MarkDown Preview ENhanced: Open Preview to the Side” 或者用快捷键： command/ctrl + shift + v

MPE Preview优点：

支持荧光字体
```
==字体==
```
可保存为PDF
在预览界面手手表右键，选择"Chrome(Pupptteer)"->“PDF/”；
编译保存为html
在预览界面手手表右键，选择"HTML"->“HTML”；

1. 关于TOC

需要安装插件 MPE(Markdown Preview Enhanced)

名称: Markdown Preview Enhanced
ID: shd101wyy.markdown-preview-enhanced
说明: Markdown Preview Enhanced ported to vscode
版本: 0.6.3
发布者: Yiyi Wang
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

生成目录:
Step1: 将光标放在要插入目录的地方；
Step2: 按快捷键：cmd + shift + p；
Step3: 选择（直接搜索也可）：Markdown Preview Enhanced: Create Toc
Step4: 将自动在光标位置插入目录代码，如何文章继续写新的标题也会自动增加；

自动生成代码中：depthFrom=1 depthTo=6表示从一级标题到六级标题；

生成目录后，需要预览后再保存；

2. 绘制流程图

需要安装插件 MPE(Markdown Preview Enhanced)

名称: Markdown Preview Enhanced
ID: shd101wyy.markdown-preview-enhanced
说明: Markdown Preview Enhanced ported to vscode
版本: 0.6.3
发布者: Yiyi Wang
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

首先，打开 MPE Preview，否则无法显示：鼠标右键选择 “MarkDown Preview ENhanced:Open Preview to the Side” 或者用快捷键： command/ctrl + shift + v

2.0 简介

有很多绘图引擎，下面将介绍两个：flow 和 mermaid。

2.1 flow

参考链接：https://www.jianshu.com/p/02a5a1bf1096

示例：
代码：

flow相当于插入代码块的 java/python，写在 ```后面

(删除该文字)```mermaid
flowchat
  st=>start: Start
  op=>operation: Your Operation
  cond=>condition: Yes or No?
  e=>end
  st->op->cond
  cond(yes)->e
  cond(no)->op
  (删除该文字)```

效果图：

语法：
流程图大致分为两段，第一段是定义元素，第二段是定义元素之间的走向。

定义元素语法
```
tag=>type: content:>url
```
- tag 就是元素名字，
- type 是这个元素的类型，有6中类型，分别为：
  - start # 开始
  - end # 结束
  - operation # 操作
  - subroutine # 子程序
  - condition # 条件
  - inputoutput # 输入或产出
- content 就是在框框中要写的内容，注意type后的冒号与文本之间一定要有个空格。
- url 是一个连接，与框框中的文本相绑定
连接元素语法
用 “ -> ” 来连接两个元素。
注：需要注意的是condition类型，因为他有yes和no两个分支，所以要写成：
```
c2(yes)->io->e 
c2(no)->op2->e
```

复杂示例
代码：

(删除该文字)```mermaid
flowchat
   st=>start: Start|past:>http://www.google.com[blank]
   e=>end: End:>http://www.google.com
   op1=>operation: get_hotel_ids|past
   op2=>operation: get_proxy|current
   sub1=>subroutine: get_proxy|current
   op3=>operation: save_comment|current
   op4=>operation: set_sentiment|current
   op5=>operation: set_record|current
   cond1=>condition: ids_remain空?
   cond2=>condition: proxy_list空?
   cond3=>condition: ids_got空?
   cond4=>condition: 爬取成功??
   cond5=>condition: ids_remain空?
   io1=>inputoutput: ids-remain
   io2=>inputoutput: proxy_list
   io3=>inputoutput: ids-got
   st->op1(right)->io1->cond1
   cond1(yes)->sub1->io2->cond2
   cond2(no)->op3
   cond2(yes)->sub1
   cond1(no)->op3->cond4
   cond4(yes)->io3->cond3
   cond4(no)->io1
   cond3(no)->op4
   cond3(yes, right)->cond5
   cond5(yes)->op5
   cond5(no)->cond3
   op5->e
   (删除该文字)```

效果：