寫前端架構圖太慢？用這個 Skill 一句話讓 AI 秒出 Excalidraw 圖
整理版優先睇
一句話讓 AI 秒出 Excalidraw 架構圖，告別手動排版
Chris 係一個專注探索 AI 工具嘅博主，最近正喺度開發 WiseMindAI。佢發現畫架構圖好麻煩，就算用 Excalidraw 呢類自由繪圖工具，一複雜就要不停調整排版，好嘥時間。
於是佢揾到一個叫 Excalidraw Diagram Skill 嘅開源項目，可以將自然語言描述直接轉成清晰嘅 Excalidraw 圖表。呢個 Skill 支援 Claude Code、OpenCode、CodeX 等主流 AI Agent 工具，安裝好簡單，可以一鍵生成 .png 同 .excalidraw 檔案，用家可以即時用圖或者匯入 Excalidraw 再微調。
整體嚟講，Excalidraw Diagram Skill 解決咗「構思想法」同「落地排版」之間嘅脱節問題，尤其適合成日寫技術文檔、做方案或者梳理複雜系統嘅人。佢唔單止慳時間，仲提升咗圖表嘅專業感同可讀性，絕對值得一試。
- Excalidraw Diagram Skill 可以將自然語言描述轉換為美觀嘅 Excalidraw 圖表，徹底告別手動排版嘅煩惱。
- 安裝非常簡單，支援 Claude Code、OpenCode 等工具，亦可以手動 clone repo 放入技能目錄。
- 生成嘅圖表同時輸出 .png 同 .excalidraw 檔案，前者可直接用，後者可匯入 Excalidraw 再編輯。
- 核心功能包括 AI 圖表生成、可視化驗證（自動修復重疊錯位）、可定製品牌風格。
- 如果你成日要畫架構圖、流程圖或系統圖，呢個 Skill 可以大幅提升效率，值得一試。
Excalidraw Diagram Skill GitHub 倉庫
開源 Skill，可將自然語言轉換為 Excalidraw 圖表
Excalidraw 官方網站
開源手繪風格白板，支援協作與加密
點解要揾呢個 Skill？
Chris 係一個專注探索 AI 工具嘅博主，最近正喺度開發 WiseMindAI。佢發現畫架構圖好麻煩，就算用 Excalidraw 呢類自由繪圖工具，一複雜就要不停調整排版。
每次要排版、對齊、調整箭頭，真係好嘥時間。Excalidraw Diagram Skill 正正係為咗解決呢個問題而出現。
安裝同使用方法
安裝方式有兩種：透過對話直接安裝，或者手動 clone 倉庫。
- 1 通過對話安裝：直接同 Claude Code 等工具講「幫我安裝 https://github.com/coleam00/excalidraw-diagram-skill 呢個 Skill」
- 2 手動安裝：git clone 倉庫，然後將 excalidraw-diagram-skill 複製到 .claude/skills/ 目錄
# 1️⃣ 克隆倉庫
git clone https://github.com/coleam00/excalidraw-diagram-skill.git
# 2️⃣ 複製到你的項目技能目錄
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram- 輸入描述：例如「創建一個流程圖，展示 AI 搜索增強（RAG）流程」
- 生成圖表：AI 自動分析並生成 Excalidraw 圖表
- 查看結果：下載 .png 同 .excalidraw 文件，可直接用或匯入編輯
幾分鐘就可以從描述到圖表，真係好方便。
核心功能有啲咩？
- 1 AI 圖表生成：根據自然語言自動生成流程圖、架構圖、系統圖等，結構清晰風格一致。
- 2 可視化驗證：自動檢測並修復重疊文本、錯位箭頭、不平衡間距等佈局問題。
- 3 可定製品牌風格：修改 color-palette.md 文件即可調整顏色和樣式，配合品牌形象。
- 4 兼容性：支援 Claude Code、OpenCode、CodeX 等任何支援 Skills 的 AI 代理。
Chris 仲分享咗幾張 WiseMindAI 嘅效果圖，展示呢個 Skill 嘅實際能力。
- WiseMindAI 核心功能架構圖：展示用戶入口、核心功能層、學習與輸出層、數據同步層、AI能力層、擴展能力。
- WiseMindAI 用戶使用場景流程圖：以「一個人學習新知識」為主線，展示從問題到最終輸出嘅完整流程。
- 知識庫使用流程圖：展示由創建知識庫到輸出結果嘅步驟。
值得一試嗎？
Excalidraw 手繪風嘅自由感好正，但複雜圖表嘅排版真係好煩。Excalidraw Diagram Skill 完美補齊呢個短板，將「構想」同「排版」拆開，配合內置視覺校驗，交付效果好。
如果你成日要寫技術文檔、做演示或梳理複雜系統，呢個 Skill 絕對值得一試。
關注「AI 工具派”
探索最新 AI 工具，發現 AI 帶嚟嘅無限可能性！
Hi，我係Chris，一個專注於探索各類 AI 工具嘅博主，同大家一齊發掘 AI 嘅潛力。我而家開發緊WiseMindA，期待佢可以成為提升學習嘅好拍檔。
Hi，我係 Chris。
最近見到 X 好多人喺度分享整靚靚架構圖嘅 Skill，畢竟寫文檔、做方案、講架構嘅時候，最頭痛嘅唔係內容，而係畫圖。
Chris 一路都係用 Excalidraw，畫圖確實好舒服，好自由，但一旦圖複雜起上嚟，排版亂曬、結構唔清晰、不斷調整就會好麻煩。
我最近揾到一個好唔錯嘅 Skill，叫 Excalidraw Diagram Skill，可以幫你一鍵生成清晰靚仔嘅圖。
補充一下：
Excalidraw 係一個開源嘅虛擬手繪風格白板，目前有 121k Star，支援協作同端到端加密，可以用嚟創建手繪風格嘅圖表、線框圖等。
官方網址：https://excalidraw.com/
一、項目介紹 🌈
🌟 工具名稱：Excalidraw Diagram Skill
🔗 工具地址：https://github.com/coleam00/excalidraw-diagram-skill
Excalidraw Diagram Skill 係一款好唔錯嘅 Skill，可以將自然語言描述轉換成美觀實用嘅 Excalidraw 圖表。佢專注於將複雜嘅概念同流程可視化，令溝通更清晰、更高效。
因為本身係個標準嘅 Skill 項目，所以可以無縫接入 Claude Code、OpenCode、CodeX 等主流 AI Agent 工具，甚至 QClaw、WordBuddy 呢啲工具都支援。
二、快速上手 🚀
安裝方式同其他 Skill 一樣，最簡單嘅方式就係通過對話方式叫 Claude Code 等工具直接安裝：
幫我安裝 https://github.com/coleam00/excalidraw-diagram-skill 呢個 Skill
Chris 本來係用 Claude Code 安裝但係一直報錯，卡咗喺 uv run playwright install chromium一個幾鐘，於是就轉用 QClaw 去安裝使用：
安裝 Skill 嘅時候，會自動行所需命令，安裝 Playwright 依賴（用嚟將 .excalidraw 渲染為 PNG）。
由於 Skill 會用 Playwright 生成圖片，而 Chris 發現 QClaw 竟然會自動 set 成電腦用緊嘅 Chrome，咁就唔使安裝 Playwright 喇，唔錯。
當然仲可以用腳本進行安裝：
# 1️⃣ 克隆倉庫
git clone https://github.com/coleam00/excalidraw-diagram-skill.git
# 2️⃣ 複製到你的項目技能目錄
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
✅ 兼容任何支援 Skills 嘅編碼代理（例如 Claude Code、OpenCode），放入 .claude/skills/ 目錄就可以自動識別。
Excalidraw Diagram Skill 用起上嚟非常簡單：
輸入描述：喺 AI 代理裏面輸入自然語言描述，例如「創建一個流程圖，展示 AI 搜索增強（RAG）流程"。 生成圖表：AI 代理會自動分析描述內容，並生成相應嘅 Excalidraw 圖表。 查看結果：睇嚇生成嘅圖表，並根據需要進行調整。
成個過程非常簡單，幾分鐘就可以完成從描述到圖表嘅轉換。
當然，你仲可以提供更詳細嘅指令，例如：
幫我畫一個 RAG（檢索增強生成）架構圖，包含：
- 用戶提問
- 向量化處理（Embedding）
- 向量數據庫（存儲知識）
- 相似度檢索
- Prompt 拼接
- 大模型生成回答
- 返回結果
要求：
- 展示完整數據流
- 每個步驟用簡單語言說明
生成完成之後，系統會同時交付 .png 和 .excalidraw 兩個檔案：
.png：高清圖片，適合直接插入 Markdown 文檔、飛書或 PPT 中。.excalidraw：源檔案，支援一鍵導入 Excalidraw 白板進行二次編輯。畢竟 AI 生成之後，間中仲有局部唔滿足需求嘅地方。嗰陣時直接導入源檔案手動微調（例如複雜腦圖嘅節點位置），比起自己由零拖拽快好多。
三、核心功能 🔍
1. AI 圖表生成
Excalidraw Diagram Skill 嘅核心功能係 AI 圖表生成。佢能夠根據自然語言描述自動生成結構清晰、風格一致嘅圖表，包括：
流程圖 組織結構圖 技術架構圖 系統設計圖 其他複雜圖表
2. 可視化驗證
Excalidraw Diagram Skill 支援可視化驗證，能夠自動檢測並修復佈局問題，例如：
重疊文本 錯位箭頭 不平衡間距
3. 可定製品牌風格
Excalidraw Diagram Skill 支援可定製品牌風格，你可以通過修改 color-palette.md 檔案嚟調整圖表嘅顏色同樣式，令佢同你嘅品牌風格保持一致。
4. 兼容性
Excalidraw Diagram Skill 兼容任何支援技能嘅 AI 代理，例如 Claude Code、OpenCode、CodeX 等。
四、效果展示 🍭
最後，Chris 分享幾張用呢個 Skill 製作嘅 WiseMindAI 產品相關嘅效果圖：
上圖提示詞：
幫我畫一個 WiseMindAI 核心功能架構圖，包含：
用戶入口（Web / App） 核心功能層： 文件中心、知識庫、AI 工作台、筆記中心、AI 搜索
學習同輸出層： 知識卡片、AI 考試、學習統計、信息圖
數據同同步層： 瀏覽器剪藏、數據備份
AI 能力層： 大模型、向量數據庫、多模型調度
擴展能力： Skill、API、外部工具接入
要求：
結構從上到下 模塊分組展示 簡潔清晰
上圖提示詞：
幫我生成一個 WiseMindAI 用戶使用場景流程圖，用「一個人學習新知識」做主線，展示完整過程：
用戶遇到問題或學習需求 收集資料（上傳檔案 / 收藏網頁） AI 自動解析內容 構建個人知識庫 通過 AI 對話理解內容 自動生成筆記 轉換成知識卡片進行記憶 通過 AI 考試檢測掌握情況 最終生成總結或信息圖進行輸出
上圖提示詞：
幫我畫一個知識庫使用流程圖，包含以下步驟：
創建知識庫 添加資料（檔案 / 網頁） 系統自動整理內容 AI 提問同總結 輸出結果（筆記 / 信息圖） 要求：
用簡單流程圖 每一步用一句話說明 風格簡潔清晰
五、總結 📝
就好似開頭提到咁，Excalidraw 手繪風嘅自由感好正，但複雜圖表嘅排版真係好攰人。Excalidraw Diagram Skill 嘅出現，啱啱好補返呢塊短板。佢將「構思圖表」同「落地排版」徹底解耦，配合內置嘅視覺校驗，交付效果好。
如果你成日要寫技術文檔、做項目演示或梳理複雜系統，Excalidraw Diagram Skill 絕對值得一試。
歡迎喺評論區交流～
近期推薦
關注 “AI 工具派”
探索最新 AI 工具，發現 AI 帶來的無限可能性！
Hi，我是Chris，一個專注於探索各類 AI工具的博主，與大家一起發掘 AI 的潛力。我正在開發WiseMindA，期待它能成為提升學習好搭子。
Hi，我是 Chris。
最近看到 X 很多人在分享製作漂亮架構圖的 Skill，畢竟寫文檔、做方案、講架構的時候，最頭疼的不是內容，而是畫圖。
Chris 一直使用 Excalidraw，畫圖確實很舒服，很自由，但一旦圖複雜起來，排版混亂、結構不清晰、反覆調整就會很麻煩了。
我最近找到一個很不錯的 Skill，叫做 Excalidraw Diagram Skill，可以幫你一鍵生成清晰好看的圖。
補充下：
Excalidraw 是一個開源的虛擬手繪風格白板，目前有 121k Star，支持協作和端到端加密，可用於創建手繪風格的圖表、線框圖等。
官方網址：https://excalidraw.com/
一、項目介紹 🌈
🌟 工具名稱：Excalidraw Diagram Skill
🔗 工具地址：https://github.com/coleam00/excalidraw-diagram-skill
Excalidraw Diagram Skill 是一款非常不錯的 Skill，可以將自然語言描述轉換為美觀實用的 Excalidraw 圖表。它專注於將複雜的概念和流程可視化，讓溝通更清晰、更高效。
因為本身是個標準的 Skill 項目，所以可以無縫接入 Claude Code、OpenCode、CodeX 等主流 AI Agent 工具，甚至 QClaw、WordBuddy 這些工具也支持。
二、快速上手 🚀
安裝方式跟其他 Skill 一樣，最簡單的方式就是通過對話方式讓 Claude Code 等工具直接安裝：
幫我安裝 https://github.com/coleam00/excalidraw-diagram-skill 這個 Skill
Chris 本來使用 Claude Code 安裝但是一直報錯，卡在 uv run playwright install chromium一個多小時，於是就換成 QClaw 去安裝使用：
安裝 Skill 的時候，會自動運行所需命令，安裝 Playwright 依賴（用於把 .excalidraw 渲染為 PNG）。
由於 Skill 會使用 Playwright 生成圖片，而 Chris 發現 QClaw 竟然會自動設置成電腦在使用的 Chrome，這樣就不用去安裝 Playwright 了，不錯。
當然還可以使用腳本進行安裝：
# 1️⃣ 克隆倉庫
git clone https://github.com/coleam00/excalidraw-diagram-skill.git
# 2️⃣ 複製到你的項目技能目錄
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
✅ 兼容任何支持 Skills 的編碼代理（如 Claude Code、OpenCode），放入 .claude/skills/ 目錄即可自動識別。
Excalidraw Diagram Skill 使用起來非常簡單：
輸入描述：在 AI 代理中輸入自然語言描述，例如 "創建一個流程圖，展示 AI 搜索增強（RAG）流程"。 生成圖表：AI 代理會自動分析描述內容，並生成相應的 Excalidraw 圖表。 查看結果：查看生成的圖表，並根據需要進行調整。
整個過程非常簡單，幾分鐘就能完成從描述到圖表的轉換。
當然，你還可以提供更詳細的指令，比如：
幫我畫一個 RAG（檢索增強生成）架構圖，包含：
- 用戶提問
- 向量化處理（Embedding）
- 向量數據庫（存儲知識）
- 相似度檢索
- Prompt 拼接
- 大模型生成回答
- 返回結果
要求：
- 展示完整數據流
- 每個步驟用簡單語言說明
生成完成後，系統會同時交付 .png 和 .excalidraw 兩個文件：
.png：高清圖片，適合直接插入 Markdown 文檔、飛書或 PPT 中。.excalidraw：源文件，支持一鍵導入 Excalidraw 白板進行二次編輯。畢竟 AI 生成後，偶爾仍有局部不滿足需求的地方。此時直接導入源文件手動微調（比如複雜腦圖的節點位置），比自己從零拖拽快得多。
三、核心功能 🔍
1. AI 圖表生成
Excalidraw Diagram Skill 的核心功能是 AI 圖表生成。它能夠根據自然語言描述自動生成結構清晰、風格一致的圖表，包括：
流程圖 組織結構圖 技術架構圖 系統設計圖 其他複雜圖表
2. 可視化驗證
Excalidraw Diagram Skill 支持可視化驗證，能夠自動檢測並修復佈局問題，例如：
重疊文本 錯位箭頭 不平衡間距
3. 可定製品牌風格
Excalidraw Diagram Skill 支持可定製品牌風格，你可以通過修改 color-palette.md 文件來調整圖表的顏色和樣式，使其與你的品牌風格保持一致。
4. 兼容性
Excalidraw Diagram Skill 兼容任何支持技能的 AI 代理，例如 Claude Code、OpenCode、CodeX 等。
四、效果展示 🍭
最後，Chris 分享幾張使用這個 Skill 製作的 WiseMindAI 產品相關的效果圖：
上圖提示詞：
幫我畫一個 WiseMindAI 核心功能架構圖，包含：
用戶入口（Web / App） 核心功能層： 文件中心、知識庫、AI 工作台、筆記中心、AI 搜索
學習與輸出層： 知識卡片、AI 考試、學習統計、信息圖
數據與同步層： 瀏覽器剪藏、數據備份
AI 能力層： 大模型、向量數據庫、多模型調度
擴展能力： Skill、API、外部工具接入
要求：
結構從上到下 模塊分組展示 簡潔清晰
上圖提示詞：
幫我生成一個 WiseMindAI 用戶使用場景流程圖，用“一個人學習新知識”為主線，展示完整過程：
用戶遇到問題或學習需求 收集資料（上傳文件 / 收藏網頁） AI 自動解析內容 構建個人知識庫 通過 AI 對話理解內容 自動生成筆記 轉換為知識卡片進行記憶 通過 AI 考試檢測掌握情況 最終生成總結或信息圖進行輸出
上圖提示詞：
幫我畫一個知識庫使用流程圖，包含以下步驟：
創建知識庫 添加資料（文件 / 網頁） 系統自動整理內容 AI 提問與總結 輸出結果（筆記 / 信息圖） 要求：
使用簡單流程圖 每一步用一句話說明 風格簡潔清晰
五、總結 📝
就像開頭提到的，Excalidraw 手繪風的自由感很棒，但複雜圖表的排版確實耗人。Excalidraw Diagram Skill 的出現，剛好補齊了這塊短板。它把“構思圖表”和“落地排版”徹底解耦，配合內置的視覺校驗，交付效果好。
如果你經常要寫技術文檔、做項目演示或梳理複雜系統，Excalidraw Diagram Skill 絕對值得嘗試。
歡迎評論區交流～
近期推薦