draw.io在線繪圖工具怎么用? draw.io超詳細(xì)的小白入門教程

這篇文章重點(diǎn)介紹在線繪圖工具draw.io的使用方法。
1、draw.io簡(jiǎn)介
draw.io在線繪圖工具是英格蘭一家公司開發(fā)的,該公司信條:為每個(gè)人提供免費(fèi)、高質(zhì)量的繪圖軟件。
這款工具無須注冊(cè)登錄,安全、開源、使用廣泛、且基于瀏覽器,免安裝。
可繪制:流程圖、思維導(dǎo)圖、組織結(jié)構(gòu)圖、文氏圖、信息圖、樓宇平面圖、網(wǎng)絡(luò)圖、架構(gòu)圖、電氣工程圖、UML圖等。
2、創(chuàng)建繪圖
在瀏覽器地址欄里輸入:draw.io,回車后,其自動(dòng)導(dǎo)航到:app.diagrams.net
并彈出如下界面:
上圖是保存路徑選擇存儲(chǔ)在當(dāng)前機(jī)器的設(shè)備中,“Create New Diagram”是新建圖,"Open Existing Diagram"是打開已存在的圖。
我們選擇新建圖,將會(huì)出現(xiàn)以下界面:
首先,選擇文件的保存格式,包括drawio自己的格式,png圖片格式,svg向量圖片格式、html文件格式和xml格式。
然后,我們輸入文件的名稱,注意不要把對(duì)應(yīng)的后綴給刪掉,其次,我們選擇創(chuàng)建圖的類型,這里選擇“Blank Diagram”,空白圖,最后點(diǎn)擊“Create”(創(chuàng)建)按鈕。
點(diǎn)擊“Create”后,它會(huì)讓你選擇保存到你的電腦的具體位置和名稱。
點(diǎn)擊“確定”后,進(jìn)入到如下的界面。
它基本包含菜單、工具欄,左側(cè)的圖形類別與選擇欄、右側(cè)的對(duì)象屬性設(shè)置欄、中間的工作區(qū)和底部的頁標(biāo)簽等。
3、定制繪圖類別
在界面左下角,點(diǎn)擊“More Shapes...”可以設(shè)置你想要的圖形類別:
在彈出的“Shapes”界面的左側(cè),你想繪制什么圖形,可以把其勾選上,然后在界面右下角點(diǎn)擊“Apply”(應(yīng)用)即可。這里勾選上了UML。
在draw.io中提供的UML圖形如下:
4、設(shè)置畫布等信息
在繪圖前,我們可以對(duì)繪圖的一些信息進(jìn)行設(shè)置。
在工作區(qū)空白處任意位置點(diǎn)擊一下,在右側(cè)出現(xiàn)如下的屬性設(shè)置欄。
4.1 Diagram選項(xiàng)卡
Diagram選項(xiàng)卡中,設(shè)置一些與繪圖圖形有關(guān)的內(nèi)容。
(1)View
Grid設(shè)置是否顯示網(wǎng)格,默認(rèn)是顯示的。Gride右側(cè)的數(shù)字用于指定網(wǎng)格的大小和網(wǎng)格線的顏色。
Page View設(shè)置繪圖區(qū)是否以頁視圖的形式顯示。Background用于設(shè)置背景色,默認(rèn)為白色,如果去掉勾選,則保存的圖的背景是透明色。
Shadow用于設(shè)置圖形是否有陰影,下面是無陰影和有陰影的效果對(duì)比:
(2)Options
Connection Arrows用于設(shè)置當(dāng)鼠標(biāo)在圖形對(duì)象上停留時(shí)是否顯示箭頭導(dǎo)向指引。下圖是有箭頭導(dǎo)引的效果:
當(dāng)鼠標(biāo)在某一個(gè)箭頭上稍作停留時(shí),該箭頭顏色變深,同時(shí)會(huì)出現(xiàn)該圖形可能能連接的圖形對(duì)象,這時(shí)在出現(xiàn)的圖形框中,點(diǎn)擊一個(gè)圖形,其自動(dòng)會(huì)創(chuàng)建一個(gè)點(diǎn)擊圖形的對(duì)象,并從原圖形向新建圖形上繪制一個(gè)箭頭。
或者,在圖形的一個(gè)箭頭上,按住鼠標(biāo)左鍵,鼠標(biāo)這時(shí)會(huì)變成一個(gè)十字箭頭,然后鼠標(biāo)可以移動(dòng)到其它圖形上,這時(shí)松開鼠標(biāo)時(shí),就從原圖形到目的圖形上創(chuàng)建了一個(gè)箭頭。
Connection Points設(shè)置圖形上是否出現(xiàn)鏈接點(diǎn),如上圖中的邊界上有8個(gè)×的標(biāo)記,這些標(biāo)記用于連接線的終點(diǎn)或起點(diǎn)。
Guides用于設(shè)置是否顯示導(dǎo)航線。如果勾選上此項(xiàng),當(dāng)在移動(dòng)對(duì)象時(shí),該對(duì)象與其他對(duì)象會(huì)出現(xiàn)位置導(dǎo)航線,以方便與其他對(duì)象之間設(shè)置對(duì)齊方式(頂端對(duì)齊、居中對(duì)齊、底端對(duì)齊)以及在3個(gè)或3個(gè)以上對(duì)象間設(shè)置水平間距或垂直間距。
AutoSave設(shè)置是否自動(dòng)保存,如果勾選此項(xiàng),軟件會(huì)定時(shí)保存,以免丟失設(shè)計(jì)信息。
(3)Paper Size
用于設(shè)置頁面信息,可以設(shè)置畫布(工作區(qū))的大小,以及布局方式。
4.2 Style選項(xiàng)卡
Style選項(xiàng)卡用于設(shè)置圖形的風(fēng)格。
Style選項(xiàng)卡中的內(nèi)容如下:
Sketch用于設(shè)置是否以草圖形式顯示圖形,勾選上之后的效果如下:
Rounded用于設(shè)置連接線的拐角是否以圓角形式顯示,勾選上后,連接線的折角將以圓角形式顯示。
未設(shè)置任何選項(xiàng)時(shí)的形狀:
設(shè)置了Rounded之后的效果:
Curved勾選上該項(xiàng)后,帶拐角的連接線將以弧狀顯示。
右側(cè)下面是預(yù)設(shè)的圖形顏色搭配、背景等信息,可以方便設(shè)計(jì)者快速的設(shè)置風(fēng)格。
5、繪制圖形并設(shè)置圖形屬性
5.1 添加圖形
在畫布左側(cè)的圖形對(duì)象列表中,點(diǎn)擊你想添加的圖形,則畫布中就會(huì)自動(dòng)創(chuàng)建一個(gè)該圖形的對(duì)象。
下面,我們?cè)诋嫴甲髠?cè)的UML圖形類別中選擇小人的形狀,它會(huì)自動(dòng)出現(xiàn)在工作區(qū)(畫布)中。
5.2 圖形的放大提示
當(dāng)鼠標(biāo)在畫布左側(cè)的圖形列表中的一個(gè)圖形上稍作停留時(shí),它會(huì)在右側(cè)放大顯示,同時(shí)提示你這個(gè)圖形的名稱,如下圖所示:
5.3 移動(dòng)圖形的位置
當(dāng)鼠標(biāo)在圖形上變成四項(xiàng)箭頭時(shí),我們按住鼠標(biāo)就可以把圖形移動(dòng)到你想要的位置上了。
或者在鼠標(biāo)變?yōu)樗捻?xiàng)箭頭形狀時(shí),我們按下鼠標(biāo)選中這個(gè)圖形,使用鍵盤上的四個(gè)方向鍵也可以微調(diào)圖形的位置。
當(dāng)鼠標(biāo)移到小人“Actor”上時(shí),且形狀是四向箭頭時(shí),我們按住鼠標(biāo)可以移動(dòng)小人的位置。
5.4 修改圖形的名稱
當(dāng)鼠標(biāo)在圖形上變成四向箭頭時(shí),我們可以雙擊它,修改其名稱,這里我們把添加的參與者圖形的名稱改成了讀者。
然后我們?cè)偻嫴贾刑砑右粋€(gè)用例,雙擊用例圖形,并把它的名稱修改為"借閱圖書"。
5.5 設(shè)置圖形的屬性
選中一個(gè)圖形,我們可以在右側(cè)的屬性欄中修改其相關(guān)屬性。
我們來修改一下剛才添加的用例的相關(guān)屬性。
選中用例“借閱圖書”后,右側(cè)出現(xiàn)了屬性設(shè)置欄。
(1)Style
用于設(shè)置圖形的風(fēng)格。
上面那些帶顏色的矩形框是圖形的預(yù)制風(fēng)格,你可以點(diǎn)擊其中一個(gè),則圖形會(huì)變成與其一致的邊框顏色和填充色。
- Fill用于設(shè)置圖形的填充顏色。當(dāng)下面的Sketch選中時(shí),這里還可以指定填充的風(fēng)格,如斜線、Z形線、點(diǎn)等。
- Gradient用于設(shè)置圖形的漸變填充色。
- Line設(shè)置是否顯示邊框線,以及邊框線的風(fēng)格。
- Perimeter用于設(shè)置邊緣的大小,當(dāng)有連接線時(shí),連接線到達(dá)邊緣位置即可,而不一定非要到圖形的邊界上。
- Opacity用于設(shè)置圖形的透明度。0完全透明,100完全不透明。
- Shadow用于是否顯示陰影。
- Sketch用于設(shè)置圖形是否以草圖風(fēng)格顯示。
(2)Text
用于設(shè)置圖形上文本的樣式。
設(shè)置的內(nèi)容包括由上到下,由左到右依次為:
- 字體名稱、是否加粗、是否斜體、是否加下劃線、是否垂直顯示文本、字體大小、文本對(duì)齊方式、文本在圖形內(nèi)的位置(Top、Middle、Bottom);
- Postion用于指定文本在圖形外的位置(Top Left、Top、Top Right、Left、Center、Right、Bottom Left、Bottom、Bottom Right);
- Font Color用于設(shè)置字體顏色;
- Background Color用于設(shè)置文本背景色;
- Border Color用于設(shè)置文本范圍邊界框的顏色;
- Word Wrap設(shè)置文本是否自動(dòng)折行;
- Formatted Text:格式化的文本;
- Opacity設(shè)置文本的透明度;
- Spacing用于設(shè)置文本的內(nèi)邊距。
(3)Arrange
Arrange選項(xiàng)卡中的內(nèi)容主要用于設(shè)置圖形的排列信息。
To Front:將圖形對(duì)象調(diào)整到最頂層;
To Back:將圖形對(duì)象調(diào)整到最底層;
Bring Forward:往上層移動(dòng);
Bring Backward:往下層移動(dòng);
Size:設(shè)置圖形的寬度和高度。
Constrain Proportions:設(shè)置圖形的長度和寬度時(shí)保持長寬比不變。
Position:圖像在畫布中的位置。
Angle:調(diào)整對(duì)象旋轉(zhuǎn)的角度。
Flip:翻轉(zhuǎn)對(duì)象,包括水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)。
6、設(shè)置連接線的屬性
選中某個(gè)連接線或箭頭時(shí),其在右側(cè)的屬性欄如下圖所示:
這里重點(diǎn)介紹與其他圖形不同的地方。
6.1 Style選項(xiàng)卡
Line:勾選上后,會(huì)顯示箭頭和連接線,否則將會(huì)被隱藏。
下拉列表中的Sharp、Rounded和Curved用于設(shè)置帶拐角的鏈接線風(fēng)格。Sharp選項(xiàng)的拐角將會(huì)比較銳利,Rounded的拐角將以圓角形式顯示,Curved選項(xiàng)將使連接線以弧的形式顯示。這跟4.2中的內(nèi)容的設(shè)置效果相同。
接下來的設(shè)置用于指定鏈接線的風(fēng)格:
第一個(gè)用于設(shè)置鏈接線的種類。
包含4種,如下圖所示:
第2個(gè)用于設(shè)置線型:
第3個(gè)用于設(shè)置線的粗細(xì),默認(rèn)為1磅。
第2行第1個(gè)用于設(shè)置鏈接線的拐角風(fēng)格。
其風(fēng)格從上到下表示如下:
剩下的那兩個(gè)用于設(shè)置箭頭和箭尾的風(fēng)格。
設(shè)置None的話,表示該端沒有箭頭。
Line end和Line start分別用于設(shè)置箭尾和箭頭舉例圖形的間隙以及箭頭的大小。
Line jumps用于設(shè)置相交線處的風(fēng)格及大小,可選取的值有:None,Arc,Gap,Sharp和Line。其風(fēng)格從左到右依次如下圖所示:
- Opacity用于設(shè)置線的透明度。
- Shadow用于指定線是否有陰影。
- Sketch用于指定線是否以草圖形式顯示。
6.2 Text選項(xiàng)卡
Text選項(xiàng)卡與其他地方相同,不再贅述。
6.3 Arrange選項(xiàng)卡
Arrange選項(xiàng)卡中的內(nèi)容如下:
跟其他地方不同之處在于:
- Start用于指定線的開始位置坐標(biāo)位置;
- End用于指定線的結(jié)束位置坐標(biāo);
- Reverse用于使箭頭和箭尾位置互換。
注意:對(duì)于線的相關(guān)屬性設(shè)置完畢后,在接下來繪制其他線時(shí)也將使用相同的屬性(如線型、線的顏色、粗細(xì)等)進(jìn)行繪制。
7、保存圖形
正常情況下,你在新建圖時(shí),讓你指定了保存設(shè)備和圖的名稱,在你每次修改或移動(dòng)圖形時(shí),他都會(huì)自動(dòng)保存。你可以使用其菜單“File”中的“Save”來執(zhí)行保存,或選擇“File”中的“Save as...”另存為一個(gè)新圖形。
8 一些其它問題
(1) 能否改成中文
可以,在界面右上角有一個(gè)地球圖標(biāo),點(diǎn)擊它后,在最下邊有一個(gè)“簡(jiǎn)體中文”,選擇后,他的界面就會(huì)變成中文的。
下圖中的紅色橢圓處就是設(shè)置界面顯示語言的。
設(shè)置完后,刷新界面(注意,要是有內(nèi)容的話,你記得要先保存)就變成了中文界面。
(2)繪圖區(qū)過小怎么辦
有三種方式可以增加繪圖區(qū)的大小,一個(gè)是使用全屏功能,如上圖中紅色矩形中的第一個(gè)圖標(biāo),這個(gè)圖標(biāo)將使用全屏功能來繪圖;二是把右邊的屬性框折疊起來,上圖中紅色矩形框的第2個(gè)圖標(biāo)就是這個(gè)功能;三是把上方過高的部分折疊起來,上圖中紅色矩形框中第3個(gè)圖標(biāo)就是這個(gè)功能。
另外,你可以通過左側(cè)垂直導(dǎo)航條上的手柄來改變繪圖區(qū)的大小,如下圖所示:
鼠標(biāo)滑到上面時(shí)會(huì)變成如下圖所示的形狀。
這時(shí),你按住鼠標(biāo)左鍵,可以改變繪圖區(qū)的大小。
(3)如何放大或縮小圖
比較簡(jiǎn)單的方式是按住CTRL鍵,同時(shí)滾動(dòng)鼠標(biāo)輪,上滾放大圖,下滾縮小圖。你也可以使用工具欄中的相關(guān)功能,如下圖:
下拉列表中給出了放大或縮小的比例,你可以選擇一個(gè),或者使用下拉列表右側(cè)的帶加號(hào)的圖標(biāo)來放大圖,或使用帶減號(hào)的圖標(biāo)來縮小圖。
(4)能否把個(gè)人設(shè)置好的圖形作為標(biāo)準(zhǔn)圖形用于后續(xù)設(shè)計(jì)
draw.io提供了便箋本的功能,用戶可以把設(shè)置好的基本圖形或一組圖形拖拽到便箋本中,在后續(xù)設(shè)計(jì)中使用。
然后在你需要的地方,就像添加其它圖形那樣添加自己放在便箋本中的圖形了。
如果不需要了,點(diǎn)擊便箋本右側(cè)的類似鉛筆狀的圖標(biāo),可以對(duì)便箋本中的圖形進(jìn)行修改。如下圖:
點(diǎn)擊圖形上的“×”可以刪除掉該圖形,點(diǎn)擊圖形下的名稱可以修改圖形的名字,也可以導(dǎo)入其它圖形,或添加圖片。
修改完點(diǎn)擊保存即可。
相關(guān)文章
Draw.io怎么顯示標(biāo)尺? Draw.io流程圖繪制工具標(biāo)尺顯示出來的教程
Draw.io怎么顯示標(biāo)尺?Draw.io是流程圖繪制軟件,很好用,下面我們就來看看Draw.io流程圖繪制工具標(biāo)尺顯示出來的教程2023-10-17