干掉visio，這個畫圖神器真的絕了！?。?/h1>
前言
大家好，我是3y
看過我以往文章的小伙伴可能會發(fā)現(xiàn)，我的大部分文章都有很多配圖。我的文章風(fēng)格是圖文相結(jié)合，更便于大家理解。
最近有很多小伙伴發(fā)私信問我：文章中的圖是用什么工具畫的。他們覺得我畫的圖風(fēng)格挺小清新的，能夠讓人眼前一亮。
先上幾張圖讓大家看看效果：
說實(shí)話，問我的人太多了，我真的沒法一個個回復(fù)。同時問我的人多，也恰恰說明了這個工具的優(yōu)秀。
今天特地寫一篇介紹畫圖工具的文章，給有需要的朋友一個參考。
1. 用什么畫的圖？
對于畫流程圖的工具，之前大家用得比較多的可能是：visio和process on了。
visio是微軟的一款畫圖軟件，需要在電腦上安裝，正版軟件是付費(fèi)的，但網(wǎng)上也可以搜到很多破解版。它是我用過的最早的畫流程圖工具了，后面使用mac電腦辦公之后，就沒有用過它了，之前覺得它跨電腦辦公有點(diǎn)不方便。
process on是一款免費(fèi)在線畫圖工具，功能非常強(qiáng)大。除了常規(guī)的各種流程圖之外，對于思維導(dǎo)圖支持也非常友好。但有個缺點(diǎn)是只能免費(fèi)保存最近9張圖，想保留更多的圖，需要付費(fèi)升級。
前面的兩款畫圖工具，說到底還是收費(fèi)的，對于喜歡白嫖的我們來說，有點(diǎn)無法接受。那么，有沒有一款免費(fèi)、在線、功能強(qiáng)大的畫流程圖的工具呢？
答：有，可以使用：diagrams。
沒錯，我文章中的圖都是用diagrams畫出來的，也可以叫它：draw.io，它已經(jīng)成為了我畫圖首選工具。
這款畫圖工具的官網(wǎng)地址是：https://app.diagrams.net/，它的前身是：https://draw.io/。這兩個url都能訪問。
同時它也提供了離線版的畫圖軟件，大家可以自己下載diagrams的安裝軟件，不過有個壞處是它是收費(fèi)的。
所以，我用的最多的還是在線版的。
2. 如何進(jìn)入畫圖界面？
從上面已經(jīng)知道，我的文章都是用diagrams畫流程圖的。
但如何進(jìn)入diagrams的畫圖界面呢？
在瀏覽器上輸入diagrams的官網(wǎng)地址，我平時喜歡輸入：https://draw.io/，因?yàn)樗容^好記。
第一次訪問的時候有點(diǎn)慢，因?yàn)樗跏蓟恍〇|西。
接下來，會彈出一個窗口，讓我們選擇畫的圖，需要保存到哪里。
它主要支持四種：
OneDrive：即云 Device：即設(shè)備 Github Gitlab
我目前為了圖方便，用的最多的是Device，它可以把畫的圖保存到本地電腦，也可以從本地電腦導(dǎo)入已有的圖。
其實(shí)如果可以的話，把圖保存到Github，也是個不錯的選擇。
接下來，會彈出一個窗口，讓你選擇是Create New Diagram（創(chuàng)建新流程圖），還是選擇Open Existing Diagram（打開已有的流程圖）。
我們第一次進(jìn)來，當(dāng)然是選擇創(chuàng)建新流程圖了。
然后，進(jìn)入了畫流程圖的主界面：
3 畫圖界面的組成部分
diagrams的工作界面主要是由以下幾個部分組成：
此外，在這里順便說一句，如果你想修改流程圖名稱的話，可以雙擊左上角的：Untitled Diagram.drawio這幾個字，會彈出如下窗口：
在這個窗口中可以修改流程圖的名稱和文件類型，默認(rèn)是.drawio格式的。
下面用一張圖總結(jié)一下，diagrams的工作界面主要組成部分：
3.1 菜單欄
File菜單：包含了一系列的文件操作，包括：新建、打開文件、打開最近的文件、保存文件、另存為文件、分享文件、重命名、拷貝文件、導(dǎo)入、導(dǎo)出、打印、關(guān)閉等。Edit菜單：包含了一系列工作區(qū)的操作，包括：回退、撤回、剪切、復(fù)制、粘貼、刪除、查找、替換、編輯、編輯屬性、選擇、全選等。View菜單：包含了一系列的視圖操作，包括：恢復(fù)默認(rèn)布局、大綱視圖、圖層、標(biāo)簽、網(wǎng)格、滾動條、全屏等。Arrange菜單：包含了一系列圖形排列操作，包含：在前面、在后面、插入圖形、對齊等。Extras菜單：包含了一系列額外的操作，包含：主題、展開、收縮、插件、編輯畫圖區(qū)、配置等。Help菜單：主要包含一系列全局的操作，包含：搜索、快捷鍵、關(guān)于等。
3.2 工具欄
工具欄中包含了一些常用的功能，比如：圖片尺寸、放大、縮小、退回、撤銷、刪除、在前、在后、背景色、字體顏色、連接、陰影、添加表格、添加圖形、全屏、展開、收縮等。
這些功能真的太實(shí)用了。
3.3 左邊圖形區(qū)
這個區(qū)域可以選擇我們畫圖時，需要的圖形，默認(rèn)有這7類圖形。
如果不滿足要求，可以點(diǎn)擊 More Shapes 按鈕，選擇更多類型。
上圖中我另外加了IOS類的圖形。
我個人喜歡使用General類的圖形：
里面常用的圖形都有，畫一般的流程圖是夠用的。當(dāng)然你也可以根據(jù)個人喜歡，選擇更多的類型畫圖。
3.4 畫圖區(qū)
畫圖區(qū)是最重要的地方了，你的流程圖是在這片區(qū)域完成的。
你可以在左邊的圖形區(qū)選擇好圖形之后，用鼠標(biāo)拖到畫圖區(qū)。也可以直接在畫圖區(qū)復(fù)制已有的圖形。
還可以加網(wǎng)格：
右鍵空白的地方，會出現(xiàn)一些操作選項(xiàng)：
右鍵某個具體圖形，會出現(xiàn)一些圖形相關(guān)的選項(xiàng)：
3.5 右邊樣式區(qū)
右邊樣式區(qū)可以說是diagrams的靈魂。
選擇的圖形，在畫圖區(qū)默認(rèn)是這樣的：
一眼看過去，顯得非常單調(diào)。但如果在右邊樣式區(qū)，我加了一些樣式之后，圖形馬上變得不一樣了。
對于文本樣式還有挺多功能可以設(shè)置的
3.6 底部
底部主要展示的是每頁的名稱。
點(diǎn)擊左側(cè)三個點(diǎn)：
可以切換、插入、刪除和重命名頁面。
點(diǎn)擊右側(cè)的加號：
可以立刻新增頁面。
我們每次畫圖需要在某個頁面上操作。但如果你需要畫的圖很多，可以使用頁進(jìn)行歸類，方面今后維護(hù)。不太建議，一頁上畫的圖太多，不然畫圖時會非?？ā?/span>
總結(jié)
本文主要介紹了diagrams畫圖工具，它是一款免費(fèi)的在線畫圖工具，也叫做draw.io。它的功能非常強(qiáng)大，包括：菜單欄、工具欄、左邊圖形區(qū)、畫圖區(qū)、右邊樣式區(qū)、底部等。
同時還介紹了如何進(jìn)入畫圖區(qū)。
當(dāng)然本文只是拋磚引玉，給大家介紹了diagrams的一小部分功能。它的強(qiáng)大之處，需要大家自己多動手摸索。
下面用一張圖給大家展示一下，我是如何使用diagrams畫圖的：
好了，今天的內(nèi)容先分享到這里，我們下期再見。
《對線面試官》公眾號還在持續(xù)分享面試題，沒關(guān)注的同學(xué)可以關(guān)注一波！這是austin項(xiàng)目的上一個系列，質(zhì)量桿桿的
austin項(xiàng)目Gitee鏈接：https://gitee.com/zhongfucheng/austin
austin項(xiàng)目GitHub鏈接：https://github.com/ZhongFuCheng3y/austin
前言
大家好，我是3y
看過我以往文章的小伙伴可能會發(fā)現(xiàn)，我的大部分文章都有很多配圖。我的文章風(fēng)格是圖文相結(jié)合，更便于大家理解。
最近有很多小伙伴發(fā)私信問我：文章中的圖是用什么工具畫的。他們覺得我畫的圖風(fēng)格挺小清新的，能夠讓人眼前一亮。
先上幾張圖讓大家看看效果：說實(shí)話，問我的人太多了，我真的沒法一個個回復(fù)。同時問我的人多，也恰恰說明了這個工具的優(yōu)秀。
今天特地寫一篇介紹畫圖工具的文章，給有需要的朋友一個參考。
1. 用什么畫的圖？
對于畫流程圖的工具，之前大家用得比較多的可能是：visio和process on了。
visio是微軟的一款畫圖軟件，需要在電腦上安裝，正版軟件是付費(fèi)的，但網(wǎng)上也可以搜到很多破解版。它是我用過的最早的畫流程圖工具了，后面使用mac電腦辦公之后，就沒有用過它了，之前覺得它跨電腦辦公有點(diǎn)不方便。
process on是一款免費(fèi)在線畫圖工具，功能非常強(qiáng)大。除了常規(guī)的各種流程圖之外，對于思維導(dǎo)圖支持也非常友好。但有個缺點(diǎn)是只能免費(fèi)保存最近9張圖，想保留更多的圖，需要付費(fèi)升級。
前面的兩款畫圖工具，說到底還是收費(fèi)的，對于喜歡白嫖的我們來說，有點(diǎn)無法接受。那么，有沒有一款免費(fèi)、在線、功能強(qiáng)大的畫流程圖的工具呢？
答：有，可以使用：diagrams。
沒錯，我文章中的圖都是用diagrams畫出來的，也可以叫它：draw.io，它已經(jīng)成為了我畫圖首選工具。
這款畫圖工具的官網(wǎng)地址是：https://app.diagrams.net/，它的前身是：https://draw.io/。這兩個url都能訪問。
同時它也提供了離線版的畫圖軟件，大家可以自己下載diagrams的安裝軟件，不過有個壞處是它是收費(fèi)的。
所以，我用的最多的還是在線版的。
2. 如何進(jìn)入畫圖界面？
從上面已經(jīng)知道，我的文章都是用diagrams畫流程圖的。
但如何進(jìn)入diagrams的畫圖界面呢？
在瀏覽器上輸入diagrams的官網(wǎng)地址，我平時喜歡輸入：https://draw.io/，因?yàn)樗容^好記。
第一次訪問的時候有點(diǎn)慢，因?yàn)樗跏蓟恍〇|西。
接下來，會彈出一個窗口，讓我們選擇畫的圖，需要保存到哪里。它主要支持四種：
OneDrive：即云 Device：即設(shè)備 Github Gitlab
我目前為了圖方便，用的最多的是Device，它可以把畫的圖保存到本地電腦，也可以從本地電腦導(dǎo)入已有的圖。
其實(shí)如果可以的話，把圖保存到Github，也是個不錯的選擇。
接下來，會彈出一個窗口，讓你選擇是Create New Diagram（創(chuàng)建新流程圖），還是選擇Open Existing Diagram（打開已有的流程圖）。我們第一次進(jìn)來，當(dāng)然是選擇創(chuàng)建新流程圖了。
然后，進(jìn)入了畫流程圖的主界面：
3 畫圖界面的組成部分
diagrams的工作界面主要是由以下幾個部分組成：此外，在這里順便說一句，如果你想修改流程圖名稱的話，可以雙擊左上角的：Untitled Diagram.drawio這幾個字，會彈出如下窗口：在這個窗口中可以修改流程圖的名稱和文件類型，默認(rèn)是.drawio格式的。
下面用一張圖總結(jié)一下，diagrams的工作界面主要組成部分：
3.1 菜單欄
File菜單：包含了一系列的文件操作，包括：新建、打開文件、打開最近的文件、保存文件、另存為文件、分享文件、重命名、拷貝文件、導(dǎo)入、導(dǎo)出、打印、關(guān)閉等。Edit菜單：包含了一系列工作區(qū)的操作，包括：回退、撤回、剪切、復(fù)制、粘貼、刪除、查找、替換、編輯、編輯屬性、選擇、全選等。View菜單：包含了一系列的視圖操作，包括：恢復(fù)默認(rèn)布局、大綱視圖、圖層、標(biāo)簽、網(wǎng)格、滾動條、全屏等。Arrange菜單：包含了一系列圖形排列操作，包含：在前面、在后面、插入圖形、對齊等。Extras菜單：包含了一系列額外的操作，包含：主題、展開、收縮、插件、編輯畫圖區(qū)、配置等。Help菜單：主要包含一系列全局的操作，包含：搜索、快捷鍵、關(guān)于等。
3.2 工具欄
工具欄中包含了一些常用的功能，比如：圖片尺寸、放大、縮小、退回、撤銷、刪除、在前、在后、背景色、字體顏色、連接、陰影、添加表格、添加圖形、全屏、展開、收縮等。
這些功能真的太實(shí)用了。
3.3 左邊圖形區(qū)
這個區(qū)域可以選擇我們畫圖時，需要的圖形，默認(rèn)有這7類圖形。如果不滿足要求，可以點(diǎn)擊 More Shapes 按鈕，選擇更多類型。
上圖中我另外加了IOS類的圖形。
我個人喜歡使用General類的圖形：
里面常用的圖形都有，畫一般的流程圖是夠用的。當(dāng)然你也可以根據(jù)個人喜歡，選擇更多的類型畫圖。
3.4 畫圖區(qū)
畫圖區(qū)是最重要的地方了，你的流程圖是在這片區(qū)域完成的。
你可以在左邊的圖形區(qū)選擇好圖形之后，用鼠標(biāo)拖到畫圖區(qū)。也可以直接在畫圖區(qū)復(fù)制已有的圖形。
還可以加網(wǎng)格：
右鍵空白的地方，會出現(xiàn)一些操作選項(xiàng)：
右鍵某個具體圖形，會出現(xiàn)一些圖形相關(guān)的選項(xiàng)：
3.5 右邊樣式區(qū)
右邊樣式區(qū)可以說是diagrams的靈魂。
選擇的圖形，在畫圖區(qū)默認(rèn)是這樣的：一眼看過去，顯得非常單調(diào)。但如果在右邊樣式區(qū)，我加了一些樣式之后，圖形馬上變得不一樣了。
對于文本樣式還有挺多功能可以設(shè)置的
3.6 底部
底部主要展示的是每頁的名稱。
點(diǎn)擊左側(cè)三個點(diǎn)：可以切換、插入、刪除和重命名頁面。
點(diǎn)擊右側(cè)的加號：可以立刻新增頁面。
我們每次畫圖需要在某個頁面上操作。但如果你需要畫的圖很多，可以使用頁進(jìn)行歸類，方面今后維護(hù)。不太建議，一頁上畫的圖太多，不然畫圖時會非?？ā?/span>
總結(jié)
本文主要介紹了diagrams畫圖工具，它是一款免費(fèi)的在線畫圖工具，也叫做draw.io。它的功能非常強(qiáng)大，包括：菜單欄、工具欄、左邊圖形區(qū)、畫圖區(qū)、右邊樣式區(qū)、底部等。
同時還介紹了如何進(jìn)入畫圖區(qū)。
當(dāng)然本文只是拋磚引玉，給大家介紹了diagrams的一小部分功能。它的強(qiáng)大之處，需要大家自己多動手摸索。
下面用一張圖給大家展示一下，我是如何使用diagrams畫圖的：好了，今天的內(nèi)容先分享到這里，我們下期再見。
《對線面試官》公眾號還在持續(xù)分享面試題，沒關(guān)注的同學(xué)可以關(guān)注一波！這是austin項(xiàng)目的上一個系列，質(zhì)量桿桿的
austin項(xiàng)目Gitee鏈接：https://gitee.com/zhongfucheng/austin
austin項(xiàng)目GitHub鏈接：https://github.com/ZhongFuCheng3y/austin