draw画图工具（绘图神器draw.io）

前言

raw.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打开图层视图。

• 支持批量加入同一个类型的流程图。
• 支持多页面，在画布底部，可以新加页面。

• 模板丰富。支持商务、图表、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 键，然后释放鼠标按钮放下形状。您会注意到，按下按键时，容器形状上的紫色轮廓消失了-这意味着当您放下容器时，所握持的形状不会被添加到容器中。

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

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

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

搭配VS code

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

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

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

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

快捷键

快捷键地址：https://viewer.diagrams.net/#Uhttps://viewer.diagrams.net/shortcuts.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

,