Community程式設計與開發github.com

wliafe/drawio-skill

使用 Next AI Draw.io MCP 檢查連線、引導授權安裝、操作工作階段和圖中物件,儲存目前修改並匯出 drawio、PNG、SVG、可編輯 drawio.svg。適用於需要呼叫該 MCP、插入圖片前控制容量、同步匯出及依主題版本管理檔案的任務。

drawio-skill 是什麼?

此技能(Draw.io MCP 操作技能)專為 AI 智能體(如 Claude Code、Cursor、Codex)設計,其核心功能是透過 Next AI Draw.io MCP Server (`@next-ai-drawio/mcp-server`) 來執行繪圖任務。它負責確保工具的正確使用與可靠交付,包括檢查 MCP 連線、引導授權安裝、管理工作階段、操作圖中物件(如新增、編輯、刪除),以及將圖表儲存與匯出為多種格式。此技能會先根據使用者請求決定任務類型(新建、修改、保存或匯出),並透過 MCP 工具(如 `get_diagram`、`edit_diagram`、`export_diagram`)與圖表互動。在插入圖片前,它會依據容量限制進行壓縮處理,以避免超出承載上限。儲存與匯出時,它會同時產生 `.drawio`、`.png`、`.svg` 及可編輯的 `.drawio.svg` 檔案,並確保檔案內容的一致性與完整性。此技能支援多頁編輯、物件選取與同步衝突處理,並會依據主題版本在指定目錄(如 `項目文檔/主題名稱/v1/`)中管理檔案。它會詳細回報操作結果,包括已完成的檢查與任何限制或錯誤,確保使用者能清楚掌握狀態。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add wliafe/drawio-skill

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Draw.io MCP 操作技能

使用 Next AI Draw.io MCP Server(@next-ai-drawio/mcp-server)執行已經確定的繪圖任務。本技能負責工具使用和可靠交付,不規定構圖、配色、字體或研究表達方法。核心流程適用於不同 AI 用戶端;工具發現、呼叫及技能載入方式由目前宿主決定。

先確定任務與服務

  1. 從使用者請求與目前上下文確定:新建、修改現有檔案、繼續目前畫布,還是儲存使用者剛做的手動修改。優先使用明確指定的材料、目標目錄和現有版本。
  2. 查看目前暴露的 MCP 工具,按實際工具描述映射下文的服務工具名,例如 get_diagram、edit_diagram、export_diagram;不要寫死用戶端命名空間、服務別名或呼叫語法。
  3. 目標工具已暴露且目前用戶端允許呼叫時,使用唯讀 get_drawing_guide 驗證回應;保留現有禁用與拒絕決定。已可用則繼續,不重複新增。工具未暴露不等於未安裝;需要檢查設定、安裝、重新載入或診斷時,讀取 MCP 檢查與安裝。
  4. 這套流程針對上述套件。使用者明確指定其他繪圖服務時,保留其選擇,說明適配邊界,不擅自替換。

已存在的服務按套件身份識別;服務名可以不是 drawio。只有設定可見但尚未實際回應時,報告「已設定,尚待驗證」。缺少工具、終端或設定存取能力時,提供目前可執行的方法,不把無法檢查說成服務不存在。

確定交付位置與版本

預設在 項目文檔/主題名稱/v1/ 儲存四個同名檔案:主題名稱.drawio、主題名稱.png、主題名稱.svg、主題名稱.drawio.svg。名稱可中可英,版本只放在目錄中。新主題從 v1 開始;已有圖保持目前版本,只有使用者明確要求時才新增 vN。

已有檔案繼續使用原路徑和名稱,不自動改名、遷移或升級版本。使用者指定的目錄、格式和編輯邊界優先。涉及命名、新版本、多頁或拆圖時,讀取 繪圖與檔案約定。

