绘图神器draw.io（写文必备）

前言

大家早上好，我是毛小悠，一个前端开发工程师。

最近发现一个绘图神器，没错，就是标题中的draw.io。免费、开源，功能强大，真的非常适合程序员。

我以前使用的xmind（现在也有用这个），进行思维的延伸。但是，xmind绘制思维导图还好，却无法绘制流程图。也无法组合节点。不太利于分析代码的发散思维。于是，我尝试在网络上寻找，然后发现了它draw.io。因为开源，所以一定程度上信任它。

接下来，我为大家介绍具体的内容。

安装

draw.io有网页版，直接打开就可以使用。也有PC版本。可以到它的github去下载对应的版本。

在线使用网页地址：https://app.diagrams.net/

下载地址：https://github.com/jgraph/drawio/releases

官网地址：https://www.diagrams.net/

界面截图如下：

我自己安装了PC版本的。

入门

操作比较简单，容易上手，和大多软件的操作雷同。可以通过【帮助】菜单——【快速入门视频】来学习。
也可以看看官网的自带文档（虽然是英文，但是英文内容比较简单。也不多，大概几十篇，每篇几百字。我看了一遍）。这里，大家可以多在软件上点点，就能知道它怎么玩了。很多功能一目了然。

功能介绍

介绍一些我觉得有用的技巧。

draw.io是一款国外开源的图表编辑工具，可以绘制流程图、UML、类图、组织结构图、泳道图、E-R图、思维导图等等。
可以自定义页面的大小。
可以创建图层。图层的概念类似于PS的图层。可以通过ctrl+shift+l打开图层视图。
支持批量加入同一个类型的流程图。
支持多页面，在画布底部，可以新加页面。

支持导出为照片、PDF、网页。导出无水印。点赞~~

模板丰富。支持商务、图表、cloud、工程、流程图、布局、地图、网络、软件、表格、UML、Venn、其他类模板。还可以自定义模板。

同时还支持在Dropbox、One Drive 中创建。
它的自带图标也非常的多。还可以引入自定义图标，简直完美。

常见的技巧

如何在调整大小时保持比例（高/宽比）？

若要在每次调整形状大小时保持高宽比：

选择形状
转到右侧格式面板中的“排列”选项卡
选择“限制比例”

选择此项时，调整形状大小将保持高/宽比。

注意：必须为每个单独的形状设置此设置-默认情况下此行为处于关闭状态。你可以选择多个形状，并在一次操作中为所有形状启用约束比例。

你也可以在调整形状大小时按住shift键，以在调整大小时保持高宽比。

启用或禁用容器形状上的折叠/展开功能

你可以折叠和展开（或折叠）容器形状，这些形状在“高级”形状库中可用。

此行为默认情况下处于启用状态，但可以通过diagrams.net菜单禁用。

在菜单中选择其他>折叠/展开。此菜单项旁边的复选标记指示它是启用（选中）还是禁用（空白）。

最小主题：右键单击，然后选择选项>折叠/展开。

要将任何形状变成容器，请选择它，然后在Windows上按 ctrl + G，在macOS上按Cmd + G。

有四种连接形状的方法：

1.焦点/鼠标悬停：

ctrl + Drag或单击蓝色箭头或ctrl + Drag连接点。

2.拖放：

从侧边栏拖动到蓝色箭头或圆圈

3.选择+侧栏：

（alt + X）单击具有选定形状或边缘的侧边栏

4.选择+键盘：

按alt + shift +箭头键（光标）以选定的形状。

重叠形状和容器

将形状拖放到容器形状上时，通常会将其作为子形状添加到容器内。你可以使用键盘快捷键来重叠形状和容器。

从形状库中拖动形状并将鼠标悬停在容器形状上。
按住Windows上的 alt键或MacOS上的 Option 键，然后释放鼠标按钮放下形状。您会注意到，按下按键时，容器形状上的紫色轮廓消失了-这意味着当您放下容器时，所握持的形状不会被添加到容器中。

你刚放下的形状可能在容器形状的前面或后面。

转到“格式”面板中的“排列”选项卡。
选择其中一个形状，然后单击“向前”或“向后”以将该形状置于前面或将其发送到所有其他形状的后面。

注意：叠加形状不会将它们分组。选择容器形状和重叠形状，右键单击并选择组。

搭配VS code

强大的VS code，可以安装draw插件，直接在VS上就可以绘制流程图了。写代码绘图两不误。

直接在VS code插件安装中搜索draw。下载量已经有150K了。

