searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享

【转载】写文必备绘图神器draw.io(可搭配vs code)

2022-11-24 06:02:22
515
0

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 / 1000
才开始学技术的小白
23文章数
2粉丝数
才开始学技术的小白
23 文章 | 2 粉丝

【转载】写文必备绘图神器draw.io(可搭配vs code)

2022-11-24 06:02:22
515
0

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

文章来自个人专栏
程序员开发必备软件工具
3 文章 | 1 订阅
0条评论
0 / 1000
请输入你的评论
0
0