vscode如何绘制流程图?vscode绘制流程图步骤介绍

时间:2022-01-12 09:33:54       来源:下载之家

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

vscode如何绘制流程图?

首先要打开电脑中的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绘制流程图的方法截图

关键词: vscode 绘制 流程图 步骤