Draw.io--一款强大且支持在线编辑和导出的流程图绘制软件

前言：为什么选择draw.io？

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

在线版：https://app.diagrams.net/
电脑版：https://github.com/jgraph/drawio-desktop/releases

第一次使用，可以点击“language”切换为简体中文哦！

Windows：其实画图软看还真是蛮多的，最强大的且老牌的自然是Visio，但是如果想在线、想在Windows平台上，就优点费劲了。
Processon：强大的在线作图软件，很流行，但是如果不是会员就只能存储几幅图，那是果断不够的，并且下载的图片不高清。
StartUML：Mac上使用非常好，但是在线搞还是有些费劲了。
Draw.io：简而言之，免费支持离线和在线，且可以导出到云盘，满足了众生的需求。

本文的主要内容如下:

draw.io 的核心设计元素
draw.io 的基本操作
使用 draw.io 绘制简单流程图

1.核心设计

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

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

这里笔者选择了device保存，然后出现如下页面，询问创建一个新的还是打开已有的文件，笔者选择打开了已经创建的文件：test.drawio。

1.1 绘图区

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

顶部菜单栏：提供各项基本操作，
左侧：图形区，
中间部分：画布，
右侧部分：检查器，根据当前的元素显示不同的操作。

1.2 快速开始

整个界面的操作非常直观，如果有相关绘图软件的使用经验，相信已经可以上手绘图了。

添加图形
通过简单的拖拽，即可在画布上面添加图形。
添加文本
在画布上任何位置双击都可以添加文本框，在其中输入文字
添加链接
在图形上鼠标悬浮，在图形上会浮现基本的链接点。这里分为外边界蓝色的大箭头和边上的x型焦点。这两种链接方式稍有不同。

2.基本操作

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

图形、链接、文本这三个元素都可以被选中。可以使用cmd(windows下为ctrl，下同) + A 选择全部元素，也可以使用cmd + click(鼠标左键点击)来进行特定元素的多选。选择元素后可以进行以下操作：

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

2.2 创建链接

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

使用蓝色箭头进行快速链接
点击蓝色箭头，会在指定方向创建链接，并在链接末端生成一个完全一致的元素
如果需要控制链接位置，可以按住ctrl键，拖拽蓝色箭头到指定位置

链接图形

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

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

2.3 图形替换与旋转

通过快速创建链接的方式可以快速的创建图形并进行链接，但是如果需要不同的图形呢？

替换：从左侧图形库选择需要的图形，拖拽到要替换的图形中央，直到出现了一个替换的褐色标志，松开即可实现替换
旋转：选中图形，拖拽上方的旋转箭头即可

3.制作流程图

3.1 基本绘图

掌握了图形，文本和链接的基本操作，就可以实操来画一个流程图了，检验一下学习效果，如果哪一个部分不够熟练可以温习一下上面的教程

Vue生命周期

3.2 编辑样式

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

3.3 保存和导出

在File菜单可以执行保存，并将图片导出成图片或其他格式的文件。

4.总结

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