这篇文章重点介绍在线绘图工具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 end和Line 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提供了便笺本的功能,用户可以把设置好的基本图形或一组图形拖拽到便笺本中,在后续设计中使用。
然后在你需要的地方,就像添加其它图形那样添加自己放在便笺本中的图形了。
如果不需要了,点击便笺本右侧的类似铅笔状的图标,可以对便笺本中的图形进行修改。如下图:
点击图形上的“×”可以删除掉该图形,点击图形下的名称可以修改图形的名字,也可以导入其它图形,或添加图片。
修改完点击保存即可。