前言
作為一個技術人，總是需要一個稱手的畫圖工具，日常工作中，畫的最多的圖應該就是流程圖，思維導圖，如果開發時間比較久的話，可能還需要畫架構圖。剛開始的時候，我下載了各種工具，像Visio,Xmind,還有ProcessOn(后面收費)，軟件本身沒有問題，只是對于有需求的我們而言，真心沒有必要下載那么多的畫圖工具，因為Draw.io基本上可以滿足你的日常工作中的大部分需求。
Draw.io簡介
Draw.io是英格蘭一家公司開發的，該公司信條：為每個人提供免費、高質量的繪圖軟件。 這款工具無須注冊登錄，安全、開源、使用廣泛、功能強大。不僅支持在線版，還可以安裝到Windows、Mac進行離線使用 可繪制圖表有：流程圖、思維導圖、組織結構圖、文氏圖、信息圖、樓宇平面圖、網絡圖、架構圖、電氣工程圖、UML圖等。
其實，除了寫代碼，畫圖也是每個程序員必備的技能之一，我們經常接觸有流程圖、架構圖等等。想一想，要是在工作匯報的PPT上整幾張鎮住場子的圖，是不是倍兒有面子？
傳統的畫圖工具要安裝、使用復雜、新手也不容易畫出好看的圖。有些網站呢，又要各種注冊什么的，很麻煩。有這么一個網站，打開就能用，不用注冊。而且內置了操作的元素組件，還有各種漂亮的配色主題，能讓新手也能快速畫出專業好看的圖，是不是很贊？
所以說，Draw.io是一款非常適合程序員的繪圖神器，僅就免費、開源，就值得大贊推薦！
功能介紹
使用方式
Draw.io （現已更名為draw.net）支持Github、Google Drive、One drive等網盤同步，并且永久免費、完全開源。如果覺得使用Web版不方便，Draw.io 也提供了多平臺的離線桌面版可供下載。
官網地址
draw.io
PC端下載地址
https://github.com/jgraph/drawio-desktop/releases
截至發文時，最新版是23.15，可以根據自己的電腦下載對應的安裝包。
設置語言
不習慣使用英文操作界面的朋友 ，可點擊頂部菜單欄“其它” - “語言”切換為簡體中文即可，操作很友好，沒有什么奇奇怪怪的要求！
輔助視頻上手
draw.io 操作比較簡單，易上手，可通過【幫助】菜單——【快速入門視頻】來入門學習。
它的視頻是放在油管上面，所以需要科學上網。不過也沒關系，博客一搜或者自己摸索一下，都可以上手。
操作使用
打開軟件，選擇要創建的圖表類型
1.1 繪圖區
進入應用后，界面非常直觀簡潔。
**頂部菜單欄：**提供各項基本操作，
**左側部分：**圖形區，
**中間部分：**畫布，
**右側部分：**檢查器，根據當前的元素顯示不同的操作。
1.2 快速開始
整個界面的操作非常直觀，如果有相關繪圖軟件的使用經驗，相信已經可以上手繪圖了。
添加圖形
通過簡單的拖拽，即可在畫布上面添加圖形。
添加文本
在畫布上任何位置雙擊都可以添加文本框，在其中輸入文字
添加鏈接
在圖形上鼠標懸浮，在圖形上會浮現基本的鏈接點。這里分為外邊界藍色的大箭頭和邊上的x型焦點。這兩種鏈接方式稍有不同。
2. Draw.io 的基本操作
- 2.1 移動、多選、復制與刪除
圖形、鏈接、文本這三個元素都可以被選中。可以使用ctrl(Mac下為cmd，下同) + A 選擇全部元素，也可以使用ctrl + click(鼠標左鍵點擊)來進行特定元素的多選。選擇元素后可以進行以下操作：
移動：拖拽，
復制： ctrl + C，
復制并粘貼： ctrl + D，
刪除：delete鍵。
- 2.2 創建鏈接
上面提到過在圖形上面懸浮鼠標會出現圖形的鏈接點。
使用藍色箭頭進行快速鏈接
點擊藍色箭頭，會在指定方向創建鏈接，并在鏈接末端生成一個完全一致的元素
如果需要控制鏈接位置，可以按住ctrl鍵，拖拽藍色箭頭到指定位置。
- 鏈接圖形
在懸浮圖形后選擇x型焦點（會高亮為綠色）可以創建鏈接，拖拽鏈接線到目標圖形上的x型焦點，完成固定鏈接
在懸浮圖形后選擇x型焦點（會高亮為綠色）可以創建鏈接，拖拽鏈接線到目標圖形的邊上，直到圖形外邊變成藍色，松開鼠標，完成浮動鏈接
注意：固定鏈接是指鏈接始終固定在圖形的鏈接點上，不會隨著圖形移動而變化，浮動鏈接則會根據圖形的移動在圖形的邊上進行移動自適應。如下圖，固定鏈接始終固定在中間，而浮動鏈接則從上邊移動到了下邊
2.3 圖形替換與旋轉
通過快速創建鏈接的方式可以快速的創建圖形并進行鏈接，但是如果需要不同的圖形呢？
- 替換
從左側圖形庫選擇需要的圖形，拖拽到要替換的圖形中央，直到出現了一個替換的褐色標志，松開即可實現替換
- 旋轉
選中圖形，拖拽上方的旋轉箭頭即可
使用 Draw.io 繪制簡單流程圖
3.1 基本繪圖
掌握了圖形，文本和鏈接的基本操作，就可以實操來畫一個流程圖了，檢驗一下學習效果，如果哪一個部分不夠熟練可以溫習一下上面的教程
3.2 編輯樣式
選中元素在右側的檢查器可以修改元素的顏色，大小，布局等等。
3.3 保存和導出
在文件菜單可以執行另存為或是導出為，將圖片導出成自選的圖片格式或其他格式的文件。
常用技巧
4.1 如何在調整大小時保持寬/高比
若要在每次調整形狀大小時保持高寬比：
- 選擇形狀
- 轉到右側檢查器面板中的“調整圖形”選項卡
- 選擇“限制比例”
注意！必須為每個單獨的形狀設置此設置 - 默認情況下此行為處于關閉狀態。你可以選擇多個形狀，并在一次操作中為所有形狀啟用約束比例。
當然，你也可以在調整形狀大小時按住shift鍵，以在調整大小時保持高寬比。
- 4.2 組合形狀為容器
要將任何形狀變成容器，請先點擊要組合的形狀，然后在Windows上按 Ctrl + G，在macOS上按Cmd + G。若取消組合 Ctrl + Shift + U
演示如下：
若組合多個形狀，先按Ctrl + A，全選所有形狀，然后再 Ctrl + G 組合所有形狀為容器。
演示如下：
- 4.3 有四種連接形狀的方法
4.3.1 焦點/鼠標懸停
4.3.2 鼠標拖放
Ctrl + Drag 或 單擊藍色箭頭或Ctrl + Drag連接點。
4.3.3 選擇 + 側欄
從側邊欄拖動到藍色箭頭或圓圈
4.3.4 選擇 + 鍵盤
（Alt + X）單擊具有選定形狀或邊緣的側邊欄
按alt + shift +箭頭鍵（光標）以選定的形狀。
安裝包領取
在公眾號"安前碼后"回復" 給朕呈上來draw.io的安裝包 "即可領取！！
在公眾號"安前碼后"回復" 給朕呈上來draw.io的安裝包 "即可領取！！
在公眾號"安前碼后"回復" 給朕呈上來draw.io的安裝包 "即可領取！！
寫在最后
作為一個踩坑無數的開發人，對比了幾款工具之后，深刻感受到draw.io的香。如果需要安裝包的話，也可以在公眾號"安前碼后"回復"給朕呈上來draw.io的安裝包"即可領取。好了，今天的內容就分享到這里，分享不易，覺得有幫助的話，幫忙點贊 + 在看，比心，更多內容正在輸出中，你的點贊是我堅持輸出的反饋。
