VSCode是一款好用的免费源代码编辑器,那么如何使用vscode绘制流程图呢?下面小编给大家整理了相关步骤介绍,感兴趣的小伙伴不要错过哦! vscode如何绘制流程图?visual studio code绘制流程图
VSCode是一款好用的免费源代码编辑器,那么如何使用vscode绘制流程图呢?下面小编给大家整理了相关步骤介绍,感兴趣的小伙伴不要错过哦!
vscode如何绘制流程图?visual studio code绘制流程图的方法
首先要打开电脑中的visual studio code,点击左侧四个方块按钮
![vscode如何绘制流程图?visual studio code绘制流程图的方法](http://img.558idc.com/uploadfile/allimg/pcjc1/482d1f26cea354ecbb99890f1b96805f.png)
然后在搜索框中输入draw.io查询插件,点击安装
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/6b153bc0fc64284c638ae369f31aef41.png)
安装好后,新建一个test.drawio文件
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/438269bad3f97d1c449ea4cef3e47896.png)
接着选中test.drawio文件,进入编辑模式
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/6ca487e8ef51dcf63656f228d41bcead.png)
左侧有各种图形,随意选择,就可以绘制流程图了
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/bf850ca226efb7e9233dbedc42a50958.png)
绘制好后,点击文件→嵌入→svg
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/be4e416b40a2ca53326b577a890772df.png)
下面再选择嵌入
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/253c65b366a068a03fff4d62b79bf3da.png)
复制svg代码
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/090124-61a4266404e20.jpg)
将复制的svg代码粘贴到html代码中
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/6121eec2b4056db960776392485c3778.png)
打开html网页,就可以看到绘制的流程图了
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/1246c71123759beaf498a2e0a8a9e790.png)
点击网页上的图片,就可以跳转页面
在该页面可以放大缩小流程图
在这里,我们选择点击右下角的铅笔图案,跳转网页编辑页面
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/bf2c27571c391837e0f39329707cf824.png)
在网页编辑页面,又可以对流程图重新做编辑
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/504ab7334caab68b79a05fb6e783267a.png)
这里可以选择File→Save,最后选择png格式图片保存
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/758e8319fe3bf852dd063d806527550f.png)
![vscode如何绘制流程图?visual studio code绘制流程图的方法截图](http://img.558idc.com/uploadfile/allimg/pcjc1/3b106b6e60c6a385f172012af9aaf738.png)
以上这篇文章就是visual studio code绘制流程图的方法,更多精彩教程请关注自由互联!