前言：为什么选择draw.io/p>

draw.io（现已更名为draw.net）是一个强大简洁的在线的绘图 站，支持流程图，UML图，架构图，原型图等图标。支持Github，Google Drive, One drive等 盘同步，并且永久免费、完全开源。如果觉得使用Web版不方便，draw.io 也提供了多平台的离线桌面版可供下载。

• 在线版：https://app.diagrams.net/

1.核心设计

在学习基本操作之前我们先来了解一下draw.io的基本设计，对 页的元素有一个直观的认识。有了基本的框架，学习起来就有迹可循了。大部分的绘图应用都离不开三个基本的元素，图形，链接，文本。每个元素都有基本的操作和样式，元素与元素之间又可以进行组合，“三生万物”，生成各种各样的图表。

首先打开draw.io的 站，加载之后会出现以下的画面。这里是选择图表保存的方式，你可以选择常用的 盘，也可以选择decide later 在之后绘图结束保存的时候在进行选择。


1.1 绘图区

进入应用后，界面非常直观简洁。

• 顶部菜单栏：提供各项基本操作，
• 左侧：图形区，
• 中间部分：画布，

2.基本操作

2.1 移动、多选、复制与删除

图形、链接、文本这三个元素都可以被选中。可以使用 选择全部元素，也可以使用来进行特定元素的多选。选择元素后可以进行以下操作：

• 移动：拖拽
• 复制： cmd + C
• 复制并粘贴： cmd + D
• 删除：delete键

2.2 创建链接

上面提到过在图形上面悬浮鼠标会出现图形的链接点。

• 在悬浮图形后选择x型焦点（会高亮为绿色）可以创建链接，拖拽链接线到目标图形上的x型焦点，完成固定链接
• 在悬浮图形后选择x型焦点（会高亮为绿色）可以创建链接，拖拽链接线到目标图形的边上，直到图形外边变成蓝色，松开鼠标，完成浮动链接

【注意】：固定链接是指链接始终固定在图形的链接点上，不会随着图形移动而变化，浮动链接则会根据图形的移动在图形的边上进行移动自适应。如下图，固定链接始终固定在右边，而浮动链接则从上边移动到了下边


• 旋转：选中图形，拖拽上方的旋转箭头即可
  

  Vue生命周期

  选中元素在右侧的检查器可以修改元素的颜色，大小，布局等等。
  

  4.总结

  实际上借助draw.io的模板库还可以绘制更多种类的图，包括UML图，结构图等等。

  声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！