跳到主要內容

筆記, Obsidian Excalidraw + Google Gemini 圖解三步驟教學！用 100 張視覺模板，打造 AI 圖解工作流

文章：Obsidian Excalidraw + Google Gemini 圖解三步驟教學！用 100 張視覺模板，打造 AI 圖解工作流 來源：YouTube 頻道「跟朱騏一起打造知識型一人公司」 影片連結： Obsidian Excalidraw + Google Gemini 圖解三步驟教學！

您是否也想將複雜的文字轉化為清晰、吸睛的圖解，但又不知道該從何下手？這部影片教學將示範一個強大的工作流程，結合 Obsidian Excalidraw 插件與 Google Gemini AI，讓您在短短五分鐘內就能完成專業的視覺圖解 [01:40]。



這個工作流的核心，是來自創作者 Dave Grey 所繪製的 100 張視覺化模板 [00:22]。透過這套流程，AI 將協助我們從這 100 張模板中，挑選最適合您文章的架構，並建議您應該在圖上放置哪些關鍵文字 [00:55]。

以下是打造 AI 圖解工作流的三大步驟：

步驟一：下載並開啟 100 張視覺化模板

首先，您需要取得這 100 張模板，並在 Obsidian 中設定好 Excalidraw 環境。

  1. 下載模板： 點擊影片資訊欄中的連結，前往 Dave Grey 的網站 [02:51]。在網站中點擊「Save to file」，將檔案（副檔名為 .excalidraw）儲存到您 Obsidian 資料夾（Vault）中的任一位置 [03:06]。
  2. 安裝插件： 在 Obsidian 中，進入「社群插件」，搜尋並安裝「Excalidraw」插件 [03:58]。
  3. 轉換格式： 安裝插件後，點擊您剛剛儲存的 .excalidraw 檔案。此時它看起來會像是一堆文字 [05:06]。點擊右上角的「...」選單，選擇「convert to new format」（轉換為新格式）[04:56]。
  4. 開啟畫布： 轉換完成後，再次點擊右上角選單，選擇「Open as Excalidraw」[05:38]。您現在就能看到全部 100 張視覺化模板了。您可以將它們「解散群組」（Ungroup），以便單獨選取 [06:13]。

步驟二：使用 Google Gemini 推薦模板與文字

接下來，我們將利用 AI 來協助我們思考。您可以開啟 Google Gemini 或 Google AI Studio [06:43]。

  1. 提供模板： 回到 Excalidraw，將模板畫布的內容「複製為 PNG」[07:42]，並貼到 Gemini 的對話框中。
  2. 提供文章： 接著，貼上您想要圖解的完整文章內容 [08:19]。
  3. 下達指令： 告訴 Gemini：「我想將我的文章進行視覺化創作，這是我所有的模板（剛才貼上的圖片），請你建議我可以使用哪一個模板。」[08:08]
  4. 擷取重點： 當 Gemini 推薦模板後（例如「Pyramid」金字塔模板），您可以接著問：「請幫我把文章的重點關鍵句，加到這個圖上。」[09:17] Gemini 就會告訴您金字塔的頂端、中層、底層分別該放什麼文字 [09:36]。

【錯誤排除】 有時候 AI 可能會「看錯」圖片上的文字，推薦一個不存在的模板（例如 "brand dump"）[10:04]。

解決方法： 回到 Excalidraw，將模板檔切換回 Markdown 模式（文字模式）[10:41]。找到 text elements（文字元素）區塊，這裡有全部 100 個模板的正確名稱 [10:49]。將這 100 個模板的「純文字」名稱複製起來，貼給 Gemini，並告訴它：「我的模板清單在這裡，請你從這些『文字』當中幫我挑選。」[11:14] 這樣 AI 就能提供 100% 準確的模板名稱。

步驟三：在 Excalidraw 描繪並儲存為個人模板

