程序員必備的畫圖工具
大家好,我是程序汪
最近經(jīng)常有小伙伴問文章中的圖是用什么軟件畫的,下面就來梳理一下常用的畫圖工具:
常規(guī)畫圖: Excalidraw、draw.io、語雀 思維導(dǎo)圖: Xmind 代碼截圖: Carbon 畫圖模板: ProcessOn
Excalidraw
Excalidraw 是一款輕量、開源的手繪風(fēng)格電子白板和畫圖應(yīng)用,可以快速畫出漂亮的流程圖、UML圖甚至是圖表。

Excalidraw 提供了豐富的素材庫,包含手繪風(fēng)格的圖標(biāo)、圖標(biāo)等:

可以在模版市場來搜索需要的組件:

除此之外,Excalidraw 還有很多特點:
界面簡潔,模版眾多,支持鍵盤快捷鍵,可以快速上手; 免注冊,支持切換為中文語言; 內(nèi)容安全,采用端到端加密,不會將內(nèi)容上傳到云端; 支持導(dǎo)出圖片、導(dǎo)出源文件、分享鏈接、實時協(xié)作、將內(nèi)容保存到工作區(qū)。
在線地址:https://excalidraw.com/
Draw.io
draw.io 是一款免費的在線圖表編輯工具,可以繪制流程圖、UML、類圖、組織結(jié)構(gòu)圖、泳道圖、E-R圖、思維導(dǎo)圖等,堪稱畫圖神器!

draw.io 提供了豐富的模版,支持商務(wù)、圖表、cloud、工程、流程圖、布局、地圖、網(wǎng)絡(luò)、軟件、表格、UML、Venn等。還可以自定義模板。

除此之外,draw.io 還有很多特點:
支持語言設(shè)置為中文; 支持使用圖層; 支持設(shè)置手繪風(fēng)格、自帶多種圖標(biāo),支持自定義圖標(biāo); 支持將圖片導(dǎo)出為PNG、JEPG、SVG、PDF、HTML、XML等,支持導(dǎo)出高級設(shè)置,如調(diào)整DPI、寬高、縮放、背景等。
draw.io 使用:
在線地址: https://app.diagrams.net/ 下載地址: https://github.com/jgraph/drawio/releases
語雀
語雀是一款面向未來的文檔和知識協(xié)同工具,可以用來記筆記,也可以用來畫圖。語雀畫板支持基礎(chǔ)圖形、流程圖、UML圖、ER圖、思維導(dǎo)圖等。

語雀畫板還支持直接從 icofont 搜索、添加圖標(biāo):

其還提供了一些常用圖的模版:

除此之外,語雀畫板還有以下特點:
支持團隊協(xié)作繪圖; 保存版本,恢復(fù)歷史版本。
語雀使用:
常用模板:https://www.yuque.com/danchun-eekrs/pbxiht 在線地址:https://www.yuque.com/
Xmind
XMind 是一個跨平臺的思維導(dǎo)圖軟件,具有多種結(jié)構(gòu)樣式,除了普通的思維導(dǎo)圖,還包括樹形圖、邏輯圖、魚骨圖、時間軸、樹狀表格等等,不同的結(jié)構(gòu)樣式可以自由組合混用,同時支持一鍵更換結(jié)構(gòu)樣式。

Xmind 提供了很多類型的思維導(dǎo)圖,并支持設(shè)置多種主題風(fēng)格:

除此之外,Xmind 還有很多特點:
可以靈活的定制節(jié)點外觀、插入圖標(biāo)外,還有多種樣式、主題色彩、貼圖可以選擇,主題顏色和樣式同樣支持自由組合; 除了 XMind 自身的格式,還支持導(dǎo)入 FreeMind、MindManager 等軟件的文件格式,支持導(dǎo)出PNG、SVG、PDF、Markdown、Word、Excel 等; 支持進行動態(tài)演示。
下載地址:https://xmind.app/download/
Carbon
Carbon是開源免費的代碼圖片生成器,可以快速生成漂亮的代碼圖片。操作簡單,直接將代碼粘貼在代碼區(qū),設(shè)置想要的格式即可。

生成的代碼圖片非常適合用來分享:

除此之外,Carbbon 還有很多特點:
支持多種代碼風(fēng)格、支持自定義代碼風(fēng)格,支持主流的各種編程語言; 支持設(shè)置代碼的字體、行號、行數(shù)等文本格式; 支持設(shè)置圖片的邊距、背景、顏色、陰影、大小等。
在線地址:https://carbon.now.sh/
ProcessOn
ProcessOn 是一個在線協(xié)作繪圖平臺,支持在線制作思維導(dǎo)圖、流程圖、組織結(jié)構(gòu)圖、網(wǎng)絡(luò)拓?fù)鋱D、魚骨圖、UML圖等。不過其免費版只支持添加 9 張圖。所以這里主要推薦其豐富的模版市場,可以通過分類、關(guān)鍵字搜索來查找合適的模版::

這些模版可以為我們提供一些繪圖思路:

在線地址:https://www.processon.com/diagrams/new#template
往期推薦:
ViteConf 2022回顧:Vite是如何誕生的?
Github Awesome系列:超全前端資源匯總
面試率超高的JS事件循環(huán),看這篇就夠了
前端必讀書籍推薦
談?wù)凧S二進制:File、Blob、FileReader、ArrayBuffer、Base64
程序汪資料鏈接
堪稱神級的Spring Boot手冊,從基礎(chǔ)入門到實戰(zhàn)進階
臥槽!字節(jié)跳動《算法中文手冊》火了,完整版 PDF 開放下載!
臥槽!阿里大佬總結(jié)的《圖解Java》火了,完整版PDF開放下載!
字節(jié)跳動總結(jié)的設(shè)計模式 PDF 火了,完整版開放下載!
歡迎添加程序汪個人微信 itwang009 進粉絲群或圍觀朋友圈

