Excalidraw 免費又強大的手繪風圖表、流程圖、心智圖協作工具



線上可以繪製流程圖、心智圖,乃至於各種圖表的工具很多,而「 Excalidraw 」是其中一款免費、開源、簡單易用、速度又流暢的選擇,最大特色是可以快速繪製「手繪風格」的線條樣式。

不過「 Excalidraw 」不僅僅只是如此,如果深入使用,會發現他確實可以成為一款取代你身邊其他選擇的繪圖工具、協作白板,包含了許多實用的延伸功能:
  • 豐富的手繪樣式自訂,可結合繪圖與塗鴉。
  • 足夠的白板、流程圖功能,例如自動連結點、插入圖片等等。
  • 免費的範本資料庫,可快速套用介面圖示、表格樣式等素材。
  • 免帳號、免註冊,但可以雲端儲存、單機儲存檔案,後續修改編輯。
  • 可以在免註冊情況下,邀請多人一起同步協作。
  • 不需安裝,電腦端、手機上都能瀏覽器開啟,直接順暢編輯,速度一流。
  • 有中文版本。
上述還都是免費版「 Excalidraw 」就具備的功能。

今天這篇圖解教學文章,就來帶大家上手「 Excalidraw 」這款手繪圖表工具的基本與進階功能。


2024/2/17 更新,把手繪流程圖轉成動畫的工具一鍵自動將手繪流程圖轉為動畫影片,免費工具製作生動解說影片




繪製各種手繪風圖解

Excalidraw 」的基本功能十分容易上手,打開網站,不需註冊就能直接開始繪製內容。

透過上方一排編輯工具列,可以快速繪製出流程圖、心智圖,手繪風格很適度。




如果想要繪製進階一點的圖表內容,例如手繪風格的長條圖、圓餅圖,或是繪製介面原型圖,也可以辦得到。

著色上也有手繪網格等風格可以選擇。




另外也有單純的畫筆塗鴉功能,可以製作更手繪風格的圖案,或是設計成螢光筆。




「 Excalidraw 」除了基本的繪製工具,還可以進一步修改樣式。

每一個手繪圖型,點選後都還能調整:
  • 框線顏色、背景顏色
  • 填滿效果,要用網格還是實心
  • 框線寬度、手繪線條風格
  • 字型大小、對齊方式
  • 圖形透明度





延伸便利編輯功能

「 Excalidraw 」在編輯上很有彈性,除了上述功能都有內建快捷鍵外,還支援下面這些電腦文書通用的編輯方式:
  • Ctrl + Z 回到上一步
  • Ctrl + C 可以複製任何圖形, Ctrl + V 可以貼上
    • 可以利用第一個圈選工具,一次圈選多個圖形,然後複製到其他地方



在繪製流程圖、心智圖時,「 Excalidraw 」的箭頭也支援自動依附點,連結線可以自動跟著節點方框移動調整。




如果想要設計彎曲的線條,只要先點選某條連結線,利用「 Alt 」快捷鍵新增錨點,就能自由拉動線條彎曲。




「 Excalidraw 」也支援在白板中插入圖片,和手繪風格的畫筆註解相結合。





利用免費範本資料庫,建立個人範本

「 Excalidraw 」還有一大特色,就是由社群用戶提供的免費範本資料庫。

利用右上方的「範本資料庫」按鈕,可以瀏覽可下載的資料庫,也可以建立自己需要的常用資料庫。

到時候點選這些範本,就能直接插入到「 Excalidraw 」的繪圖中。




我推薦可以先看看「最多人下載的範本資料庫」,裡面有許多用戶繪製好的素材,像是介面按鈕、統計圖表等等。

選擇「 Add to Excalidraw 」,可以加入自己的資料庫選單,直接取用。




如果說自己花了時間,繪製出一個自己需要的特殊圖形,也可以手動加入「個人資料庫」,這樣下一次畫不同圖表時,可以直接插入,重複使用。





多人協作編輯

如果想要多人協作,邀請夥伴一起修改目前的流程圖,甚至雙方都不需要註冊也能實現。

透過左上方的「多人協作」按鈕,開啟連線協作,把網址分享給對方,就能立即開始多人同步編輯。





雲端儲存、單機儲存

「 Excalidraw 」免費版本沒有帳號註冊,那要怎麼保留完成的檔案,甚至可以後續再呼叫出來編輯呢?有幾種方式。

第一種方式,可以利用前面說的「多人協作」按鈕,建立一個協作網址,記住網址,以後每次打開這個網址就是專屬檔案,可以繼續編輯。

第二種方式,從左上方的「匯出」按鈕,選擇匯出成一個 Excalidraw 專屬的單機檔案,之後上傳就能在雲端繼續編輯。




第三種方式,選擇「另存為圖片」,但要記得勾選「嵌入場景」,這時候可以下載一張 PNG 圖檔。

這張 PNG ,可以當作單純圖片來使用,但是之後也可以上傳(匯入)到「 Excalidraw 」就能繼續編輯修改喔!





手機上也能順暢編輯修改

「 Excalidraw 」雖然沒有 App 版,但是在手機瀏覽器上直接開啟相應的檔案網址,也能順暢的編輯、調整流程圖。




整體來說,「 Excalidraw 」不只是一個具備「手繪風格」的白板、流程圖工具。他的延伸功能,即使只用免費版,也能繪製出需要的多種類型圖表、心智圖、介面版面原型。而且大量的範本資料庫,以及簡單易用的協作流程,甚至還支援免帳號下的各種重複編輯修改。和其他類似工具相比也是值得推薦的白板、流程圖工具。

或者你還可以參考她的團隊進階付費版本:「Excalidraw+」。

對流程圖工具有興趣的朋友,還可以延伸參考:
(歡迎社群分享。但全文轉載請來信詢問,禁止修改上述內文,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang 異塵行者,及附上原文連結:Excalidraw 免費又強大的手繪風圖表、流程圖、心智圖協作工具

留言

  1. Esor老師您好,想請問您Excalidraw可以直接在單機的obsidian裡面使用。可以請您分享這方面的使用心得嗎?
    因為這樣一來可以直接在obsidian 的app裡面直接畫Excalidraw,也方便直接管理畫出來的圖。(兩個應用形成互補的效果)
    但是我看國外使用者有分享可以直接在obsidian 的關聯圖介面直接連結到Excalidraw裡面的文字,我找不到該如何設定才能夠實現這樣的功能,可不可以請Esor老師分享一下呢?

    回覆刪除
    回覆
    1. 在Obsidian的第三方外掛中搜尋"Excalidraw"並安裝使用,就可以看到了

      刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

Google NotebookLM 影音升級:用 AI 學習英文 YouTube 影片、 整理大量錄音檔最佳工具

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

ChatGPT 進階語音對話純測試心得:腦力激盪、即時口譯、冥想教練,台語也能通

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

Google 錄音 App 內建 AI 轉錄繁體中文語音逐字稿,可中英日切換

讓你看懂即時颱風動態 Windyty驚人動畫播報天氣網站