VScode画流程图（最全教程）

痛定思痛。 2023-06-16 15:52 541阅读 0赞

# 关于插件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)方式：VScode自带的Preview和 MPE Preview。  
两种预览方式打开方式：

*  **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 ##

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

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

--------------------

## 2. 绘制流程图 ##

>     首先，打开 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
          (删除该文字)```
    
    效果图：
    
    Created with Raphaël 2.2.0StartYour OperationYes or No?Endyesno
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
               (删除该文字)```
    
    效果：
    
    Created with Raphaël 2.2.0  Start get\_hotel\_idsids-remainids\_remain空?get\_proxyproxy\_listproxy\_list空?save\_comment爬取成功??ids-gotids\_got空?ids\_remain空?set\_record  End set\_sentimentyesnoyesnoyesnoyesnoyesno

#### 2.2 mermaid ####

参考链接：https://blog.csdn.net/weixin\_34407348/article/details/94321593

##### 2.2.0 配置绘图主题颜色 #####

*  Step1: 按快捷键：command/ctrl + shift + p；
 *  Step2: 选择或搜索：Markdown Preview Enhanced: Open Mermaid Config
 *  添加：
    
        //设置mermaid绘图的风格
        //一共有三个主题：
        // mermaid.css
        // mermaid.dark.css
        // mermaid.forest.css
        Mermaid_Theme={
        theme:mermaid.forest.css 
        }

##### 2.2.1 Flowchart（流程图） #####

示例1：

(删除该文字)```mermaid
    graph TD;
        A-->B;
        A-->C;
        A-->D;
        M;
        B-->F;
        B-->G;
        G-->F
        C-->H;
    (删除该文字)```

效果：

示例2:

(删除该文字)```mermaid
    graph LR;
    a==>b;
    b-->c;
    a--联系-->c;
    a-->s;
    a-.->f;
    s-->j;
    c---id2;
        
    subgraph 图表名;
            id2[默认方形]==粗线==>id3{菱形}
            id3-.虚线.->id4>右向旗帜]
            id3--无箭头---id5((圆形))
        end
    (删除该文字)```

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvcmRvX0xp_size_16_color_FFFFFF_t_70]

1.  语法
    
    1.  方向
        
        <table> 
         <thead> 
          <tr> 
           <th>符号</th> 
           <th>意义</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td>TB</td> 
           <td>从上到下</td> 
          </tr> 
          <tr> 
           <td>BT</td> 
           <td>从下到上</td> 
          </tr> 
          <tr> 
           <td>RL</td> 
           <td>从右到左</td> 
          </tr> 
          <tr> 
           <td>LR</td> 
           <td>从左到右</td> 
          </tr> 
         </tbody> 
        </table>
    2.  连线类型
        
        <table> 
         <thead> 
          <tr> 
           <th>符号</th> 
           <th>意义</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td>&gt;</td> 
           <td>添加尾部箭头</td> 
          </tr> 
          <tr> 
           <td>-</td> 
           <td>不添加尾部箭头</td> 
          </tr> 
          <tr> 
           <td>–</td> 
           <td>单线</td> 
          </tr> 
          <tr> 
           <td>–text–</td> 
           <td>单线上加文字</td> 
          </tr> 
          <tr> 
           <td>==</td> 
           <td>粗线</td> 
          </tr> 
          <tr> 
           <td>==text==</td> 
           <td>粗线加文字</td> 
          </tr> 
          <tr> 
           <td>-.-</td> 
           <td>虚线</td> 
          </tr> 
          <tr> 
           <td>-.text.-</td> 
           <td>虚线加文字</td> 
          </tr> 
         </tbody> 
        </table>
    3.  节点
        
        <table> 
         <thead> 
          <tr> 
           <th>表述</th> 
           <th>说明</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td>id[文字]</td> 
           <td>矩形节点</td> 
          </tr> 
          <tr> 
           <td>id(文字)</td> 
           <td>圆角矩形节点</td> 
          </tr> 
          <tr> 
           <td>id((文字))</td> 
           <td>圆形节点</td> 
          </tr> 
          <tr> 
           <td>id&gt;文字]</td> 
           <td>右向旗帜状节点</td> 
          </tr> 
          <tr> 
           <td>id{文字}</td> 
           <td>菱形节点</td> 
          </tr> 
         </tbody> 
        </table>

##### 2.2.2 Sequence diagram(顺序图) #####

(删除该文字)```mermaid
    sequenceDiagram
        participant Alice
        participant Bob
        Alice->>John: Hello John, how are you?
        loop Healthcheck
            John->>John: Fight against hypochondria
        end
        Note right of John: Rational thoughts <br/>prevail...
        John-->>Alice: Great!
        John->>Bob: How about you?
        Bob-->>John: Jolly good!
    (删除该文字)```

AliceBobJohnHello John, how are you?Fight against hypochondrialoop\[ Healthcheck \]Rational thoughts prevail...Great!How about you?Jolly good!AliceBobJohn

##### 2.2.3 甘特图(Gantt diagram) #####

(删除该文字)```mermaid
    gantt
        dateFormat  YYYY-MM-DD
        title 为mermaid加入甘特图功能
        section A部分
        完成任务        :done, des1,2019-01-06,2019-01-08
        正进行任务      :active, des2,2019-01-09,3d
        待开始任务      :des3, after des2, 5d
        待开始任务2     :des4, after des3, 5d
        section 紧急任务
        完成任务        :crit,done,2019-01-06,24h
        实现parser     :crit,done,after des1, 2d
        为parser编写test :crit, active, 3d
        待完成任务      :crit,5d
        为rendere编写test: 2d
        将功能加入到mermaid: 1d
     
    (删除该文字)```

Mon 07Mon 14Mon 21完成任务 正进行任务 待开始任务 待开始任务2 完成任务 实现parser 为parser编写test 待完成任务 为rendere编写test 将功能加入到mermaidA部分 紧急任务为mermaid加入甘特图功能

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvcmRvX0xp_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191127181153835.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvcmRvX0xp,size_16,color_FFFFFF,t_70