一鍵自動將手繪流程圖轉為動畫影片，免費工具製作生動解說影片

當老師在教學時要介紹一段歷史源流、一個知識概念，講師在演講中要解釋一個方法系統、一段邏輯推論，或是專案經理在會議報告上要說明整個工作架構，乃至於 YouTube 內容創作者要解釋主題的多個重點，這時我們可能會畫出一張流程圖。這張流程圖很完整，但解說時如果可以像是「動畫」一樣，讓流程圖逐步展示，更容易讓聽眾看出前因後果、演化改變的關係。而今天要介紹的這個小工具：「 Excalidraw Animate 」，就可以讓手繪風格的流程圖自動轉成動畫圖檔，用影片方式重現繪製流程圖的每一步過程。

「 Excalidraw Animate 」應該可以成為上述工作者一個很實用的輔助工具，無論是要製作一段動畫簡報，還是要在 YouTube 中穿插一段解說影片，都能快速生成需要的動態流程圖檔案。

並且這個製作流程使用的工具，都是完全免費可用的。首先我們只要在「 Excalidraw 」中先逐步繪製出想要的流程圖，然後將檔案匯入「 Excalidraw Animate 」，就能製作成可播放的動畫影片。

下面就來示範分享整個製作流程，可以先看看完成的影片效果。

先在「 Excalidraw 」繪製流程圖

電腦玩物中介紹過幾次「 Excalidraw 」，這也是我目前依然愛用的流程圖繪製工具：

• Excalidraw 免費又強大的手繪風圖表、流程圖、心智圖協作工具
• Excalidraw 免費 AI 生成流程圖，一鍵畫出知識圖表、專案流程、寫作大綱

免費、免註冊帳號的情況下，就能繪製出需要的流程圖，並且可以分享、可以匯出成檔案。

我以之前在《防彈筆記法》一書中繪製的流程圖架構為例，回到「 Excalidraw 」流程圖檔案位址，打開左上方選單，選擇「匯出圖片」。

匯出圖片時，要勾選「嵌入場景」，這樣流程圖的繪製細節會包含在檔案中，然後匯出成 PNG 或 SVG 圖檔。

透過「 Excalidraw Animate 」製作成動畫

接著來到「 Excalidraw Animate 」網站，選擇左方的「 Load File 」，載入剛剛的流程圖圖檔，然後按下「 Animate! 」。

這樣一來，網頁中就會開始用動畫播放這張流程圖的完整繪製過程囉！

匯出影片檔案

那麼要如何把這樣的動畫，轉換成可以更自由在簡報、影片中使用的內容呢？

「 Excalidraw Animate 」本身有提供了一個「 Export to WebM 」的選項，按下後，透過允許螢幕錄製的方式，可以直接利用 Chrome 的螢幕錄影功能，把剛剛的動畫播放過程錄製下來，轉成 WebM 影片。

同樣的原理，如果要轉出效果更好的動畫，我們也可以使用自己慣用的螢幕錄影工具，錄製剛剛的動畫播放過程即可。

例如我目前使用 Chrome 套件：「Screencastify 螢幕錄影與教學影片軟體，多年後依然是我首選」，可以隨時進行網頁分頁的錄影，就能輕鬆錄下動畫播放過程了。

Excalidraw Animate提供了一種簡潔而有效的方式，讓我們的思維和概念通過動態流程圖得以生動呈現。無論是在教學、演講還是專案管理中，這樣的工具不僅能幫助我們更好地組織和表達思想，也使得信息的接收者能夠更直觀地理解和記憶。

有興趣的朋友可以試試看。

大家好，我是電腦玩物站長 Esor ，歡迎參考我的系列課程與書籍：

• 「個人數位生產力」線上課程（可使用電腦玩物老讀者折扣碼 ESOR500 ，獲得 500 元折價喔！）。
• 時間管理、筆記系統、AI 工具相關課程：「課程介紹連結」
• 目前最新著作：《防彈筆記法》
• 訂閱追蹤 podcast 節目：「高效人生商學院」（Apple podcast 訂閱、 Google Podcast 訂閱）
• 訂閱「電腦玩物電子報」，不定期出刊。

我的電子郵件是 esorhjy@gmail.com ，如果你有任何關於筆記術、時間管理、提升工作效率的問題，歡迎寫信跟我討論。

（歡迎社群分享。但全文轉載請來信詢問，禁止修改上述內文，禁止商業使用，並且必須註明來自電腦玩物原創作者 esor huang 異塵行者，及附上原文連結：一鍵自動將手繪流程圖轉為動畫影片，免費工具製作生動解說影片）