绘图神器draw.io（写文必备）
绘图神器draw.io（写文必备）
作者：毛小悠。
写文时间：2020年10月22日
—— 学习，为了看到更大的世界。
前言
大家早上好，我是毛小悠，一个前端开发工程师。
最近发现一个绘图神器，没错，就是标题中的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：在所选文本上切换下划线。 | 右键点击：上下文菜单。 |
同类产品
相同功能的软件也有很多，这里只讲解draw.io的相关内容。其他的，有兴趣的可以自己去了解了解。
- visio、（微软家的）
- processon、（网页版本，免费版可以使用9张图。）
- 亿图图示，英文名叫做Edraw Max，（经常在知乎看到它的回答）
- xmind、xmind zen
- 百度脑图
- SketchBoard
相关的链接
draw.io 插件地址：https://desk.draw.io/support/solutions/articles/16000056430
功能：https://www.diagrams.net/blog/features.html
说明文档：https://desk.draw.io/support/home
相关视频
B站
我在B站，搜索了下draw.io，发现教程寥寥无几。第二页是只有2个不相干的内容。第一页，随机挑了几个看了。（红框所视）
-
南风渐暖_：搬运的油管视频。选集形式的，20多集，1集2分钟多。英文。但是，看视频也能看懂系列。
-
小众软件：纯推广广告的内容，比较短。
-
其他：感兴趣的可以自己看看。
本文的重点
如果对本文有任何意见和建议，欢迎在下方评论区评论，或者微信搜索“毛小悠”找我交流。
如果觉得还可以，就请点赞收藏或者分享一下，希望可以帮到更多人。