最後一步，就是將 AI 的建議畫出來，並建立可重複使用的個人模板。

  1. 尋找模板： 在 Excalidraw 的 100 張模板海中，使用搜尋功能（Ctrl/Cmd + F）找到 Gemini 推薦的模板（例如搜尋 "Pyramid"）[12:19]。
  2. 複製與描繪： 將這張模板圖複製（Ctrl/Cmd + C），並在一個「新的」Excalidraw 畫布中貼上 [12:40]。由於貼上的是一張圖片，我們需要用 Excalidraw 的工具（如直線、方形）沿著圖片「描繪」一次，製作出一個可編輯的向量版本 [13:03]。這個過程非常快，因為只是描邊 [14:01]。
  3. 填入文字： 根據 Gemini 建議的內容，將文字填入您剛畫好的模板中。您可以自行微調 AI 建議的用詞，使其更符合您的語意（例如將「節奏」改為「步調」）[14:35]。
  4. 存入圖庫： 完成後，將您剛畫好的圖（包含外框與文字）全選起來，點擊 Excalidraw 側邊欄的「書本」圖示（Library / 模版庫），將它加入您個人的模版庫中 [17:02]。

透過這個步驟，您不僅完成了一張圖解，更重要的是，您創造了一個未來可以「無限重複使用」的個人化模板 [15:26]。下次您需要金字塔圖時，只需打開模版庫，將它拖拉出來即可 [17:35]。 http://googleusercontent.com/youtube_content/0

留言

張貼留言

這個網誌中的熱門文章

Vibe Coding：為什麼 Junior 更快上手？Senior 要如何追趕？

現象層面（市場觀察） 最近有篇文章討論 junior & senior 開發者在 AI 時代的角色轉變，非常熱門。 身為 Cympack 產品開發團隊 ，我們也一直關注這個議題，在閱讀這篇文章時觀察到一些有趣的現象，對我們來說，這正好反映出 AI 正在改變開發生態，junior 借力 AI 快速成長、senior 則需要在 「架構思維」 與 「多 agent 協作」 中找到新定位，其中有些啟發（insight) 可以跟大家分享。 為什麼 Junior 更容易上手 vibe coding？ 心智負擔低 → Junior 沒有太多傳統 code workflow 的框架包袱 敢於嘗鮮 → Gen Z / 年輕工程師天生習慣用 prompt-based 工具、跟 LLM 互動 少「優雅程式設計」的束縛 → 不太糾結「這樣寫會不會不夠優雅」，反而 embrace 快速迭代、快速出成果 反觀 Senior： 熟悉大型系統設計 有豐富的「工程正統流程」知識（架構設計、測試策略、效能優化、設計模式） 對 AI 生成 code 的品質 / 維護性通常比較保留 部分 10+ 年資深工程師，對 prompt engineering 沒那麼熟練，還在觀望 技能面（未來的關鍵能力） Vibe coding 本質上 = prompt engineering + AI co-pilot 管理能力 能力項目 誰目前比較有優勢？ Prompt 撰寫 / AI 互動 Junior 較強（熟悉 chat-based 流程） 系統設計 / 架構把關 Senior 較強 AI 生成 code 驗證 / Bug 察覺能力 Senior 較強（能看出潛在問題） 快速疊代 / Hackathon 式開發 Junior 較強 長期維護性 / 穩定性 Senior 較強 總結 Junior 確實更快適應 vibe coding，並且更習慣以 「chat-based coding」 的工作流開發。 Senior 擁有驗證 AI 產物與系統設計的深度能力，但若不主動練習 vibe coding，長期會逐漸落後於新一波開發潮流。 就如同在 GAI 技術年會分享，希望帶給各位的感受， 『與 AI 協...
張貼留言
繼續閱讀>>

Vibe Coding 協作到自建 Dev Agent？從 Claude / Codex 到 OpenHands

