学会使用drawio的编辑器

drawio是免费的开源的图表应用，你可以通过app.diagrams.net使用在线版本或者下载离线安装版在桌面端使用。

对于团队来讲， 把数据存储作为安全第一的图表应用， 你可以选择存储数据到不同的介质。例如Atlassian Confluence Cloud, 谷歌文档，github, Microsoft Word. 在国内，可以使用drawon。 钉钉，飞书等产品来使用drawio。

https://www.drawon.cn?useSource=csdn

drawio编辑器

与其他大部分绘图应用类似， 你在工具栏上看到的面板，围着画布，都是与上下文相关的。 你在画布上选择一个元素，与之依赖的工具和选项则会被展示。

如果你以前使用过图表工具，那么你将会非常熟悉图标编辑器的图层。

技巧： 你将鼠标悬浮或者划过任何的按钮，工具，选项，你将看到一些提示用途。

如下片段覆盖了drawio编辑器的特性

菜单（Menu）

菜单在drawio应用中与其他应用程序类似， 一些特性被融入到了如下菜单项中

依据你在图表中选择的对象， 一些菜单是可用，一些是不可用的。 例如，当你没有选择图形时，你是不可以编辑图形的风格的。

• 文件（File）——使用文件（新建， 打开，导入/导出和打印）或者打开或者客户创造图形库。

• 编辑（Edit）——选择和编辑图形库，在图表上连线，改变风格。

• 视图（View）——显示或者隐藏不同的面板帮助工具，包括便签，图层，规则器或者更多。

• 布置（Arrange）——对图形和连接器进行分组和组织， 插入模板，图片， 使用自动图层的特性。

• 其他（extras）——使用不同的编辑器主题， 使用数学排版，启用禁用开始画面，和自动保存， 使用标签或者增加客户配置。

• 帮助（Help）——查看快捷键， 观看支持的信息，下载桌面端版本。

技巧：菜单右侧的状态消息展示当前是否有未保存的编辑内容，如果你开启了自动保存功能。

工具栏

工具栏中的一些工具需要你选中对应的元素才能够生效。例如，删除工具会变成灰色不可用状态如果你未选中形状连接器和文本

• 视图（三面板）——隐藏或者显示格式面板，或者图层和轮廓对话框

• 缩放（按照百分比）——让图表编辑画布变得更大或者更小。 这不会影响导出或打印的大小

• 放大/缩小（放大镜）——点击直接放大或缩小图表

• 撤销/重做（弯曲的箭头）——撤销或重做你对图形的历史改变

• 删除（垃圾桶）——删除选中的形状

• 向前移/向后移（图层形状）——选中选择的图形向前移动或者向后移动， 将他们排列在非选中图形的上方或者下方。

• 填充颜色（油漆罐）——改变选中图形的填充色

• 线颜色（笔和线）——改变选中图形的轮廓线或者连接器的颜色

• 影子（带影子的方形盒子）——启用或者禁用选中形状的影子

• 连接（箭头）——通过通过下拉列表选中连线的风格，并可以把他应用到选中的连接线上。

• 航路（有两个连接点的线）——选择路径样式以更改所选连接器在绘图画布上的弯曲方式。

• 插入（加号）插入一个通用的形状， 自由绘制， 图像，模板，布局或更多

• 表格（网格的形状）——点击拖出你想要的行和列，点击创建插入一个表格

在右侧的尾端，有三个视图选项：

• 全屏（带角的盒子）——关闭左右面板，使得画布铺满整个窗口

• 格式面板（两个面板）——显示或隐藏右侧的格式面板

• 隐藏/展示（上箭头）——显示或者隐藏文件名和图表

形状和形状库

以逻辑分组的方式组织形状，我们叫做形状库。 因为形状太多，一次不可能展示所有的形状。

技巧：通过点击箭头左边的名称，扩展或隐藏每个形状库的内容

启用禁用形状库

为了便于创建图表更简单， 你可以在形状库中启用跟当前画布所设计的内容相关的形状库。

