前言

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画图工具(绘图神器draw.io)(1)

入门

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

draw画图工具(绘图神器draw.io)(2)

功能介绍

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

draw画图工具(绘图神器draw.io)(3)

draw画图工具(绘图神器draw.io)(4)

draw画图工具(绘图神器draw.io)(5)

draw画图工具(绘图神器draw.io)(6)

常见的技巧如何在调整大小时保持比例(高/宽比)?

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

draw画图工具(绘图神器draw.io)(7)

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

draw画图工具(绘图神器draw.io)(8)

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

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

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

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

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

draw画图工具(绘图神器draw.io)(9)

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

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

有四种连接形状的方法:

1.焦点/鼠标悬停:

draw画图工具(绘图神器draw.io)(10)

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

2.拖放:

draw画图工具(绘图神器draw.io)(11)

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

3.选择 侧栏:

draw画图工具(绘图神器draw.io)(12)

(alt X)单击具有选定形状或边缘的侧边栏

4.选择 键盘:

draw画图工具(绘图神器draw.io)(13)

按alt shift 箭头键(光标)以选定的形状。

重叠形状和容器

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

从形状库中拖动形状并将鼠标悬停在容器形状上。

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

draw画图工具(绘图神器draw.io)(14)

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

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

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

搭配VS code

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

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

draw画图工具(绘图神器draw.io)(15)

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

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

draw画图工具(绘图神器draw.io)(16)

快捷键

快捷键地址:https://viewer.diagrams.net/#Uhttps://viewer.diagrams.net/shortcuts.svg

官网如下图:

draw画图工具(绘图神器draw.io)(17)

官网提供的是英文版的,大多都是熟悉的。这里简单的介绍下我觉得常用的快捷键,并附加了一些解释内容。

ctrl shift L:切换图层窗口,弹出图层窗口。

ctrl shift p:P切换格式窗格。

ctrl shift M:编辑顶点的大小、位置数据。

ctrl shift 光标:调整单元格大小(单位:网格大小)。

ctrl shift o:切换缩略图窗口。

ctrl 光标:调整单元格大小(单位:pt)或选择页面。

alt shift 光标:克隆并连接。(演示如下:这个方面比PS强太多)

draw画图工具(绘图神器draw.io)(18)

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的相关内容。其他的,有兴趣的可以自己去了解了解。

相关的链接

draw.io 插件地址:https://desk.draw.io/support/solutions/articles/16000056430

功能:https://www.diagrams.net/blog/features.html

说明文档:https://desk.draw.io/support/home

,