draw.io在线绘图工具怎么用? draw.io超详细的小白入门好代码教程

这篇文章重点介绍在线绘图工具draw io的使用方法。1、draw io简介 draw io在线绘图工具是英格兰一家公司开发的,该公司信条:为每个人提供免费、高

这篇文章重点介绍在线绘图工具draw.io的使用方法。

1、draw.io简介

draw.io在线绘图工具是英格兰一家公司开发的,该公司信条:为每个人提供免费、高质量的绘图软件。

这款工具无须注册登录,安全、开源、使用广泛、且基于浏览器,免安装。

可绘制:流程图、思维导图、组织结构图、文氏图、信息图、楼宇平面图、网络图、架构图、电气工程图、UML图等。

2、创建绘图

在浏览器地址栏里输入:draw.io,回车后,其自动导航到:app.diagrams.net

并弹出如下界面:

上图是保存路径选择存储在当前机器的设备中,“Create New Diagram”是新建图,"Open Existing Diagram"是打开已存在的图。

我们选择新建图,将会出现以下界面:

首先,选择文件的保存格式,包括drawio自己的格式,png图片格式,svg向量图片格式、html文件格式和xml格式。

然后,我们输入文件的名称,注意不要把对应的后缀给删掉,其次,我们选择创建图的类型,这里选择“Blank Diagram”,空白图,最后点击“Create”(创建)按钮。

点击“Create”后,它会让你选择保存到你的电脑的具体位置和名称。

点击“确定”后,进入到如下的界面。

它基本包含菜单、工具栏,左侧的图形类别与选择栏、右侧的对象属性设置栏、中间的工作区和底部的页标签等。

3、定制绘图类别

在界面左下角,点击“More Shapes...”可以设置你想要的图形类别:

在弹出的“Shapes”界面的左侧,你想绘制什么图形,可以把其勾选上,然后在界面右下角点击“Apply”(应用)即可。这里勾选上了UML。

在draw.io中提供的UML图形如下:

4、设置画布等信息

在绘图前,我们可以对绘图的一些信息进行设置。

在工作区空白处任意位置点击一下,在右侧出现如下的属性设置栏。

4.1 Diagram选项卡

Diagram选项卡中,设置一些与绘图图形有关的内容。

(1)View

Grid设置是否显示网格,默认是显示的。Gride右侧的数字用于指定网格的大小和网格线的颜色。

Page View设置绘图区是否以页视图的形式显示。Background用于设置背景色,默认为白色,如果去掉勾选,则保存的图的背景是透明色。

Shadow用于设置图形是否有阴影,下面是无阴影和有阴影的效果对比:

(2)Options

Connection Arrows用于设置当鼠标在图形对象上停留时是否显示箭头导向指引。下图是有箭头导引的效果:

当鼠标在某一个箭头上稍作停留时,该箭头颜色变深,同时会出现该图形可能能连接的图形对象,这时在出现的图形框中,点击一个图形,其自动会创建一个点击图形的对象,并从原图形向新建图形上绘制一个箭头。

或者,在图形的一个箭头上,按住鼠标左键,鼠标这时会变成一个十字箭头,然后鼠标可以移动到其它图形上,这时松开鼠标时,就从原图形到目的图形上创建了一个箭头。

Connection Points设置图形上是否出现链接点,如上图中的边界上有8个×的标记,这些标记用于连接线的终点或起点。

Guides用于设置是否显示导航线。如果勾选上此项,当在移动对象时,该对象与其他对象会出现位置导航线,以方便与其他对象之间设置对齐方式(顶端对齐、居中对齐、底端对齐)以及在3个或3个以上对象间设置水平间距或垂直间距。

AutoSave设置是否自动保存,如果勾选此项,软件会定时保存,以免丢失设计信息。

(3)Paper Size

用于设置页面信息,可以设置画布(工作区)的大小,以及布局方式。

4.2 Style选项卡

Style选项卡用于设置图形的风格。

