这款画图工具，yyds

喜欢ヅ旅行 2023-10-01 12:43 9阅读 0赞

最近有读者私信我，问我推文的配图是用什么工具画的，很好看，也想学习一下。今天就给大家介绍一下这款画图工具——`Draw.io`

### 概述 ###

`draw.io`是一款免费的网页版画图工具（也有桌面版），支持流程图、UML图、架构图、原型图等，简单好用。下面几张图都是用`draw.io`制作的：

![e89968497fdfaf693f885ff36a8c8662.png][]

![64039bcb97427c00f2e7c54d99157c79.png][]

![3fcb69cc2e2346dd03c51b867a6d7650.png][]

看起来效果还不错有木有~

### 进入画图工具 ###

我个人比较常用的是网页版，打开网址 `https://app.diagrams.net/`之后，会弹出来一个窗口，让我们选择把文件存放在哪里。

![0a2bf6a533f2bcf0e6f99dde316bda76.png][]

目前支持六种存储方式：

1.  Google Drive
2.  OneDrive
3.  Device：本地
4.  Dropbox
5.  Github
6.  Gitlab

我一般是选择存储到 Github，需要在 Github 新建一个项目，用来存放 `draw.io` 的文件。

选择好存储方式之后，就会进入如下页面，第一次就选择创建新的流程图（Create New Diagram）。

![9aa39d0a7e5ee1e0a7985a2ffab0a1d6.png][]

然后就进入`draw.io` 的主界面啦。

![7c8f127eb54303bd379311b0ce3f19bf.png][]

### 主界面 ###

主界面分为几个区域，菜单栏、工具栏、图形区、画布、绘图样式设置区。

![beaf98677899d1423835ff86cb4e38b3.png][]

### 快速开始 ###

接下来就带大家看看怎么使用吧！

首先是切换语言，点击右上角的地球即可进行语言切换。

![0b46524d0a4688f498c604249dd11b56.gif][]

在图形区有八个选项，通常可以在这里面找到想要的图形。

![a865f4de73941be0e57d98d2d91f3814.png][]

第一个是便笺本，可以存放自定义的图形，我们可以将外部的图形拖到这个区域，保存下来，后面就可以使用这些自定义图形进行画图。

![a8a43583d2dbcfeabb424dad16bd6319.gif][]

也可以点击下方的更多图形解锁更丰富的图形哦。

![765f455351e58601040131da8aa17cfc.gif][]

将图形区的图形直接拖动到画布，然后就可以开始创作啦。

![78a5c614d66bea15db87f4159f66c629.gif][]

在右边样式设置区可以对选中的图形进行修改，比如使用我比较喜欢的sketch样式，效果如下：

![dcbcddb5cb7266b77a3a84edc546b0b7.gif][]

如果觉得背景太单调，可以给图形增加背景条纹~

![d42eb73cba50291b9be9281e99196da7.gif][]

图形与图形之间链接非常方便，鼠标移到图形上面便会出现链接图形的标志，点击此标志会自动进行图形链接。

![82225768f8e55acd01f89dedfe394f3a.gif][]

![4a688979e29a6647259d4e5b14df7405.gif][]

图形旋转也很简单，选中图形之后，右上角会出现旋转的小图标，按住此图标进行拖动即可进行旋转操作。

![a630aaf029646111872d5b10a7ec4d12.gif][]

以上就是`draw.io`的基本使用教程，当然`draw.io`还有很多有用的功能，感兴趣的小伙伴可以自行研究~

如果大家觉得这个画图工具不错的话，麻烦帮我**点个赞**。

[e89968497fdfaf693f885ff36a8c8662.png]: https://img-blog.csdnimg.cn/img_convert/e89968497fdfaf693f885ff36a8c8662.png
[64039bcb97427c00f2e7c54d99157c79.png]: https://img-blog.csdnimg.cn/img_convert/64039bcb97427c00f2e7c54d99157c79.png
[3fcb69cc2e2346dd03c51b867a6d7650.png]: https://img-blog.csdnimg.cn/img_convert/3fcb69cc2e2346dd03c51b867a6d7650.png
[0a2bf6a533f2bcf0e6f99dde316bda76.png]: https://img-blog.csdnimg.cn/img_convert/0a2bf6a533f2bcf0e6f99dde316bda76.png
[9aa39d0a7e5ee1e0a7985a2ffab0a1d6.png]: https://img-blog.csdnimg.cn/img_convert/9aa39d0a7e5ee1e0a7985a2ffab0a1d6.png
[7c8f127eb54303bd379311b0ce3f19bf.png]: https://img-blog.csdnimg.cn/img_convert/7c8f127eb54303bd379311b0ce3f19bf.png
[beaf98677899d1423835ff86cb4e38b3.png]: https://img-blog.csdnimg.cn/img_convert/beaf98677899d1423835ff86cb4e38b3.png
[0b46524d0a4688f498c604249dd11b56.gif]: https://img-blog.csdnimg.cn/img_convert/0b46524d0a4688f498c604249dd11b56.gif
[a865f4de73941be0e57d98d2d91f3814.png]: https://img-blog.csdnimg.cn/img_convert/a865f4de73941be0e57d98d2d91f3814.png
[a8a43583d2dbcfeabb424dad16bd6319.gif]: https://img-blog.csdnimg.cn/img_convert/a8a43583d2dbcfeabb424dad16bd6319.gif
[765f455351e58601040131da8aa17cfc.gif]: https://img-blog.csdnimg.cn/img_convert/765f455351e58601040131da8aa17cfc.gif
[78a5c614d66bea15db87f4159f66c629.gif]: https://img-blog.csdnimg.cn/img_convert/78a5c614d66bea15db87f4159f66c629.gif
[dcbcddb5cb7266b77a3a84edc546b0b7.gif]: https://img-blog.csdnimg.cn/img_convert/dcbcddb5cb7266b77a3a84edc546b0b7.gif
[d42eb73cba50291b9be9281e99196da7.gif]: https://img-blog.csdnimg.cn/img_convert/d42eb73cba50291b9be9281e99196da7.gif
[82225768f8e55acd01f89dedfe394f3a.gif]: https://img-blog.csdnimg.cn/img_convert/82225768f8e55acd01f89dedfe394f3a.gif
[4a688979e29a6647259d4e5b14df7405.gif]: https://img-blog.csdnimg.cn/img_convert/4a688979e29a6647259d4e5b14df7405.gif
[a630aaf029646111872d5b10a7ec4d12.gif]: https://img-blog.csdnimg.cn/img_convert/a630aaf029646111872d5b10a7ec4d12.gif