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