draw.io在线绘图工具怎么用? draw.io超详细的小白入门教程
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
这篇文章重点介绍在线绘图工具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提供了便笺本的功能，用户可以把设置好的基本图形或一组图形拖拽到便笺本中，在后续设计中使用。
然后在你需要的地方，就像添加其它图形那样添加自己放在便笺本中的图形了。
如果不需要了，点击便笺本右侧的类似铅笔状的图标，可以对便笺本中的图形进行修改。如下图：
点击图形上的“×”可以删除掉该图形，点击图形下的名称可以修改图形的名字，也可以导入其它图形，或添加图片。
修改完点击保存即可。
相关文章
Draw.io怎么显示标尺? Draw.io流程图绘制工具标尺显示出来的教程
Draw.io怎么显示标尺？Draw.io是流程图绘制软件，很好用，下面我们就来看看Draw.io流程图绘制工具标尺显示出来的教程2023-10-17
最新评论