邊城工具集：繪圖及標註工具
寫文件、寫部落格難免需要繪圖，筆者在前端時間寫專欄《JavaScript 全棧工程師養成記》 的時候，就使用了大量的繪圖工具來繪製插圖，受到讀者們的要求和鼓勵，決定將自己使用的繪圖工具和方法展示出來，供大家參考、批評、指正。
根據筆者的習慣，介紹的工具幾乎都是免費或個人使用免費的，如果有收費工具，筆者會特別說明。
紙、筆和掃描軟體
最先介紹的工具，非常傳統，就是紙和筆。不過紙筆繪製的內容要在呈現在電子文件中或者在網路上分享，還需要電子化，掃描器固然是非常專業的裝置，但不是人人都能找一這樣的條件。不過智慧手機幾乎人人都有，安裝一個掃描軟體就能解決問題。掃描軟體很多，筆者一直使用的是老牌軟體“全能掃描王”。
先秀兩張圖：
紙筆是在思考問題時能使用的最直接，也最方便的工具。提筆便畫，不受軟體格式約束（筆者在使用軟體時常常會被一些細節分散注意力，比如字型、顏色、線條粗細等）。
當然紙筆繪製的一般都是草圖，要想放在正式文稿當中還需要加工，這個時候就要用一些繪圖類軟體了。比如上面兩張圖，筆者要把它們繪製成正式文稿的話，使用腦圖工具 MindMaster 來繪製第一張，使用 WPS 演示（或 PowerPoint）來繪製第二張。
腦圖工具：MindMaster
腦圖又稱思維導圖，是將思維過程繪製出來的最佳工具之一。筆者曾使用過多款思維導圖工具，比如開源的 FreeMind，曾經具有免費版本的 XMind，線上的百度腦圖，及至目前最常用的 MindMaster。比如前面提到的《JavaScript 全棧工程師養成記》，筆者就用腦力繪製了一個大綱
腦圖可以很好地表達具有分支結構的內容，也可以對其中一些節點進行連續關聯。但是如果跨分支的關聯節點太多，腦圖就可能會畫得比較亂，還是需要一些技巧和細緻調整來保持腦圖的整潔程度。
用辦公套件畫示意圖
辦公套件，當然是指 WPS 或 Microsoft Office。筆者近年來比較習慣使用 WPS，尤其是 WPS 2019 的介面的操作非常人性化，當然部分功能還不如 Microsoft Office 強大，但筆者認識常規應用上 WPS 的體驗已經超過 Office 了。筆者養成這個習慣是因為 WPS 個人版本免費，雖然新買的電話贈送了 Office 2016 家庭版，但是用習慣了，只有在遇到 WPS 不能很好處理的問題時會換 Office 來處理。
套件中，最常用的兩個工具是幻燈片和電子表格。幻燈片本身的重點就在於示意，所以用它來繪製示意圖非常合適，還是拿一張專欄中的插圖來舉例：
而且還可以用來畫一些簡單的原型圖：
但如果是一些開頭比較規則的圖，不管是原型圖還是示意圖，都可以用電子表格來繪製，比如這樣在“JavaScript/TypeScript 編寫俄羅斯方塊”系列文章中用的大部分插圖都是電子表格繪製的，這是其中一張
相關閱讀
除此之外，筆者還在視訊《從JS到TS開發數獨遊戲（JS版）》的 2-2 節中利用電子表格講解了洗牌演算法。
還有 TS 版在這裡
除此之外，繪製統計圖形，更是電子表格的強項。當然如果想把統計圖形繪製得漂亮一點，可以使用百度 ECharts，它官方示例 中的資料都是可以修改的 —— 找個自己中意的示例，改下資料就好。
強大的看圖工具：FastStone Image Viewer
FastStone Image Viewer，簡稱 FSIV， 是筆者非常喜歡的一款看圖工具，功能強大，而且免費。它提供好幾種模式（列表、預覽、視窗、全屏、幻燈片等），但這不是重點。重點是它還有很多常用的圖片處理功能：
- 常用的縮放、裁剪、旋轉、翻轉等，尤其是它的“任意角度旋轉”功能，非常貼心的提供了根據使用者繪製水平或垂直參考線來旋轉，不需要去猜角度（選單：編輯→放置→任意角度旋轉）
- 補光/減光：可以分別對陰暗區域和明亮區域進行亮度調整，可以調整對比度和飽和度
- 編輯工具板：可以對圖片新增矩形（正方形）、橢圓（圓）、線條、箭頭、高亮區域、文字、插圖等。不過筆者少用這個功能，因為有後面要介紹的 Snipaste 截圖工具。
- 調整色階、曲線、銳化、模糊、去噪音等，尤其是“調整色彩”功能，可以在一個介面上調整亮度、對比度、伽瑪、紅綠藍通道、色調和飽和度，都快趕上 Photoshop 了。
- 幾種效果：灰度、負片、懷舊（老照片）
- 還有幾種特效：浮雕、素描、油畫等
你以為這就完了，No, No, No，FSIV 還有強大的批處理功能，列表瀏覽模式下，多選幾張圖片，在右鍵選單“工具”中就可以看到批量重新命名和批量轉換功能。
-
批量重新命名很靈活，可以指定自增序號的模板，還可以使用查詢替換，恐怕比很多專門的重新命名工具還專業
-
批量轉換就更專業了，轉換圖片格式這是最基本的，在高階屬性裡還可以調整大小、旋轉、裁切、水印……舉例來說，調整大小的時候可以按畫素、百分比調整，還可以按一條邊（可以是長邊、短邊、高、寬）為基礎來調整。功能太多，讀者可以自行研究。
FastStone 還有非常厲害的列印功能。隨便選一張圖，點選列印（或 Ctrl+P），會彈出列印設定框，在這裡可以按順序增加若干張其它圖片，然後列印成 PDF，非常方便（如果只是輸出到印表機，批量或單張並沒多大差別）。
順帶說明一下，這家公司還出品了一個叫 FastStone Capture 的截圖工具，也是非常好用的，可惜從 v5.4 開始收費。不過基本的截圖功能 FSIV 也提供哦。還有一點需要說明的是，FastStone 的官網國內不能開啟，大家在各軟體站下載時請注意安全，筆者推薦使用電腦管家之類的具有軟體管理功能的安全軟體下載。
截圖工具 Snipaste
截圖工具很多，甚至 Windows 都自帶截圖，哪怕是老版 Windows，也可以用 PrintScreen 截全屏，用 Alt+PrintScreen 截當前視窗。何況還有 QQ 截圖、瀏覽器截圖、輸入法截圖等。
在眾多的截圖工具中，筆者偏愛 Snipaste，因為它使用簡單，功能全面。官網已經介紹得非常全面，我也不會比官網描述得更好。總的來說，筆者喜歡它主要因為以下幾個功能：
- 標註：線條、三種箭頭、矩形、橢圓、文字、馬賽克，粗細可調，顏色可調，透明度可調……
- 截圖後可以直接生成貼圖視窗，把圖片呈現在桌面上（就像便箋那樣），可縮放（Ctrl+滾動）可調透明度（Shift+滾動）
- 有取色功能
說起來語言不多，用起來是真的強大。Snipates 現在還提供收費的專業版，其中增值的功能一般來說也不怎麼需要，不過筆者為了支援作者繼續開發，毫不猶豫的購買了專業版。
繪製流程圖、序列圖等
Visio？太貴，用不起。
筆者曾經也用WPS演示來繪製流程圖，簡單的還行，複雜點的真心累。後來發現了線上的 ProcessOn，不過現在也已經收費了，免費使用者有繪圖量的限制。當然，不嫌麻煩的話，可以畫完匯出後刪除再新建。
後來在使用 Markdown 的過程中，筆者發現了通過文字描述來繪製流程圖的神工具。先來看看效果
這是來自“作業部落（CMD Markdown）”的截圖，作業部落是個免費的線上 Markdown 編輯器，可線上儲存，也提供了客戶端下載。除了流程圖，它還支援繪製序列圖的甘特圖，語法參考如下：
除了作業部落，筆者還經常使用有道雲筆記的 Markdown 功能。有道雲筆記也提供了通過文字描述來繪製流程圖、序列圖和甘特圖的功能。
有這些工具，畫圖方便多了。
其它工具
美工把設計圖交給前端的時候，前端會不斷的問，這裡距離多少，那裡顏色值是什麼……真的累。所以美工交設計圖的時候，通常會進行標註，這類工具，最有名的當然是馬克鰻，基礎功能免費可用。除此之外騰訊 CDC 還出品過一款 Darado
繪製原型圖的工具比較多，但免費好用的不多。墨刀是一個線上的原型圖工具，不僅可以畫原型圖，還可以繪製頁面流，免費版受限。
ER 圖繪製工具，沒找到免費好用的。PowerDesigner 應該是首選，據說 MySQL Workbench 也能畫，沒試過。
筆者使用的繪圖工具並不算多，但是日常工作也夠用了。如果您有什麼好的工具，也請向筆者推薦哦！