vscode实现markdown流程图，vscodemarkdown

vscode实现markdown流程图，vscodemarkdown

1,vscode原生支持markdown，导出需要插件，基于node.js，需要node.js环境。

2,只需要装一个预览插件神器：Markdown Preview Enhanced。 除了常规的功能外，特别要提出的是两个功能：

（1）图像
Markdown Preview Enhanced 内部支持 mermaid, PlantUML, WaveDrom, GraphViz，Vega & Vega-lite，Ditaa 图像渲染。
你也可以通过使用 Code Chunk 来渲染 TikZ, Python Matplotlib, Plotly 等图像。
（2）Code Chunk
Markdown Preview Enhanced 支持渲染代码的运行结果!!!!!!!!

3,Markdown Preview Enhanced的键盘映射，按ctrl-shift-m or cmd-k v显示流程图，实时渲染

Keybindings

The cmd key for Windows is ctrl.

Shortcuts Functionality
ctrl-shift-m or cmd-k v Open preview
ctrl-shift-s Sync preview / Sync source
shift-enter Run Code Chunk
ctrl-shift-enter Run all Code Chunks
cmd-= or cmd-shift-= Preview zoom in
cmd– or cmd-shift-_ Preview zoom out
cmd-0 Preview reset zoom
esc Toggle sidebar TOC
也可以鼠标右击打开preview：

4,导出流程图时需要安装插件，以puppteer为例报错

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! puppeteer@1.0.0 install: node install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the puppeteer@1.0.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
由于墙的原因，使用npm进行安装的时候puppeteer自带的Chromium可能会安装不上，导致无法导出图片。

sudo npm install -g puppeteer -ignore-scripts  # 可能会出错

所以需要在国内最好安装cnpm，然后再用cnpm安装puppeteer，语句如下：

然后重新保存图片：

保存成功

5,示例

代码如下：
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
效果如下：