1. 在面板底部点击更多

2. 打开对话框，滚动左侧列表选择你需要的形状库，打勾，就可以选中，取消勾，就可以取消该形状库。

3. 点击应用

便条簿

便条簿是你个人的形状库， 你可以把常用的形状或者一组形状添加到便条簿上，便于在多个设计文件中共享，或者常用。

1. 右键单击，选中一个或多个形状，直接拖到便条簿中即刻。

2. 在便条簿中选中一个或者一组你放置的形状，直接拽到画布中，就像从图形库中拽到画布一样的操作。

搜索图形

很多图形被组织到很多图形库中， 他们很难被发现。 通过名称字段可以在搜索框搜索。 当搜索的时候， 会在下方列出相关联的图形。 你也可以在线搜索，drawon实现了在线搜索功能，所以drawon的搜索能力更加强大。

技巧：如果你按照名称找不到你想要的图形，尝试一个相近或相关联的词，再试试。

画板

在中间的画板上， 可以通过放置图形，连接，设置图形的样式进行作图。 为了用户能够更好的对齐，能够更整齐的调整距离，画布缺省是带方格。

• 使用滚动条平移绘图画布， 或者在画布的空白区域鼠标右键单击/中击（按下滚轮），移动画布。 使用鼠标滚轮上下滚动可以垂直移动画布。

• 缩小/放大，使用工具栏的缩放按钮，或者在windows下，按住ctrl键，macOS下按住cmd键，在使用滚轮放大缩小画布。这个操作并不会改变画布上图表的大小。 只是放大缩小。

技巧：通过视图菜单可以开启一些规则

页表

可以把复杂的图表组织到多页面中。

• 点击画布左下角的垂直方向的省略号。

• 点击页面标签页去切换你想切换的也。

• 通过点击（+） 增加新的页面。

格式面板

你可以使用右侧的格式面板，可以用来改变图形风格， 连接线，文本和图表的属性。

格式面板是上下文敏感的。 例如，当你点击一个连接线，你可以看到相关能作用连接线的风格选项。 如果你只选择了文本，不包括图形和连接线，你将只能看到文本特性的选项。

风格标签页

当你选择一个或多个图形，你能够改变图形的填充色和轮廓颜色， 编辑风格，拷贝或者粘贴风格页中的风格。你可以改变选中的连接的绘制方式——锐利，圆角，曲线， 是虚线还是直线，线条交叉应该怎么绘制， 以及在线的末尾是否使用箭头，以及更多的属性。

以下对比以下，被选中图形和线条，右侧的格式面板的不同风格。

选中图形，右侧的格式面板

选中连接线，右侧的格式面板

文本标签页

右侧的文本标标签页，可以用来改变字体， 以及大小， 以及文本的风格。 还可以改变文本垂直和水平的对齐方式， 书写方向，字体和背景色，透明度， 增加围绕文字的空白空间距离。

文字自动换行和格式化字符串在缺省是启用的。 这让你在要给文本中设置字符或者字，就像在HTML中一样，页支持超链接。

技巧：双击文本去编辑整个文本，或者选中部分文本进行编辑， 当不选中图形时，只有文本标签页会展示。

如下对比不同的选项，第一个为选中图形，第二个为只选中部分文本：

调整图形

格式面板中的调整图形标签页， 通过该标签页，可以改变图形和连线的位置，可以把图像移动到其他图像的前方或者后方，垂直方向移动位置，改变大小，旋转他们等。

点击编辑数据，可以手动的编辑选择的图形的元数据，或者点击超链接，给图形增加超链接。

注意：选择连线时，显示的调整图形中的内容要比选择图形要少。

图表全局选项

如果你没有选中任何元素， 将会在右侧看到应用于整个图表和画布的选项属性。

• 在绘图tab页可以改变应用于整个绘图的打印以及绘图画布的选项属性。

• 在风格标签页，可以应用于全局的图形，文本，以及连接器的选项。

Diagrams

Diagram Style