Style选项卡中的内容如下:

Sketch用于设置是否以草图形式显示图形,勾选上之后的效果如下:

Rounded用于设置连接线的拐角是否以圆角形式显示,勾选上后,连接线的折角将以圆角形式显示。

未设置任何选项时的形状:

设置了Rounded之后的效果:

Curved勾选上该项后,带拐角的连接线将以弧状显示。

右侧下面是预设的图形颜色搭配、背景等信息,可以方便设计者快速的设置风格。

5、绘制图形并设置图形属性

5.1 添加图形

在画布左侧的图形对象列表中,点击你想添加的图形,则画布中就会自动创建一个该图形的对象。

下面,我们在画布左侧的UML图形类别中选择小人的形状,它会自动出现在工作区(画布)中。

5.2 图形的放大提示

当鼠标在画布左侧的图形列表中的一个图形上稍作停留时,它会在右侧放大显示,同时提示你这个图形的名称,如下图所示:

5.3 移动图形的位置

当鼠标在图形上变成四项箭头时,我们按住鼠标就可以把图形移动到你想要的位置上了。

或者在鼠标变为四项箭头形状时,我们按下鼠标选中这个图形,使用键盘上的四个方向键也可以微调图形的位置。

当鼠标移到小人“Actor”上时,且形状是四向箭头时,我们按住鼠标可以移动小人的位置。

5.4 修改图形的名称

当鼠标在图形上变成四向箭头时,我们可以双击它,修改其名称,这里我们把添加的参与者图形的名称改成了读者。

然后我们再往画布中添加一个用例,双击用例图形,并把它的名称修改为"借阅图书"。

5.5 设置图形的属性

选中一个图形,我们可以在右侧的属性栏中修改其相关属性。

我们来修改一下刚才添加的用例的相关属性。

选中用例“借阅图书”后,右侧出现了属性设置栏。

(1)Style

用于设置图形的风格。

上面那些带颜色的矩形框是图形的预制风格,你可以点击其中一个,则图形会变成与其一致的边框颜色和填充色。

  • Fill用于设置图形的填充颜色。当下面的Sketch选中时,这里还可以指定填充的风格,如斜线、Z形线、点等。
  • Gradient用于设置图形的渐变填充色。
  • Line设置是否显示边框线,以及边框线的风格。
  • Perimeter用于设置边缘的大小,当有连接线时,连接线到达边缘位置即可,而不一定非要到图形的边界上。
  • Opacity用于设置图形的透明度。0完全透明,100完全不透明。
  • Shadow用于是否显示阴影。
  • Sketch用于设置图形是否以草图风格显示。

(2)Text

用于设置图形上文本的样式。

设置的内容包括由上到下,由左到右依次为:

  • 字体名称、是否加粗、是否斜体、是否加下划线、是否垂直显示文本、字体大小、文本对齐方式、文本在图形内的位置(Top、Middle、Bottom);
  • Postion用于指定文本在图形外的位置(Top Left、Top、Top Right、Left、Center、Right、Bottom Left、Bottom、Bottom Right);
  • Font Color用于设置字体颜色;
  • Background Color用于设置文本背景色;
  • Border Color用于设置文本范围边界框的颜色;
  • Word Wrap设置文本是否自动折行;
  • Formatted Text:格式化的文本;
  • Opacity设置文本的透明度;
  • Spacing用于设置文本的内边距。

(3)Arrange

Arrange选项卡中的内容主要用于设置图形的排列信息。

To Front:将图形对象调整到最顶层;

To Back:将图形对象调整到最底层;

Bring Forward:往上层移动;

Bring Backward:往下层移动;

Size:设置图形的宽度和高度。

Constrain Proportions:设置图形的长度和宽度时保持长宽比不变。

Position:图像在画布中的位置。

Angle:调整对象旋转的角度。

Flip:翻转对象,包括水平翻转和垂直翻转。

6、设置连接线的属性