用法，直接新建一个.drawio结尾的文件即可。

或者*.dio，*.drawio.svg也可以。

快捷键

快捷键地址：https://viewer.diagrams.net/#Uhttps%3A%2F%2Fviewer.diagrams.net%2Fshortcuts.svg

官网如下图：

官网提供的是英文版的，大多都是熟悉的。这里简单的介绍下我觉得常用的快捷键，并附加了一些解释内容。以下快捷键都本人（我毛毛）一一测试过了，亲测有效，如果没效，欢迎与我讨论。可以在下方留言，或者微信搜索毛小悠。

ctrl + shift + L：切换图层窗口，弹出图层窗口。	ctrl + shift +p：P切换格式窗格。
ctrl + shift + M：编辑顶点的大小、位置数据。	ctrl + shift +光标：调整单元格大小（单位：网格大小）。
ctrl + shift + o：切换缩略图窗口。	ctrl +光标：调整单元格大小（单位：pt）或选择页面。

alt + shift +光标：克隆并连接。（演示如下：这个方面比PS强太多）

alt+滚轮：放大和缩小整体界面。	ctrl + Home：折叠容器
ctrl + G：组合	ctrl + end：展开容器
ctrl + shift + U：取消组合	ctrl + shift + Home：退出组合，选择某个元素。
ctrl + L：锁定（该元素会固定不动）和解锁	ctrl + shift + B：重叠时，移动到后面。
ctrl+ Enter/D：复制（当前选择的元素）	ctrl + shift + F：重叠时，移到最前面。
ctrl + R 顺时针旋转/旋转90’	ctrl + M：弹出属性输入框。编辑元数据。
alt+shift+l 编辑链接。	ctrl + shift + Y：自动调整元素大小。
alt+shift+t :编辑标签的提示。类似备注。鼠标移动到节点时，会浮现出备注出来。	选择元素，按住左键拖动：移动单元格。
ctrl+拖动：复制单元格。	按住右键拖动：移动画布。
shift+拖动：只能水平或垂直方向移动单元格。	alt +鼠标滚轮：画布放大/缩小。
ctrl + shift + H：以图形占满来缩放窗口	ctrl + shift +鼠标滚轮：画布放大/缩小。
ctrl + J：适合页面，大概是100%。	ctrl +鼠标轮：屏幕放大/缩小Mac）。
alt + shift/ctrl+单击侧栏项目：插入并连接所选项目（shift忽略当前样式）	鼠标滚轮：画布垂直滚动。
shift +单击侧边栏项目：将所选项目替换为单击的项目。文字内容不变。	shift +鼠标轮轮：画布水平滚动。
单击侧边栏项目：选择某个连接线，然后插入所选边的未连接侧。	home：回到视图中心位置。
ctrl + shift + R：清除默认样式	ctrl + shift + C：复制样式
ctrI + E：编辑风格	ctrl + shift + V：粘贴样式
ctrl + shift + D：设置为默认样式	alt + shift + x：复印尺寸
双击：插入文字或插入基本图形。	aIt + shift + v：粘贴大小
Enter：在标签中插入新文字。
shift + Enter：换行格式标签。
（shift +）tab：选择下一个上一个，（就如何tab切换应用一样的切换选择的标签）。	Ctrl + v：粘贴
alt +（shift +）Tab ：选择孩子/父母元素。	ctrl + x：剪切
blackspace或delete：删除选定的单元格	ctrl + Y：重做（windows）
ctrl + 0：自定义缩放。	ctrl + Z：撤消
ctrl + B/I：在所选文本上切换粗体/斜体。	ctrl +（数字键）：放大。
ctrl + C：复制	ctrl +A：全选。
ctrl + K：插入矩形	ctrl-（数字键）：缩小。
ctrl + P：打印	ESC：取消动作
ctrl + s：保存	F1：关于。
ctrl + shift + J：显示两栏的页面的窗口。	F2/Enter：开始编辑所选单元格的标签。
ctrl + shift + K：插入椭圆	F2/Tab/Esc：停止编辑并应用值。
ctrl + shift + s：另存为	shift +光标：以一单元格为移动距离。
ctrl + shift + x：在画布中随机位置插入文字	单击旋转按钮，以顺时针旋转90。拖动以旋转。
ctrl + shift + Z：重做（Linux/Mac）	光标箭头：滚动/移动标签（移动单位：pt）
ctrl + U：在所选文本上切换下划线。	右键点击：上下文菜单。