首页 > 电脑常识 > 云计算

Drawio使用简介(慢慢更新中)

admin 云计算 2021-04-25 16:49:24 绘图   drawio  
后台-系统设置-扩展变量-手机广告位-内容正文底部

drawio是一款强大、免费的绘图工具(基本可以替代收费的visio等),使用起来非常方便。支持网页版使用(网页版可以自己部署一套)以及客户端使用(支持windows,MacOS以及Linux)。

该项目开源在github上的源码:https://github.com/jgraph/drawio-desktop

官方的教程链接:https://www.diagrams.net/doc/

不想看文章的可以看下我在bilibili上录的视频:https://www.bilibili.com/video/BV18V411J7Ns

drawio

接下来本文会简单介绍一些基础操作,通过这些基础操作基本可以满足大部分人的应用需求。


目录

  • 网页端使用
  • 桌面端下载
  • 语言设置
  • 开始绘图
    • 添加元素
    • 元素对齐
    • 元素等距分布
    • 连接元素
    • 添加文字
    • 添加公式
    • 添加图片
    • 添加表格
    • 自由绘图
    • 组合元素
    • 保存元素模板
  • 保存
    • 保存文件
    • 导出图片
  • 常用快捷键


网页端使用

懒得安装的直接使用下面这个链接直接开始绘图:
https://www.draw.io



桌面端下载

在github项目右侧有个release,这里是作者打包生成好的安装文件,比如现在最新的版本是14.5.1点击进去后,可以看到如下图所示的下载页面。根据你自己的系统以及硬件平台选择合适的安装文件。

下载



语言设置

安装完后第一次打开默认界面是英文的,如果想使用中文,可以点击Language接着选择自己喜欢的语言,如果想提升英语的还是默认吧哈哈。

Language选择简体中文。
chinese设置完语言后记得重启下软件。



开始绘图

打开drawio后,点击创建新绘图:
start接着会提示你选择一个模板,这里直接创建一个空白框图(可根据自身情况选择)

在这里插入图片描述
创建完后,如图所示:

主页


添加元素

  1. 选择你需要的元素拖入画布 (左侧有官方提供的各种类型元素,点击左下角更多图形可以找到更多类别)
  2. 选中元素后可使用鼠标点击元素边缘上的点对元素进行放大/缩小等操作(元素右上角的旋转标志可以选择元素)
  3. 双击元素可以输入文字
  4. 选中元素后可在右侧的样式中修改元素的样式(颜色等)
  5. 在右侧的文本中可以修改文字的字体、大小以及颜色等等
  6. 在右侧的调整图形中可以对元素的位置、大小以及角度等进行更加精细的调整

选择元素


元素对齐

当要对齐多个元素时,选择多个元素(可通过ctrl+鼠标左键选择多个目标),然后点击调整图形 -> 对齐 然后选择你想要的对齐方式。

对齐元素


元素等距分布

当要等距摆放多个元素时,选择多个元素(可通过ctrl+鼠标左键选择多个目标),然后点击调整图形 -> 等距分布 然后选择你想要的分布方式。

等距分布


连接元素

当把鼠标放置元素上(注意没有点击,只是放置)会出现如下图所示的标识,四个箭头(用红圈标出的部分),16个小叉叉(用绿色的圈圈标出)。如果点击了元素只会显示四个箭头。

连接连接的操作有很多种,这里只简单讲一种,在刚刚说的 当把鼠标放置元素上 后在元素周围出现各种标识,你可以自己随便选择一个作为连接线的起始位置,鼠标左键按下(不要松)拖动鼠标移至你想连接的位置。

连接1
连接后在右侧的样式中可以修改连接线的样式、连接方式、颜色、粗细、线形等等。
连接2


添加文字

  1. 在通用里拖一个Text元素放到你想放的位置
  2. 双击Text元素编辑文字
  3. 在右侧的文本中对文字的颜色、字体、大小等进行编辑

添加文字


添加公式

可参考官方给的文档:https://www.diagrams.net/doc/faq/math-typesetting
公式
在使用公式功能之前需要打开数学排版,在其他 -> 数学排版 在点击后会显示一个勾勾,然后就能用了:

open

现在官方支持三种格式,比如写博文中常用的LaTeX格式。用起来也非常方便,直接把公式复制到Text元素里就行了。

$$\sqrt{3×-1}+(1+x)^2$$

公式
如果不了解LaTeX公式不了解可以看下下面几个连接:
帮助文档: https://www.latexlive.com/help
在线公式编辑器: https://www.latexlive.com/


添加图片

有时,需要使用一些现成的图片,点击上方的加号,再点击图片按钮。

插入图片

接着你可以通过打开按钮选择自己本地的图片,或者通过网上图片的url直接载入进来。

插入图片2


添加表格

点击上方的表格图标,然后拖动鼠标可以选择自己需要的表格大小(行数和列数)。

表格
选中表格,在右侧的调整图形中可以调整表格的大小、位置等属性。
设置表格


自由绘图

有时一些特殊的图案软件中并没有提供,这时可以使用自由绘图功能自己去绘制。点击上方的加号,再点击自由绘图,会弹出一个自由绘图窗口。

自由绘图
点击开始绘图按钮就可以自己用鼠标随便绘制,绘制完后点击结束绘图按钮,刚刚绘制好的图案就会变成一个元素随意使用。

绘图


组合元素

同时选中多个元素,在元素上点击鼠标反键,再点击组合即可组合成一个元素。

组合


保存元素模板

有时一些元素(可能是你自己组合设计的新元素)经常被用到,我们可以将其保存成一个模板方便下次使用。如下图所示,将需要保存的元素用鼠标拖至左侧的 便筏本 中,这样以后都可以使用到。

保存模板
点击便筏本的铅笔符号可以编辑管理自己的便筏本。

便筏本



保存

保存文件

在左上角点击 文件 -> 保存 将绘图文件保存到指定路径。
保存文件


导出图片

在左上角点击 文件 -> 导出为 将绘图文件导出成指定格式,一般为了方便使用会导出成PNG或者JPEG格式等。

导出图片
比如我要将图片保存成PNG格式的图片,软件会提示是否要透明背景、阴影、网格等。另外还有个边框宽度参数,这个参数代表输出图像时是否需要在图片边缘增加一些空白边缘。默认是0,如果需要可以自己设置。

导出图片
大家可以简单对比下设置和不设置边缘宽度的区别。

边缘宽度



常用快捷键

快捷键作用CTRL + C复制元素CTRL + X剪切元素CTRL + V粘贴元素CTRL + Z撤销操作CTRL + S保存绘图(建议经常保存,养成良好习惯)CTRL + A选中全部元素DELETE删除选中元素

文章来源:https://blog.csdn.net/qq_37541097/article/details/116024091

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://jcdi.cn/diannaochangshi/yunjisuan/583.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码