首页 > 电脑相关 > PC 教程

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

Qiao PC 教程 2021-11-30 18:13:41

    VSCode是一款好用的免费源代码编辑器,那么如何使用vscode绘制流程图呢?下面小编给大家整理了相关步骤介绍,感兴趣的小伙伴不要错过哦!UZo金桥电子网-提供各种电子资料阅读与下载门户网站

      vscode如何绘制流程图?visual studio code绘制流程图的方法UZo金桥电子网-提供各种电子资料阅读与下载门户网站

      首先要打开电脑中的visual studio code,点击左侧四个方块按钮UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      然后在搜索框中输入draw.io查询插件,点击安装UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      安装好后,新建一个test.drawio文件UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      接着选中test.drawio文件,进入编辑模式UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      左侧有各种图形,随意选择,就可以绘制流程图了UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      绘制好后,点击文件→嵌入→svgUZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      下面再选择嵌入UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      复制svg代码UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      将复制的svg代码粘贴到html代码UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      打开html网页,就可以看到绘制的流程图了UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      点击网页上的图片,就可以跳转页面UZo金桥电子网-提供各种电子资料阅读与下载门户网站

      在该页面可以放大缩小流程图UZo金桥电子网-提供各种电子资料阅读与下载门户网站

      在这里,我们选择点击右下角的铅笔图案,跳转网页编辑页面UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      在网页编辑页面,又可以对流程图重新做编辑UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

      这里可以选择File→Save,最后选择png格式图片保存UZo金桥电子网-提供各种电子资料阅读与下载门户网站

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

本文内容收集于互联网,仅限学习交流使用,版权归原作者所有!
侵权请联系:295951426@qq.com

金桥电子网

苏ICP备19072193号

苏公网安备32072402010019号

Powered By 连云港金云网络科技有限公司

扫描左侧二维码关注公众号

技术交流Q1群:61898804

技术交流Q2群:159328624

站长博客