工作階段與物件操作

  • 按目前任務提供的內容和設計執行 MCP 操作;需要的輸入無法推斷時,只確認會改變操作物件或結果的缺項。
  • 優先復用已確認的目標工作階段。確實需要新建或復原工作階段時呼叫 start_session,讀取其中的工具格式和操作約束;缺少該資訊時用 get_drawing_guide。檢查連線不需要新建工作階段。
  • 對現有檔案使用 load_diagram 後,先 get_diagram 讀取物件 ID,再透過 edit_diagram 依 ID 修改。已知且仍有效的目前畫布可直接做局部編輯;發生並發修改衝突時,依據服務傳回的最新內容重新組織編輯,不覆蓋使用者的新修改。
  • load_diagram 和 create_new_diagram 會取代目前文件。切換前先確認目前畫布是否是目標、是否有應保留的手動修改。使用者要求儲存目前修改時,直接讀取並匯出目前畫布,不先載入磁碟舊檔案。
  • 僅新建圖或使用者明確要求整體取代時使用 create_new_diagram。所有 .drawio / .drawio.svg 寫入和修改均透過 MCP;不要用檔案工具或腳本直接重寫圖 XML。按工具需要建構 XML 參數屬於正常呼叫。
  • 文字、節點、關係和分組保持可編輯;素材可以嵌入,但不能把整幅圖扁平化成圖片代替可編輯來源檔案。
  • 使用雲服務、網路裝置等圖示前呼叫 get_shape_library,採用傳回的真實樣式名;不猜測圖示標識。
  • 多頁編輯先用 list_pages 確定目標,顯式使用頁選擇參數,不依賴預設第一頁。使用者說「這個框」「選中的箭頭」時,可用 get_selection。選擇讀取不可用時,讀取畫布並按頁、標籤和位置定位;仍有多個候選才具體詢問,不重裝服務或反覆要求重新選擇。

圖片與容量

插入圖片前讀取 圖片預處理與容量控制。先檢查素材及預計嵌入體積,必要時壓縮副本:照片允許適度縮放和有損壓縮,文字、細線和透明素材優先保真。不覆蓋原素材,不自動安裝預處理軟體。

預算要覆蓋真實 Base64、完整圖 XML、序列化請求和匯出回傳。get_diagram 可能摺疊圖片資料,不能用傳回文字長度證明圖未超限。插入大素材後及早透過 MCP 試匯出;圖的建立、修改和四種格式匯出只使用 MCP,不能用其他工具補匯出,也不編造 width、height、scale 等未暴露參數。

壓縮到可接受清晰度後仍受阻,保留成功成果、說明瓶頸,由使用者決定是否繼續壓縮、刪素材或拆圖,不自動改變內容或分頁。

儲存與匯出

  1. 儲存前用 get_diagram 讀取目前畫布,對應檔案、頁及輸出路徑。先檢查同步警告;「呼叫成功但可能遺漏最新手動修改」不是最新狀態已確認。先恢復同步再正式匯出;若工具已寫入檔案,明確該檔案的最新性尚未驗證,並在恢復後重新匯出。
  2. 透過 export_diagram 儲存 .drawio;完整多頁來源檔案不帶頁選擇參數。預設再匯出 PNG、SVG、可編輯 .drawio.svg,使用者明確只需部分格式時按其要求。影像與可編輯 SVG 顯式選定目標頁,不依賴瀏覽器活動頁。
  3. .drawio.svg 使用對應格式實際匯出,不能把普通 SVG 改名代替。核對嵌入的圖源內容;安全回讀前先儲存目前畫布。多頁時說明該副本包含的頁,不能把單頁副本當作完整來源檔案。
  4. 匯出後再次讀取並核對可觀察的內容狀態,檢查同步警告。服務沒有通用快照鎖;若期間內容變化,重新同步並匯出受影響檔案,不把一次讀取當成四檔案一致性的保證。持續變化或無法確認時明確未完成同步驗收,必要時請使用者暫緩手動編輯。
  5. 路徑使用 MCP 實際執行環境中的絕對路徑。核對檔案生成及最終渲染中的內容完整性、素材是否缺失;截圖正常不代表正式匯出成功。唯讀 XML 或看到匯出成功訊息,也不能代替實際渲染檢查。
  6. 連線恢復後可重試一次;明確容量問題須先修正容量,再重試受影響步驟一次。無變化不重複呼叫,仍失敗時說明具體瓶頸和缺失格式。詳細儲存規則見 繪圖與檔案約定。

回饋結果

簡要給出來源檔案、圖片、使用的版本,以及已完成的檢查。把「設定存在」「工具回應」「檔案已儲存」「已查看渲染」分別據實說明。

若圖片匯出或視覺檢查受阻,先保留已成功儲存的來源檔案,說明缺少的格式和具體原因;不要用舊圖片充當本次匯出,不要把未驗證部分寫成完成。

相關技能