vscode如何绘制流程图?visual studio code绘制流程图的方法

2021-11-29 09:01:33来源:下载之家作者:xzzj

Vscode

Vscode

软件类型:编程工具 软件大小:76.42MB 软件平台:  PC  软件语言:简体

标签: Vscode 编程工具

查看详情

      VSCode是一款好用的免费源代码编辑器,那么如何使用vscode绘制流程图呢?下面小编给大家整理了相关步骤介绍,感兴趣的小伙伴不要错过哦!

      vscode如何绘制流程图?visual studio code绘制流程图的方法

      首先要打开电脑中的visual studio code,点击左侧四个方块按钮

vscode如何绘制流程图?visual studio code绘制流程图的方法

      然后在搜索框中输入draw.io查询插件,点击安装

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      安装好后,新建一个test.drawio文件

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      接着选中test.drawio文件,进入编辑模式

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      左侧有各种图形,随意选择,就可以绘制流程图了

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      绘制好后,点击文件→嵌入→svg

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      下面再选择嵌入

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      复制svg代码

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      将复制的svg代码粘贴到html代码中

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      打开html网页,就可以看到绘制的流程图了

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      点击网页上的图片,就可以跳转页面

      在该页面可以放大缩小流程图

      在这里,我们选择点击右下角的铅笔图案,跳转网页编辑页面

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      在网页编辑页面,又可以对流程图重新做编辑

vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      这里可以选择File→Save,最后选择png格式图片保存

vscode如何绘制流程图?visual studio code绘制流程图的方法截图
vscode如何绘制流程图?visual studio code绘制流程图的方法截图

      以上这篇文章就是visual studio code绘制流程图的方法,更多精彩教程请关注下载之家!