vscode实现markdown流程图
2018-03-06 15:26
726 查看
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:
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
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
相关文章推荐
- 【vscode 插件】为 markdown 文章标题自动添加多级序号
- VS2013 Codejock 实现 MFC 换肤
- 【选摘自CODEVS】斐波那契的几种实现
- [vscode] markdown_index----可以为你的markdown标题添加序号的插件
- vscode中使用markdown
- VS code Markdown文件导出PDF
- Atom / VSCode预览我的markdown蓝屏的一种情景可能性
- Typora/VSCode/Sublime 更改Markdown默认宽度样式等
- 用VS Code打造最佳Markdown编辑器
- XAMPP和VScode 实现对PHP的编写和调试
- 在vs code中使用ftp-sync插件实现客户端与服务器端代码的同步
- vscode中使用markdown
- DP 之 CODE[VS] 1048 石子归并 (两种实现方式:递归,循环)
- VSCode Markdown PDF 导出成 PDF 报 phantomjs binary does not exist 错误的解决办法
- markdown的流程图实现和代码语法着色
- 用vscode写markdown的正确姿势
- markdown的流程图实现和代码语法着色
- 用VS Code打造最佳Markdown编辑器
- Vscode中Javascript使用TypeScript文件实现智能提示
- 【日常学习】【SPFA负环+数组模拟链表实现】codevs2645 Spore题解