這年頭誰還人工畫圖啊？我用 AI 幾十秒就搞定了。
我在
開源指路：https://github.com/DayuanJiang/next-ai-draw-io
這個項目支持在線體驗，你可以完全從 0 開始畫圖，比如畫一個流程圖，演示 RAG 的工作原理。
⭐️ 建議觀看視頻演示：https://bilibili.com/video/BV18NmnB4EeM
AI 會自動生成 Draw.io 繪圖代碼，很快精美的流程圖就搞定了！
然後你可以利用 Draw.io 自身強大的繪圖能力手動修改任意元素、或者是改變風格樣式。
也可以通過 AI 對話讓它幫你修改，比如改成動畫連接線，逼格一下子就上來了。
還有程序員工作涉及的架構圖：
提示詞：繪製電商平台的微服務架構圖
UML 類圖：
提示詞：用 UML 類圖展示用户管理模塊的設計
ER 圖：
提示詞：繪製在線教育平台的數據庫 ER 圖
時序圖：
提示詞：用時序圖展示用户登錄的交互過程
知識講解圖：
提示詞：用動畫演示冒泡排序的執行過程
甚至是沙雕圖：
提示詞：讓程序員魚皮卑微地求用户點贊
這些通通不在話下，幫你節省大把的時間和毛髮~
還有一些使用小技巧，比如配合免費的圖標庫，讓整個繪圖元素更豐富。
提示詞：使用 AWS 圖標生成 CDN 架構圖
可以使用原生 SVG 動畫標籤，給整個繪圖增加縮放和路徑動畫（不過支持的動畫很有限）。
提示詞：演示 DDOS 攻擊，使用 SVG 的 <animateMotion> 和 <animateTransform type="scale"> 增加縮放和路徑動畫
還可以自己上傳一個草圖，比如我用文本模型生成的 Mermaid 流程圖，讓 AI 幫我替換為更美觀的樣式風格。
提示詞：改為彩虹主題的配色、放大字體、使用加粗動畫連接線
效果還不錯吧！
最後導出為各種圖片或文檔格式，美滋滋~
注意，官方提供的演示網站可能限量和不穩定，像我連續用了幾次就被拒絕了：
所以我建議下載開源代碼到本地，按照官方文檔的説法
最後多説兩句，這個項目的實現其實並不複雜。作者通過集成 Vercel AI SDK 輕鬆對接各種大模型，讓 AI 生成 draw.io 能理解的 XML 代碼，然後直接使用開源的 draw.io 代碼實現了核心的繪圖展示和編輯能力，整個過程和 AI 生成網站是類似的。
你學會了嗎？