选中某个连接线或箭头时,其在右侧的属性栏如下图所示:

这里重点介绍与其他图形不同的地方。

6.1 Style选项卡

Line:勾选上后,会显示箭头和连接线,否则将会被隐藏。

下拉列表中的Sharp、Rounded和Curved用于设置带拐角的链接线风格。Sharp选项的拐角将会比较锐利,Rounded的拐角将以圆角形式显示,Curved选项将使连接线以弧的形式显示。这跟4.2中的内容的设置效果相同。

接下来的设置用于指定链接线的风格:

第一个用于设置链接线的种类。

包含4种,如下图所示:

第2个用于设置线型:

第3个用于设置线的粗细,默认为1磅。

第2行第1个用于设置链接线的拐角风格。

其风格从上到下表示如下:

剩下的那两个用于设置箭头和箭尾的风格。

设置None的话,表示该端没有箭头。

Line endLine start分别用于设置箭尾和箭头举例图形的间隙以及箭头的大小。

Line jumps用于设置相交线处的风格及大小,可选取的值有:None,Arc,Gap,Sharp和Line。其风格从左到右依次如下图所示:

  • Opacity用于设置线的透明度。
  • Shadow用于指定线是否有阴影。
  • Sketch用于指定线是否以草图形式显示。

6.2 Text选项卡

Text选项卡与其他地方相同,不再赘述。

6.3 Arrange选项卡

Arrange选项卡中的内容如下:

跟其他地方不同之处在于:

  • Start用于指定线的开始位置坐标位置;
  • End用于指定线的结束位置坐标;
  • Reverse用于使箭头和箭尾位置互换。

注意:对于线的相关属性设置完毕后,在接下来绘制其他线时也将使用相同的属性(如线型、线的颜色、粗细等)进行绘制。

7、保存图形

正常情况下,你在新建图时,让你指定了保存设备和图的名称,在你每次修改或移动图形时,他都会自动保存。你可以使用其菜单“File”中的“Save”来执行保存,或选择“File”中的“Save as...”另存为一个新图形。

8 一些其它问题

(1) 能否改成中文

可以,在界面右上角有一个地球图标,点击它后,在最下边有一个“简体中文”,选择后,他的界面就会变成中文的。

下图中的红色椭圆处就是设置界面显示语言的。

设置完后,刷新界面(注意,要是有内容的话,你记得要先保存)就变成了中文界面。

(2)绘图区过小怎么办

有三种方式可以增加绘图区的大小,一个是使用全屏功能,如上图中红色矩形中的第一个图标,这个图标将使用全屏功能来绘图;二是把右边的属性框折叠起来,上图中红色矩形框的第2个图标就是这个功能;三是把上方过高的部分折叠起来,上图中红色矩形框中第3个图标就是这个功能。

另外,你可以通过左侧垂直导航条上的手柄来改变绘图区的大小,如下图所示:

鼠标滑到上面时会变成如下图所示的形状。

这时,你按住鼠标左键,可以改变绘图区的大小。

(3)如何放大或缩小图

比较简单的方式是按住CTRL键,同时滚动鼠标轮,上滚放大图,下滚缩小图。你也可以使用工具栏中的相关功能,如下图:

下拉列表中给出了放大或缩小的比例,你可以选择一个,或者使用下拉列表右侧的带加号的图标来放大图,或使用带减号的图标来缩小图。

(4)能否把个人设置好的图形作为标准图形用于后续设计

draw.io提供了便笺本的功能,用户可以把设置好的基本图形或一组图形拖拽到便笺本中,在后续设计中使用。

然后在你需要的地方,就像添加其它图形那样添加自己放在便笺本中的图形了。

如果不需要了,点击便笺本右侧的类似铅笔状的图标,可以对便笺本中的图形进行修改。如下图:

点击图形上的“×”可以删除掉该图形,点击图形下的名称可以修改图形的名字,也可以导入其它图形,或添加图片。

修改完点击保存即可。