VS Code也能用来画图？不信来试试

VS Code也能用来画图？不信来试试

1. 1. 在线绘图工具draw.io

先来说是draw.io，draw.io是一个在线绘图工具，因其界面简洁直观，功能丰富强大而受到不少用户喜爱。在浏览器中输入draw.io即可访问使用。

不得不说，draw.io提供了各类丰富的图形模版，是真的方便好用，没用过的小伙伴快去试试吧。 

作为宇宙第一IDE Visual Studio的小弟，大有成为宇宙第一Editor气势的Visual Studio Code，已经达到无所不能的地步，无法想象它竟然还能用drawio画图，码农们可以边写代码边画UML图的风景很美，忍不住我也试了试。闲话少说，直接干！

1. 1. 安装VS Code和draw.io插件

Ctrl+Shift+X进入插件市场，搜索draw已经可以搜到不少插件，我选用了这个下载量比较大、小星星比较多的Draw.io Integration，直接安装就OK了。

1. 1. 快速入门开始画图

看到网上有小伙伴说安装了不会用draw.io插件，其实用法非常简单，只要在创建.drawio.svg、.drawio或.dio文件，然后打开就是所见即所得的画图工具了，就像VS Code里面嵌入了一个Visio一样，码代码和画图在一个编辑器里完成。

还可以通过编辑xml文件修改图形，一切皆代码，画的图也可以git版本控制了，只要Ctrl+Shift+P调出VS Code命令行工具搜索Reopen找到File: Reopen With...就可以选择是以Text Editor编辑器打开，还是以Draw.io编辑器打开了。如下图可以同时打开两个编辑器对照着画图修改。

1. 1. 在项目README.md中加入图形

首先在项目目录下建立新建文件images/quickstart.drawio.svg

打开images/quickstart.drawio.svg文件开始画图，几分钟画了一个简单的流程图

然后在README.md文件中按照markdown格式添加图片，例如：

![VS Code + draw.io](images/quickstart.drawio.svg)

Ctrl+Shift+P调出VS Code命令行工具搜索Reopen找到File: Reopen With...就可以选择Markdown预览编辑器重新打开README.md文件，可以看到效果如下：

太棒了，以后设计图也可以像代码一样一起进行git版本管理了！

本例范例参见https://github.com/mengning/vscode