過去一年，越來越多工程師開始 把 AI 真正帶進工作流程 。從一開始用 ChatGPT、Claude 來問語法問題，到後來很多人愛上 Cursor，直接在編輯器裡讓 AI 幫忙改 code、補 test case、甚至自動整理 PR。這樣的開發體驗，已經大大改變了我們寫程式的方式。 更現實的是，在很多企業內部、政府單位、或涉及機密資料的專案裡， 其實根本不能直接用 Cursor 或雲端 LLM 工具。   畢竟這些服務通常會把資料傳到雲端模型做處理，萬一專案裡有未公開的技術、敏感客戶資料，或是受限於法規 （像金融、醫療、政府標案） ，直接用雲端 AI 工具就會踩 紅線 。  因此，許多團隊反而更希望 「自己架一套 Dev Agent」 ，可以在內網執行，資料完全掌握在自己手上，該整合的內部工具、該讀的私有 repo、該串的 CI/CD pipeline，全部客製化、安全可控。 這時候，像 OpenHands 這樣的開源 Dev Agent 框架就特別有價值。它的出發點不是單純的 AI 助手，而是讓你能夠打造出一個真的可以跑在自己環境裡、可以理解整個開發流程的 AI 工程師。從建置到部署，從 CLI 操作到瀏覽器查詢， 從多檔案編輯到自動測試，全部都能自己完成，甚至還能針對不同專案調整專屬的工作流。 對很多開始探索 AI 協作開發的團隊來說，這是一條 從 「AI 幫你寫一段程式」，走向「AI 幫你解決一整個任務」 的進化路徑。而且，還是在可控、可自定義、安全的環境裡完成的。 🧩 主要概述 OpenHands 是由 All‑Hands AI 開發的開源「軟體開發代理人平台」，能模仿人類工程師從建立程式、修改程式碼、執行指令，到瀏覽網頁、呼叫 API……等一整套開發流程 它提供雲端（OpenHands Cloud）與本地 Docker 運行版本，用戶能配置 LLM（如 Claude、OpenAI、Gemini…) 📚 核心特性與怎麼使用 代理人的工具能力 支援代碼編輯、命令行、執行環境、網頁瀏覽、API 呼叫—接近人類開發者完整技能。其中 OpenHands Cloud 版本提供 $50 試用額度讓大家方便使用，又或者如果自己本機有 docker 的話，可以自己Local 版本透過 Docker 自架環境。 ...
張貼留言
繼續閱讀>>

Google Gemini 全端 AI Agent 快速入門 - 打造「思考」的 AI 助理

一套從搜尋、反思到輸出的全端 AI 代理人範例，讓你看懂什麼叫 Research Agent 在 AI 工具百家爭鳴的今天，大家都在問一個問題： 「我能不能不只問 AI 答案，而是讓它像一位助理一樣，有流程、有反思、還有出處，真正幫我完成一件事？」 Google 最近釋出了一個相當具有指標意義的開源專案 gemini-fullstack-langgraph-quickstart ，正是為了解這個問題而誕生。 這套系統到底是什麼？ 這個範例不是傳統 Chatbot，而是展示一個完整的 AI research agent ： 它會根據使用者的提問，自動發想搜尋關鍵字、查資料、整合重點，最後給出答案還附上引用來源。背後的邏輯設計得非常扎實，不只是能跑，更是具備可讀性、可擴展性與可商用性。 它的流程大致如下：  1. 使用者輸入問題（例如：「抖音是否影響台灣選舉？」）  2. Gemini LLM 幫你想出關鍵字（不只是照抄問題）  3. 呼叫 Google Search API 抓資料   4. LangGraph 控制流程 → 判斷資料夠不夠 → 若不足，自動補查  5. 整合最終答案，並產生 citation（來源說明） 你可以想像這就像一位實習助理幫你寫報告， 不只輸出一段內容，而是會 去查、會判斷、會補資料，而且說明「我為什麼這樣說」 。 LangGraph 是什麼角色？ LangGraph 就是整個 Agent 背後的控制系統 。 用白話講，它幫你定義 AI 每一步要幹嘛、遇到什麼狀況該走哪條路、要不要反思、要不要再查，甚至可以定義條件邏輯與資料流動。 這就不像寫一個單純的 Chat API，而是比較像「把一個流程圖變成可以跑的程式」。 對工程師來說，它提供了從 prompt 到流程控制的設計彈性；對產品設計來說，它讓 AI 有了 「多步驟任務執行」 的能力。 技術架構與使用方式 這整套系統是 Fullstack 架構，前後端都幫你整好了，技術選型也非常實用：   前端：Vite + React + TailwindCSS + Shadcn UI  後端：FastAPI + LangGraph...
張貼留言
繼續閱讀>>