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 键,然后释放鼠标按钮放下形状。您会注意到,按下按键时,容器形状上的紫色轮廓消失了-这意味着当您放下容器时,所握持的形状不会被添加到容器中。
你刚放下的形状可能在容器形状的前面或后面。
- 转到“格式”面板中的“排列”选项卡。
- 选择其中一个形状,然后单击“向前”或“向后”以将该形状置于前面或将其发送到所有其他形状的后面。
注意:叠加形状不会将它们分组。选择容器形状和重叠形状,右键单击并选择组。
搭配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
,