| 绘图神器draw.io（写文必备） | 您所在的位置：网站首页 › 绘图工具如何打开图层 › 绘图神器draw.io（写文必备） |
绘图神器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打开图层视图。 支持批量加入同一个类型的流程图。 支持多页面，在画布底部，可以新加页面。
同时还支持在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强太多）
相同功能的软件也有很多，这里只讲解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分钟多。英文。但是，看视频也能看懂系列。 小众软件：纯推广广告的内容，比较短。 其他：感兴趣的可以自己看看。
如果对本文有任何意见和建议，欢迎在下方评论区评论，或者微信搜索“毛小悠”找我交流。 如果觉得还可以，就请点赞收藏或者分享一下，希望可以帮到更多人。 |
【本文地址】