跳到主要內容

筆記, 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:到底?氛圍驅動程式開發必殺技?

Vibe Coding(氛圍編程) 是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的革命性程式開發方式,它讓開發者透過自然語言與 AI 對話來生成程式碼,徹底改變了傳統的編程模式。 這種開發方式的核心理念是 「順著感覺走」 ,讓 AI 處理技術細節,開發者專注於創意和需求描述。 Vibe Coding 需要基本上的規劃和執行,但並沒有強制規範,從日常經驗來說可分為三個階段, 前期準備、開發過程、和後期維護 三個關鍵階段。每個階段都有其特定的任務和注意事項,正確執行這些步驟將大幅提升開發效率和程式品質。 將靈感與需求透過 AI 快速轉化成產品功能或原型。以下幫你分成 「前、中、後」 三階段要做的事情,適合你自己做、或帶團隊做 前期:設定 vibe & 準備素材 這個階段的重點是 「建立開發語境」 ,因為 AI 的生成表現高度依賴前期提供的上下文與資料。 明確目標 :釐清要解決的問題、預期要做的功能與核心價值。例如在筆記軟體的情境中,可能是:「我要做一款讓使用者能用 Markdown 記錄筆記,並提供標籤與全文搜尋功能的簡單 App。」 收集靈感 :觀察同類產品(如 Obsidian、Notion)、蒐集市場痛點(例如太多筆記軟體無法脫機使用,或同步效能差)。 建立語境 :準備初步 prompt、背景知識、產品定位、品牌調性、目標使用者輪廓等。 確認資源 :決定用哪些工具(Gemini、ChatGPT、設計軟體、流程管理工具等)。 確認完上述內容之後,就可以先開始進行準備規格,進行第一次的 Vibe Coding 方向驗證 提示詞模板準備 很多人會跳過這步驟,但一份 「好的 AI 提示詞模板」 將決定接下來每一次 AI 對話的品質。有效的提示詞模板需具備: 描述具體且無歧義 包含技術要求和約束條件 提供範例資料和測試案例 指定程式碼風格和慣例 例如針對筆記軟體的案例:   「建立一個支援 AI 功能純文字筆記,輸入內容可即時渲染;需支援儲存到本地檔案,提供標籤欄位做分類;以 React 架構,程式風格採用 Tailwind style components 並使用 hooks。」 開發工具選擇 開發工具的選擇 同樣重要,目前市場上主要的 ...

Claude Code Hooks:自動化與安全的最佳實踐

寫在最前頭,這份文章主要寫起來是給自己看, 同時內容是比較適合開發者,工程師們可以做些自動化處理的簡單筆記。 Claude Code hooks Claude Code hooks 是一種強大的自動化機制,允許用戶在 Claude Code 的不同生命週期階段,自定義執行 shell 指令。這種設計讓開發者能夠將規則和自動化行為嵌入到應用層級,確保每次都能可靠執行,而不必依賴 LLM(大型語言模型)是否會選擇執行某項操作。 Hooks 的核心用途 通知 :自訂收到 Claude Code 等待用戶輸入或執行權限時的提醒方式。 自動格式化 :如在每次檔案編輯後自動執行 prettier (針對 .ts 檔)、 gofmt (針對 .go 檔)等。 日誌記錄 :追蹤所有執行過的命令,便於合規或除錯。 自動反饋 :當 Claude Code 產生不符合團隊規範的程式碼時,自動給出反饋。 自訂權限 :阻擋對生產環境檔案或敏感目錄的修改[^1]。 配置與結構 Hooks 透過設定檔進行配置,分為全域( ~/.claude/settings.json )、專案( .claude/settings.json )、本地專案( .claude/settings.local.json )以及企業級策略設定。每個 hook 由「事件名稱」和「匹配器」組成: "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "jq -r '...'" } ] } ] } matcher :用於匹配工具名稱(支援正則表達式),如 Write 、 Edit|Write 、 Notebook.* 。 hooks :當匹配時要執行的命令陣列。 type :目前僅支援 "command" 。 ...

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。