Draw.io

image

Draw.io 教程

1- 一、初始设置

1.1- 访问 Draw.io

  • 打开浏览器，访问 draw.io。
  • 初次使用时，系统会询问你要将图保存到哪里。你可以选择本地存储、Google Drive、OneDrive 等。

1.2- 界面介绍

  • 顶部菜单栏：提供文件操作、编辑、视图、排列等选项。
  • 左侧图形库：包含各种图形和模板，可以拖拽到画布中使用。
  • 中间画布：绘图区域，可以放置和编辑图形。
  • 右侧检查器：根据当前选中的元素显示不同的操作，如样式、文本、链接等。

2- 二、基本操作

2.1- 添加图形

  • 从左侧图形库中拖拽所需图形到画布中。
  • 双击画布任意位置可以添加文本框，输入文字后按 Enter 确认。

2.2- 连接图形

  • 选中一个图形，拖动其边缘的小圆点到另一个图形上，即可创建连接线。
  • 可以在右侧检查器中调整连接线的样式和颜色。

2.3- 编辑图形

  • 选中图形后，可以在右侧检查器中修改其颜色、大小、边框等属性。
  • 旋转图形：选中图形后，点击旋转箭头可以旋转 90 度，长按拖动可以自由旋转。

3- 三、快捷键和常用技巧

3.1- 常用快捷键

  • 复制：Ctrl + C
  • 粘贴：Ctrl + V
  • 撤销：Ctrl + Z
  • 重做：Ctrl + Shift + Z
  • 删除：Delete
  • 锁定/解锁：Ctrl + L
  • 编组：Ctrl + G
  • 解组：Ctrl + Shift + U

3.2- 快速操作

  • 批量选择：按住 Shift 键并点击多个图形进行选择。
  • 对齐和分布：选中多个图形后，使用顶部菜单栏中的“排列”选项进行对齐和分布操作。

4- 四、保存和导出

4.1- 保存文件

  • 点击左上角的“文件”菜单，选择“保存”或“另存为”。
  • 可以选择保存到本地或云端存储（如 Google Drive、OneDrive 等）。

4.2- 导出图表

  • 选择“文件”菜单中的“导出为”选项，选择所需的文件格式（如 PNG、JPEG、PDF、SVG 等）。
  • 在导出对话框中，可以设置导出的分辨率、背景色等选项，然后点击“导出”并选择保存路径。

5- 五、高级功能

5.1- 图层管理

  • 在画布底部点击图层工具，可以添加、删除和管理图层。
  • 可以通过复选框显示或隐藏图层，方便管理复杂图表。

5.2- 模板和样式

  • Draw.io 提供了丰富的模板，可以在创建新图表时选择使用。
  • 可以在右侧检查器中保存和应用自定义样式，方便快速设置图形外观。

5.3- 协作和版本控制

  • Draw.io 支持多人协作编辑，可以与团队成员共享图表并实时编辑。
  • 支持版本控制，可以查看和恢复历史版本。

6- 六、特殊使用技巧

6.1- 快速复制和连接

  • 复制并连接：选中一个形状，按住 Ctrl 键并拖动形状的边缘箭头，可以快速复制并连接到新形状。
  • 快速选择形状：双击画布空白处，弹出快速选择对话框，选择常用形状并直接添加到画布中。

6.2- 智能对齐和分布

  • 对齐工具：选中多个形状后，使用顶部菜单栏中的“排列”选项，可以快速对齐到左、右、上、下、中间等位置。
  • 等距分布：选中多个形状后，点击“排列”->“等距分布”，可以选择水平或垂直等距分布。

6.3- 设置默认样式

  • 默认形状样式：选中一个形状，设置好样式后，点击右侧检查器中的“设置为默认样式”，以后添加的形状都会使用该样式。
  • 默认连接线样式：同样的方法，可以设置默认的连接线样式，保持图表风格一致。

6.4- 使用和创建模板

  • 使用模板：在创建新图表时，可以选择 Draw.io 提供的各种模板，快速开始绘图。
  • 创建自定义模板：将常用的图形和布局保存为模板，方便以后重复使用。可以通过“文件”->“另存为模板”来保存当前图表为模板。

6.5- 导入外部资源

  • 导入 SVG 文件：可以将外部 SVG 文件拖拽到画布中，作为自定义形状使用。
  • 导入图像：支持导入 PNG、JPEG 等格式的图像文件，丰富图表内容。

[!NOTE]

  • 导入文本和代码可以快速生成图表

image

6.6- 高分辨率导出

  • 设置导出分辨率：在导出对话框中，选择 PNG 或 JPEG 格式，并设置较高的分辨率（如 300 DPI），确保导出图像清晰。
  • 导出为 PDF：选择“文件”->“导出为”->“PDF”，可以将整个图表导出为 PDF 文件，方便打印和分享。

6.7- 使用数学公式

  • 插入 LaTeX 公式：在文本框中输入 $...$ 包围的 LaTeX 代码，可以插入数学公式，适用于需要展示复杂数学表达式的图表。

6.8- 自定义快捷键

  • 设置快捷键：可以在 Draw.io 的设置中自定义快捷键，适应个人使用习惯，提高操作效率。

通过掌握这些详细的操作步骤和特殊使用技巧，你可以更高效地使用 Draw.io 创建专业的图表。