跳到主要內容

筆記, 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

留言

張貼留言

這個網誌中的熱門文章

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

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

[教學] 快快樂樂刪除CodeIgniter index.php

預設的CI網址預設都設定為index.php同一層級，因此所有的程式都必須指定index.php導向才能開始，例如 http://localhost/ci/index.php/welcome/test http://localhost/ci/welcome/test 本文將說明如何將惱人的index.php消除，還你一個漂亮的URL。 設定開始： 接下來說明如何使用rewrite方式將惱人的index.php去除。 rewrite不清楚的人，煩請先自行google 首先要先確定Apache的 mod_rewrite 有 開啟 ，如果沒有開啟請設定好之後重新啟動apache。 接著，在根目錄底下建立一個新檔案，檔名為 .htaccess ，裡面程式碼如下： <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 接著到 application/config/config.php ，開啟檔案修改 $config['index_page'] = ""; 注意： /index.php/$1 要根據你目錄，例如 http://localhost/index.php ，網站根目錄為 /ci/index.php 則要寫成 /ci/index.php/$1 接著至CI目錄下，尋找 config\config.php ， 修改一下裡面的檔案，修改如下： $config['index_page'] = ""; 存檔後，如此一來大功告成。 參考資料 官方網站說明
21 則留言
繼續閱讀>>

[教學] Mojito 安裝與入門，install mojito for beginner.

mojito ，最近終於從 YDN 對外公開此專案，這個套件主要用於解決前端多重裝置及瀏覽器端的問題，後端服務採取 node.js ，因此使用上必定要先準備以下幾個元素 準備素材 c++ complier git Node.js > 0.4.x NPM > 1.0.x 安裝方式 git clone git://github.com/yahoo/mojito.git cd mojito/source sudo npm install -g . npm install . 以上四個簡單的步驟，就可以把 mojito module 完整安裝到服務器上，接著就可以開始進入 mojito 的世界 使用方式 mojito 提供了完整的 command line 給開發者使用，接著先建立一個基本 hello world 專案，跟著以下步驟完成第一個專案。首先建立一個 mojito application， mojito create app hello cd hello 切換到目錄之後，再接著建立自己的 mojit，這邊的 mojit 就像是一個應用（application）可能會包含許多個獨立網站體，擁有獨立架構的 MVC ，包含內部設定等，詳細資料可以參考官方的 說明 ，建立 mojit mojito create mojit HelloMojit 輸入指令後，會看到顯示結果如下， creating mojit called 'HelloMojit' (using "default" archetype) ✔ mojit: HelloMojit created! ✔ mojito done. 接著修改 application.json 這個 mojit 設定檔案，讓剛才新建立的 hellp application 指定底下有一個 mojit -> HelloMojit ，讓應用可以去執行 mojit controller ，修改如下， [ { "settings": [ "master" ], "appPort": 8666, "specs": { ...
11 則留言
繼續閱讀>>