Vscode编辑器--md流程图

平常开发过程中，总会遇到很多逻辑复杂，代码涉及组件或页面多，回头查找问题或别人接手时，无法及时能够满足解决条件，于是vscode提供了一个根据代码逻辑，自己去勾画流程图，无论自己和别人看的时候一目了然。废话不多说，，，

首先要在vscode里下载Markdown Preview Enhanced插件，这是一款实时能看到编写的流程示意图，下载好了，你的编辑器右上角会出现这个icon，就证明下载成功了，然后可以开启分屏模式，

接着新建一个测试demo后缀名md格式的文件，命名一个此次目的的标题以#开头。#个数越多，字体越小,类似于咱们开发中 h1,,h2,,h3,,h4这类标题标签一样。

开始画流程图，使用到mermaid流程图，它是一种基于 Javascript 的绘图工具，它的语法类似于 Markdown。通过 mermaid 可以很方便的通过文本或者代码创建流程图、时序图等图表，类似于与markdown类似的方式从文本生成图表和流程图。点击这里https://mermaidjs.github.io/mermaid-live-editor/链接可以在线试用它。

这里最基本的折线图是使用  -->  展示出插件主要内容，类似于桥面之间的桥墩。 --  是在折线上插入内容文案，可以尝试一下，是不是出来了很简单的流程图

一个简单的流程图就出来了，是不是很简单，

接下来，可以分叉，因为你有多个地方公用一个文案，是不是想到js中提取声明一个变量，没错，它也可以。上面不是说一种基于 Javascript 的绘图工具嘛，所以可以看下图所写

是不是感觉Soeasy。。。

好了，上面的满足基本的逻辑需求流程图还是没问题的。如果想要了解更多有趣的,自己慢慢探索，，，觉得不错，留个赞再抛弃我吧