draw-io

draw-io 技能提供了一種自動化、程式化的方法來維護儲存庫中的視覺化文件。此技能專為開發人員與架構師設計，支援直接透過程式碼進行 .drawio 圖表的建立、編輯與品質保證，確保圖表與技術架構保持一致。透過直接操作 XML 與基於 CLI 的匯出流程，它免除了手動繪圖的需要，非常適合需要進行版本控制並與原始碼同步的 CI/CD 流程。

• 利用預提交鉤子 (pre-commit hooks) 與專用 Shell 指令碼，將 .drawio XML 檔案自動轉換為高解析度 PNG。

• 透過直接修改元素的 mxGraphModel XML 結構、群組與連接關係，執行精確的座標式排版調整。

• 支援企業級設計規範，包含特定字型 (例如 Noto Sans JP)、箭頭定位與間距規則。

• 具備進階架構建模能力，支援情境圖、系統圖、元件圖、部署圖與時序圖。

• 內建針對圖表物件的標題、版本與作者追蹤等後設資料管理功能。

• 提供元件對齊、群組容器邊距計算與高對比無障礙標準的驗證規則。

• 使用此技能來維護隨著功能開發更新的技術文件、系統架構流程與資料流向圖。

• 在進行手動調整時，請校對 XML 原始檔中的座標；建議優先採用計算出的中心對齊以確保多元件圖表的視覺一致性。

• 建議使用單向箭頭，並在 XML 中定義明確的來源與目標點，以避免自動產生的 PNG 匯出檔產生渲染歧義。

• 務必設定 defaultFontFamily 以確保簡報幻燈片與文件匯出時的跨平台視覺一致性。

• 遵循漸進式揭露原則，建立從高階系統概覽到細粒度時序圖的階層式圖表。

• 預期的輸入為原始 .drawio XML 檔案；輸出包含更新後的 XML 以及準備好用於網頁或 PDF 的透明背景 PNG 素材。