Drawio一款流程图使用简介
序:
drawio
是一款强大、免费的绘图工具(基本可以替代收费的visio
等),使用起来非常方便。支持网页版使用(网页版可以自己部署一套)以及客户端使用(支持windows,MacOS以及Linux)。
github开源路径 Drawio官网教程
一、网页版
网页地址:https://www.draw.io
出现下图情况,不要慌,稍等一会即可
任意选择一个即可
弹框可以直接点击×即可
二、客户端下载
GitHub下载地址(此地址会随版本更新而有所变动,建议进入开源路径寻找)
安装完成后,点击下图位置可以选择想要的语言
三、使用
开始绘图
创建新绘图
打开后
添加元素
- 选择你需要的元素拖入画布 (左侧有官方提供的各种类型元素,点击左下角更多图形可以找到更多类别)
- 选中元素后可使用鼠标点击元素边缘上的点对元素进行放大/缩小等操作(元素右上角的旋转标志可以选择元素)
- 双击元素可以输入文字
- 选中元素后可在右侧的样式中修改元素的样式(颜色等)
- 在右侧的文本中可以修改文字的字体、大小以及颜色等
- 在右侧的调整图形中可以对元素的位置、大小以及角度等进行更加精细的调整
元素对齐
当要对齐多个元素时,选择多个元素(可通过ctrl
+鼠标左键选择多个目标),然后点击调整图形 -> 对齐 然后选择你想要的对齐方式。
元素等距分布
当要等距摆放多个元素时,选择多个元素(可通过ctrl
+鼠标左键选择多个目标),然后点击调整图形 -> 等距分布 然后选择你想要的分布方式。
连接元素
当把鼠标放置元素上(注意没有点击,只是放置)会出现如下图所示的标识,四个箭头(用红圈标出的部分),16个小叉叉(用绿色的圈圈标出)。如果点击了元素只会显示四个箭头。
连接的操作有很多种,这里只简单讲一种,在刚刚说的 当把鼠标放置元素上 后在元素周围出现各种标识,你可以自己随便选择一个作为连接线的起始位置,鼠标左键按下(不要松)拖动鼠标移至你想连接的位置。
连接后在右侧的样式中可以修改连接线的样式、连接方式、颜色、粗细、线形等等。
添加文字
- 在通用里拖一个
Text
元素放到你想放的位置 - 双击
Text
元素编辑文字 - 在右侧的
文本
中对文字的颜色、字体、大小等进行编辑
添加公式
在使用公式功能之前需要打开数学排版,在其他 -> 数学排版 在点击后会显示一个勾勾,然后就能用了:
现在官方支持三种格式,比如写博文中常用的LaTeX
格式。用起来也非常方便,直接把公式复制到Text
元素里就行了。
$$\sqrt{3×-1}+(1+x)^2$$
附: 帮助文档 、 在线公式编辑器
添加图片
接着你可以通过打开按钮选择自己本地的图片,或者通过网上图片的url直接载入进来。
添加表格
选中表格,在右侧的调整图形中可以调整表格的大小、位置等属性。
自由绘图
有时一些特殊的图案软件中并没有提供,这时可以使用自由绘图功能自己去绘制。点击上方的加号,再点击自由绘图,会弹出一个自由绘图窗口。
点击开始绘图按钮就可以自己用鼠标随便绘制,绘制完后点击结束绘图按钮,刚刚绘制好的图案就会变成一个元素随意使用。
组合元素
同时选中多个元素,在元素上点击鼠标反键,再点击组合即可组合成一个元素。
保存元素模板
有时一些元素(可能是你自己组合设计的新元素)经常被用到,我们可以将其保存成一个模板方便下次使用。如下图所示,将需要保存的元素用鼠标拖至左侧的 便筏本 中,这样以后都可以使用到。
点击便筏本的铅笔符号可以编辑管理自己的便筏本。
导出图片
在左上角点击 文件 -> 导出为 将绘图文件导出成指定格式,一般为了方便使用会导出成PNG
或者JPEG
格式等。
**eg:**将图片保存成PNG格式的图片,软件会提示是否要透明背景、阴影、网格等。这时候,会有个 边框宽度 参数,它代表输出图像时是否需要在图片边缘增加一些空白边缘(默认是0)如果需要可以自己设置。
对比下设置和不设置边缘宽度的区别。