Excalidraw: 手寫風格的畫圖工具

我有神劍 (Excalibur)，我有畫圖 (Draw)

燈嘞 ~ Excalidraw ！！！

那今天就來講講開源的畫圖神器 - Excalidraw

Excalidraw

[Github] excalidraw/excalidraw

Excalidraw 是一款畫圖的工具，最大的特色是它可以畫出手寫風格的圖表，什麼是手寫風格？就是下方這樣，我隨便弄了個飲料銷量表格出來。

使用方法

Excalidraw Editor 傳送門

點擊上方連結就可以開始使用了，打開後會顯示開始畫面，因為我的是深色模式，所以是黑色的 ~

上方是工具列，可以畫圖案、箭頭、文字、圖片之類的

左上方有其他選項，包含開啟檔案、儲存檔案、背景顏色，如果你的語言剛好不是中文的話，也可以在這邊調整語言

如果操作上有任何不懂的都可以按右下角的按紐，會顯示所有的操作說明

甚至還有共同編輯的功能，按下右上角的按鈕並開始連線後就會產生連結，你可以將連結給其他人來一起共同編輯

Excalidraw Libraries

Excalidraw Libraries 傳送門

在 Excalidraw Libraries 上有許多人分享的元件，像是 Icon、一些圖案、甚至是範本 (Template) 都可以在那邊找到

使用的方式也很簡單，找到你想要的，點擊下方的 Add to Excalidraw 就可以直接使用了，或是也可以下載成檔案並手動匯入

加入的元件右上方按下資料庫按鈕後看到

Excalidraw Animate

[Github] dai-shi/excalidraw-animate

Excalidraw Animate 傳送門

接下來，這個看起來就很厲害，他可以把你在 Excalidraw 上畫的圖案，用動畫的方式一步一步畫出來，在講解或是教學的時候感覺都很實用

打開網頁後，會看到這些按紐，你可以選擇其中一種：

• Load File: 讀取 excalidraw 的檔案，如果你是將你的圖表存成檔案 (.excalidraw) 的，可以用這個
• Load Library: 如果對象是 Library 的檔案 (.excalidrawlib) 的話，請選擇這個
• Enter Link: 複製你的圖表的分享連結，並貼到輸入欄位中，按下 Animate

之後就會顯示動畫啦

你可以選擇輸出成 SVG 檔案

Excalideck & Excalidraw slides

[Github]excalideck/excalideck
[Github]scastiel/excalidraw-slides

Excalideck 傳送門
Excalidraw-slides 傳送門

現在介紹的這兩個都是使用 excalidraw 製作投影片的網站，各位可以選擇自己喜歡的介面去使用

Excalidraw Claymate

[Github] dai-shi/excalidraw-claymate Excalidraw Claymate 傳送門

雖然前面有一個動畫了，但是這個有點不一樣，這個是可以製作逐格動畫的，你可以每一幀都自己設計

Reference

• [Github] excalidraw/excalidraw
• Excalidraw Editor