drawio是一款強大、免費的繪圖工具（基本可以替代收費的visio等），使用起來非常方便，支持網頁版使用（網頁版可以自己部署一套）以及客戶端使用（支持windows，MacOS以及Linux），
該專案開源在github上的原始碼：https://github.com/jgraph/drawio-desktop
官方的教程鏈接：https://www.diagrams.net/doc/
不想看文章的可以看下我在bilibili上錄的視頻：https://www.bilibili.com/video/BV18V411J7Ns
接下來本文會簡單介紹一些基礎操作，通過這些基礎操作基本可以滿足大部分人的應用需求，
目錄
- 網頁端使用
- 桌面端下載
- 語言設定
- 開始繪圖
- 添加元素
- 元素對齊
- 元素等距分布
- 連接元素
- 添加文字
- 添加公式
- 添加圖片
- 添加表格
- 自由繪圖
- 組合元素
- 保存元素模板
- 保存
- 保存檔案
- 匯出圖片
- 常用快捷鍵
網頁端使用
懶得安裝的直接使用下面這個鏈接直接開始繪圖：
https://www.draw.io
桌面端下載
在github專案右側有個release，這里是作者打包生成好的安裝檔案，比如現在最新的版本是14.5.1點擊進去后，可以看到如下圖所示的下載頁面，根據你自己的系統以及硬體平臺選擇合適的安裝檔案，
語言設定
安裝完后第一次打開默認界面是英文的，如果想使用中文，可以點擊Language接著選擇自己喜歡的語言，如果想提升英語的還是默認吧哈哈，
選擇簡體中文，
設定完語言后記得重啟下軟體，
開始繪圖
打開drawio后，點擊創建新繪圖：
接著會提示你選擇一個模板，這里直接創建一個空白框圖（可根據自身情況選擇）
創建完后，如圖所示：
添加元素
- 選擇你需要的元素拖入畫布 (左側有官方提供的各種型別元素，點擊左下角更多圖形可以找到更多類別)
- 選中元素后可使用滑鼠點擊元素邊緣上的點對元素進行放大/縮小等操作（元素右上角的旋轉標志可以選擇元素）
- 雙擊元素可以輸入文字
- 選中元素后可在右側的樣式中修改元素的樣式（顏色等）
- 在右側的文本中可以修改文字的字體、大小以及顏色等等
- 在右側的調整圖形中可以對元素的位置、大小以及角度等進行更加精細的調整
元素對齊
當要對齊多個元素時，選擇多個元素（可通過ctrl+滑鼠左鍵選擇多個目標），然后點擊調整圖形 -> 對齊 然后選擇你想要的對齊方式，
元素等距分布
當要等距擺放多個元素時，選擇多個元素（可通過ctrl+滑鼠左鍵選擇多個目標），然后點擊調整圖形 -> 等距分布 然后選擇你想要的分布方式，
連接元素
當把滑鼠放置元素上（注意沒有點擊，只是放置）會出現如下圖所示的標識，四個箭頭（用紅圈標出的部分），16個小叉叉（用綠色的圈圈標出），如果點擊了元素只會顯示四個箭頭，
連接的操作有很多種，這里只簡單講一種，在剛剛說的 當把滑鼠放置元素上 后在元素周圍出現各種標識，你可以自己隨便選擇一個作為連接線的起始位置，滑鼠左鍵按下（不要松）拖動滑鼠移至你想連接的位置，
連接后在右側的樣式中可以修改連接線的樣式、連接方式、顏色、粗細、線形等等，
添加文字
- 在通用里拖一個
Text元素放到你想放的位置 - 雙擊
Text元素編輯文字 - 在右側的
文本中對文字的顏色、字體、大小等進行編輯
添加公式
可參考官方給的檔案：https://www.diagrams.net/doc/faq/math-typesetting
在使用公式功能之前需要打開數學排版，在其他 -> 數學排版 在點擊后會顯示一個勾勾，然后就能用了：
現在官方支持三種格式，比如寫博文中常用的LaTeX格式，用起來也非常方便，直接把公式復制到Text元素里就行了，
$$\sqrt{3×-1}+(1+x)^2$$
如果不了解LaTeX公式不了解可以看下下面幾個連接：
幫助檔案： https://www.latexlive.com/help
在線公式編輯器： https://www.latexlive.com/
添加圖片
有時，需要使用一些現成的圖片，點擊上方的加號，再點擊圖片按鈕，
接著你可以通過打開按鈕選擇自己本地的圖片，或者通過網上圖片的url直接載入進來，
添加表格
點擊上方的表格圖示，然后拖動滑鼠可以選擇自己需要的表格大小（行數和列數），
選中表格，在右側的調整圖形中可以調整表格的大小、位置等屬性，
自由繪圖
有時一些特殊的圖案軟體中并沒有提供，這時可以使用自由繪圖功能自己去繪制，點擊上方的加號，再點擊自由繪圖，會彈出一個自由繪圖視窗，
點擊開始繪圖按鈕就可以自己用滑鼠隨便繪制，繪制完后點擊結束繪圖按鈕，剛付訓制好的圖案就會變成一個元素隨意使用，
組合元素
同時選中多個元素，在元素上點擊滑鼠反鍵，再點擊組合即可組合成一個元素，
保存元素模板
有時一些元素（可能是你自己組合設計的新元素）經常被用到，我們可以將其保存成一個模板方便下次使用，如下圖所示，將需要保存的元素用滑鼠拖至左側的 便筏本 中，這樣以后都可以使用到，
點擊便筏本的鉛筆符號可以編輯管理自己的便筏本，
保存
保存檔案
在左上角點擊 檔案 -> 保存 將繪圖檔案保存到指定路徑，
匯出圖片
在左上角點擊 檔案 -> 匯出為 將繪圖檔案匯出成指定格式，一般為了方便使用會匯出成PNG或者JPEG格式等，
比如我要將圖片保存成PNG格式的圖片，軟體會提示是否要透明背景、陰影、網格等，另外還有個邊框寬度引數，這個引數代表輸出影像時是否需要在圖片邊緣增加一些空白邊緣，默認是0，如果需要可以自己設定，
大家可以簡單對比下設定和不設定邊緣寬度的區別，
常用快捷鍵
| 快捷鍵 | 作用 |
|---|---|
| CTRL + C | 復制元素 |
| CTRL + X | 剪切元素 |
| CTRL + V | 粘貼元素 |
| CTRL + Z | 撤銷操作 |
| CTRL + S | 保存繪圖（建議經常保存，養成良好習慣） |
| CTRL + A | 選中全部元素 |
| DELETE | 洗掉選中元素 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/279831.html
標籤：其他
下一篇：css背景和邊框標簽總結