vscode实现markdown流程图

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

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.

可用下面语句进行安装

sudo npm install -g puppeteer –ignore-scripts

4,示例

代码如下：

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.1.2Startget_hotel_idsids-remainids_remain空?get_proxyproxy_listproxy_list空?save_comment爬取成功??ids-gotids_got空?ids_remain空?set_recordEndset_sentimentyesnoyesnoyesnoyesnoyesno