draw.io：一款免费IT绘图神器

今天给大家介绍一款免费的绘图工具：draw.io。

draw.io 可以用于绘制流程图、UML图、思维导图、实体关系图（ERD）、Gitflow、组织结构图、软件架构图、泳道图、BPMN图、工程电路图、甘特图、信息图、平面图、原型图、韦恩图等类型的图表。

如果你无法使用收费的 Microsoft Visio，强烈推荐使用 draw.io，它完全免费，不需要登录或者注册。

下载安装

draw.io 既可以通过浏览器在线使用，也可以安装桌面版本，或者在其他开发工具中通过插件方式使用。

对于在线版本，直接输入网址 https://app.diagrams.net/ 即可打开软件。

draw.io 桌面版本支持 Windows、macOS 以及 Linux 平台，可以在 GitHub 下载安装：

https://github.com/jgraph/drawio-desktop/releases

除此之外，很多第三方工具都提供了 draw.io 集成，例如 VS Code：

使用简介

接下来我们以在线版本为例，简单介绍一下 draw.io 的使用，其他版本的使用方式几乎一样。

当我们第一次打开网址 https://draw.io 时，他会跳转到 https://app.diagrams.net/，这就是它的在线平台：

我们可以选择一个文件存储方式，包括 Google Drive、OneDrive、设备（本地磁盘）、Dropbox、GitHub 以及 GitLab。如果不想现在设置，可以点击“稍后再决定”，进入软件页面。

整个界面大概可以分为四个部分：

• 上面是菜单栏，包括文件（新建、保存、导入、导出等）、编辑、调整图形、界面设置、帮助等。菜单栏下面同时还提供了便捷操作的工具栏；
• 左侧是图形组件，可以在这里搜索和选择各种图形组件。同时还提供了便签本，可以把常用图形添加到这里；
• 中间是画布区域，可以通过拖拽方式在这里添加、编辑、删除各种元素。画布最下面可以增加或者插入多个页面；
• 右侧是绘图属性的设置区域，可以设置绘图风格、图形的大小和颜色、文本格式以及对其方式等。

新建绘图

点击菜单“文件”->“新建…”打开会话框：

输入绘图文件名，并且选择空白框图或者模板创建一个新的绘图。我们新建一个空白绘图。

增加图形

draw.io 提供了多种增加图形的方式，包括：

• 在左侧图形库中选择并单击添加一个组件；
• 在左侧图形库中选择并拖拽添加一个组件；
• 在画布区域双击，弹出通用组件，选择并单击添加。

修改图形

点击图形组件，可以通过鼠标修改图形大小、形状、位置、旋转角度等；点击 Delete 键可以删除图形组件。

双击图形组件可以增加标签文字。

连接图形

当鼠标放在某个图形组件上时，屏幕会显示连接箭头，点击箭头并移动鼠标到另一个组件进行连接。

设置格式

软件界面右侧是格式设置面板，选择单个或多个图形组件后可以通过格式选项进行设置。

以下是设置“草图”样式之后的效果：

以下是设置了不同组件颜色之后的效果：

保存绘图

如果没有保存绘图，draw.io 会提示“修改未保存，点击此处保存”；或者也可以点击菜单“文件”->“保存”进行保存。

除了保存文件之外，也可以将绘图导出为图片或者矢量图。点击菜单“文件”->“导出”进行操作。

增加缩放比例可以提高图片分辨率，边框宽度可以在图片四周留白，以下是导出 PNG 图片效果：

快捷键

draw.io 支持快捷键操作，具体参考如下：