专栏
登录
【转载】写文必备绘图神器draw.io（可搭配vs code）
2022-11-24 14:02:22 339阅读
0.前言
大家早上好，我是毛小悠，一个前端开发工程师。
最近发现一个绘图神器，没错，就是标题中的draw.io。免费、开源，功能强大，真的非常适合程序员。
我以前使用的xmind（现在也有用这个），进行思维的延伸。但是，xmind绘制思维导图还好，却无法绘制流程图。也无法组合节点。不太利于分析代码的发散思维。于是，我尝试在网络上寻找，然后发现了它draw.io。因为开源，所以一定程度上信任它。
接下来，我为大家介绍具体的内容。
1.安装
draw.io有网页版，直接打开就可以使用。也有PC版本。可以到它的github去下载对应的版本。
在线使用网页地址：https://app.diagrams.net/
下载地址：https://github.com/jgraph/drawio/releases
官网地址：https://www.diagrams.net/
界面截图如下：
我自己安装了PC版本的
2.入门
操作比较简单，容易上手，和大多软件的操作雷同。可以通过【帮助】菜单——【快速入门视频】来学习。
也可以看看官网的自带文档（虽然是英文，但是英文内容比较简单。也不多，大概几十篇，每篇几百字。我看了一遍）。这里，大家可以多在软件上点点，就能知道它怎么玩了。很多功能一目了然。
3.功能介绍
介绍一些我觉得有用的技巧。
draw.io是一款国外开源的图表编辑工具，可以绘制流程图、UML、类图、组织结构图、泳道图、E-R图、思维导图等等。
可以自定义页面的大小。
可以创建图层。图层的概念类似于PS的图层。可以通过ctrl+shift+l打开图层视图。
支持批量加入同一个类型的流程图。
支持多页面，在画布底部，可以新加页面。
模板丰富。支持商务、图表、cloud、工程、流程图、布局、地图、网络、软件、表格、UML、Venn、其他类模板。还可以自定义模板。
4.常用技巧
如何在调整大小时保持比例（高/宽比）？
若要在每次调整形状大小时保持高宽比：
选择形状
转到右侧格式面板中的“排列”选项卡
选择“限制比例”
选择此项时，调整形状大小将保持高/宽比。
注意：必须为每个单独的形状设置此设置-默认情况下此行为处于关闭状态。你可以选择多个形状，并在一次操作中为所有形状启用约束比例。
你也可以在调整形状大小时按住shift键，以在调整大小时保持高宽比。
启用或禁用容器形状上的折叠/展开功能
你可以折叠和展开（或折叠）容器形状，这些形状在“高级”形状库中可用。
此行为默认情况下处于启用状态，但可以通过diagrams.net菜单禁用。
在菜单中选择其他>折叠/展开。此菜单项旁边的复选标记指示它是启用（选中）还是禁用（空白）。
最小主题：右键单击，然后选择选项>折叠/展开。
要将任何形状变成容器，请选择它，然后在Windows上按 ctrl + G，在macOS上按Cmd + G。
有四种连接形状的方法
1.焦点/鼠标悬停：
ctrl + Drag或单击蓝色箭头或ctrl + Drag连接点。
2.拖放：
从侧边栏拖动到蓝色箭头或圆圈
3.选择+侧栏：
（alt + X）单击具有选定形状或边缘的侧边栏
4.选择+键盘：
按alt + shift +箭头键（光标）以选定的形状。
重叠形状和容器
将形状拖放到容器形状上时，通常会将其作为子形状添加到容器内。你可以使用键盘快捷键来重叠形状和容器。
1.从形状库中拖动形状并将鼠标悬停在容器形状上。
2.按住Windows上的 alt键或MacOS上的 Option 键，然后释放鼠标按钮放下形状。您会注意到，按下按键时，容器形状上的紫色轮廓消失了-这意味着当您放下容器时，所握持的形状不会被添加到容器中。
你刚放下的形状可能在容器形状的前面或后面。
1.转到“格式”面板中的“排列”选项卡。
2.选择其中一个形状，然后单击“向前”或“向后”以将该形状置于前面或将其发送到所有其他形状的后面。
注意：叠加形状不会将它们分组。选择容器形状和重叠形状，右键单击并选择组。
5.搭配VS code
强大的VS code，可以安装draw插件，直接在VS上就可以绘制流程图了。写代码绘图两不误。
直接在VS code插件安装中搜索draw。下载量已经有150K了。
用法，直接新建一个.drawio结尾的文件即可。
或者*.dio，*.drawio.svg也可以。
6.快捷键
快捷键地址：https://viewer.diagrams.net/#Uhttps%3A%2F%2Fviewer.diagrams.net%2Fshortcuts.svg
官网如下图：
官网提供的是英文版的，大多都是熟悉的。这里简单的介绍下我觉得常用的快捷键，并附加了一些解释内容。以下快捷键都本人（我毛毛）一一测试过了，亲测有效，如果没效，欢迎与我讨论。可以在下方留言，或者微信搜索毛小悠。
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站，搜索了下draw.io，发现教程寥寥无几。第二页是只有2个不相干的内容。第一页，随机挑了几个看了。（红框所视）
南风渐暖_：搬运的油管视频。选集形式的，20多集，1集2分钟多。英文。但是，看视频也能看懂系列。
小众软件：纯推广广告的内容，比较短。
其他：感兴趣的可以自己看看。
————————————————
版权声明：本文为CSDN博主「前端毛小悠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/code_maomao/article/details/110621280
- 0
- 0
- 0
-
发表评论
【转载】写文必备绘图神器draw.io（可搭配vs code）
2022-11-24 14:02:22 339阅读
0.前言
大家早上好，我是毛小悠，一个前端开发工程师。
最近发现一个绘图神器，没错，就是标题中的draw.io。免费、开源，功能强大，真的非常适合程序员。
我以前使用的xmind（现在也有用这个），进行思维的延伸。但是，xmind绘制思维导图还好，却无法绘制流程图。也无法组合节点。不太利于分析代码的发散思维。于是，我尝试在网络上寻找，然后发现了它draw.io。因为开源，所以一定程度上信任它。
接下来，我为大家介绍具体的内容。
1.安装
draw.io有网页版，直接打开就可以使用。也有PC版本。可以到它的github去下载对应的版本。
在线使用网页地址：https://app.diagrams.net/
下载地址：https://github.com/jgraph/drawio/releases
官网地址：https://www.diagrams.net/
界面截图如下：
我自己安装了PC版本的
2.入门
操作比较简单，容易上手，和大多软件的操作雷同。可以通过【帮助】菜单——【快速入门视频】来学习。
也可以看看官网的自带文档（虽然是英文，但是英文内容比较简单。也不多，大概几十篇，每篇几百字。我看了一遍）。这里，大家可以多在软件上点点，就能知道它怎么玩了。很多功能一目了然。
3.功能介绍
介绍一些我觉得有用的技巧。
draw.io是一款国外开源的图表编辑工具，可以绘制流程图、UML、类图、组织结构图、泳道图、E-R图、思维导图等等。
可以自定义页面的大小。
可以创建图层。图层的概念类似于PS的图层。可以通过ctrl+shift+l打开图层视图。
支持批量加入同一个类型的流程图。
支持多页面，在画布底部，可以新加页面。
模板丰富。支持商务、图表、cloud、工程、流程图、布局、地图、网络、软件、表格、UML、Venn、其他类模板。还可以自定义模板。
4.常用技巧
如何在调整大小时保持比例（高/宽比）？
若要在每次调整形状大小时保持高宽比：
选择形状
转到右侧格式面板中的“排列”选项卡
选择“限制比例”
选择此项时，调整形状大小将保持高/宽比。
注意：必须为每个单独的形状设置此设置-默认情况下此行为处于关闭状态。你可以选择多个形状，并在一次操作中为所有形状启用约束比例。
你也可以在调整形状大小时按住shift键，以在调整大小时保持高宽比。
启用或禁用容器形状上的折叠/展开功能
你可以折叠和展开（或折叠）容器形状，这些形状在“高级”形状库中可用。
此行为默认情况下处于启用状态，但可以通过diagrams.net菜单禁用。
在菜单中选择其他>折叠/展开。此菜单项旁边的复选标记指示它是启用（选中）还是禁用（空白）。
最小主题：右键单击，然后选择选项>折叠/展开。
要将任何形状变成容器，请选择它，然后在Windows上按 ctrl + G，在macOS上按Cmd + G。
有四种连接形状的方法
1.焦点/鼠标悬停：
ctrl + Drag或单击蓝色箭头或ctrl + Drag连接点。
2.拖放：
从侧边栏拖动到蓝色箭头或圆圈
3.选择+侧栏：
（alt + X）单击具有选定形状或边缘的侧边栏
4.选择+键盘：
按alt + shift +箭头键（光标）以选定的形状。
重叠形状和容器
将形状拖放到容器形状上时，通常会将其作为子形状添加到容器内。你可以使用键盘快捷键来重叠形状和容器。
1.从形状库中拖动形状并将鼠标悬停在容器形状上。
2.按住Windows上的 alt键或MacOS上的 Option 键，然后释放鼠标按钮放下形状。您会注意到，按下按键时，容器形状上的紫色轮廓消失了-这意味着当您放下容器时，所握持的形状不会被添加到容器中。
你刚放下的形状可能在容器形状的前面或后面。
1.转到“格式”面板中的“排列”选项卡。
2.选择其中一个形状，然后单击“向前”或“向后”以将该形状置于前面或将其发送到所有其他形状的后面。
注意：叠加形状不会将它们分组。选择容器形状和重叠形状，右键单击并选择组。
5.搭配VS code
强大的VS code，可以安装draw插件，直接在VS上就可以绘制流程图了。写代码绘图两不误。
直接在VS code插件安装中搜索draw。下载量已经有150K了。
用法，直接新建一个.drawio结尾的文件即可。
或者*.dio，*.drawio.svg也可以。
6.快捷键
快捷键地址：https://viewer.diagrams.net/#Uhttps%3A%2F%2Fviewer.diagrams.net%2Fshortcuts.svg
官网如下图：
官网提供的是英文版的，大多都是熟悉的。这里简单的介绍下我觉得常用的快捷键，并附加了一些解释内容。以下快捷键都本人（我毛毛）一一测试过了，亲测有效，如果没效，欢迎与我讨论。可以在下方留言，或者微信搜索毛小悠。
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站，搜索了下draw.io，发现教程寥寥无几。第二页是只有2个不相干的内容。第一页，随机挑了几个看了。（红框所视）
南风渐暖_：搬运的油管视频。选集形式的，20多集，1集2分钟多。英文。但是，看视频也能看懂系列。
小众软件：纯推广广告的内容，比较短。
其他：感兴趣的可以自己看看。
————————————————
版权声明：本文为CSDN博主「前端毛小悠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/code_maomao/article/details/110621280
发表评论
