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

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

---

目录：

• 关于插件Markdown Preview Enhanced（MPE）的使用技巧
  • 0. Preview（预览）
  • 1. 关于TOC
  • 2. 绘制流程图
    • 2.0 简介
      • 2.1 flow
      • 2.2 mermaid
        • 2.2.0 配置绘图主题颜色
        • 2.2.1 Flowchart（流程图）
        • 2.2.2 Sequence diagram(顺序图)
        • 2.2.3 甘特图(Gantt diagram)

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优点：

1. 支持荧光字体

   ==字体==
   

2. 可保存为PDF
   在预览界面手手表右键，选择"Chrome(Pupptteer)"->“PDF/”；
3. 编译保存为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: 将自动在光标位置插入目录代码，如何文章继续写新的标题也会自动增加；

1. 自动生成代码中：depthFrom=1 depthTo=6表示从一级标题到六级标题；
2. 生成目录后，需要预览后再保存；

 

---

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

1. 示例：
   代码：

   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
     (删除该文字)```
   

   效果图：

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

   1. 定义元素语法

      tag=>type: content:>url
      

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

      c2(yes)->io->e 
      c2(no)->op2->e
      

   3. 复杂示例
      代码：

      (删除该文字)```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
         (删除该文字)```
      

   效果：