draw.io Diagram Skill 面向需要由 AI 智能体生成或维护 draw.io 图表的场景，核心思路是把图表当作可编辑、可检查的源文件资产来管理。
一、用途 该技能在需要新建 draw.io 图表、编辑或重构现有 .drawio 文件、导出多种格式、检查图表版面问题，或使用 AWS 图标构建架构图时使用。它强调原生 .drawio XML 生成，而非依赖 Mermaid 或 CSV 转换。
二、主要能力
- 生成与编辑：直接创建或修改原生 mxGraphModel XML 格式的 .drawio 文件，保持其作为可编辑的源文件。
- 导出：支持导出为 PNG、SVG、PDF、JPG，其中 PNG、SVG、PDF 可嵌入图表 XML。提供 scripts/export-drawio.mjs 辅助脚本，可自动定位 draw.io CLI，也支持通过 --drawio 指定可执行文件路径；另保留 convert-drawio-to-png.sh 旧版脚本。
- 版面审查：提供 scripts/check-drawio-svg-overlaps.mjs 检查脚本，可检测连线交叉、连线沿边框或穿透方框、箭头末端过短、连线穿过标签、标签与方框碰撞、文字对比度过低、深色卡片文字层级扁平、文字宽高溢出等问题。输入可以是 .drawio 或 .drawio.svg。
- 模板与示例：仓库包含视觉模板说明 references/aesthetic-templates.md、润色模板示例、专业样例（如执行仪表盘、AI 流水线、安全事件）以及多种用途模板。
- AWS 图标：提供 scripts/find_aws_icon.py 用于检索 AWS 图标，并建议使用当前 mxgraph.aws4.* 图标引用。
- 仓库维护命令：npm install、npm run check、npm run verify、npm ci、npm run docs:build、npm run docs:dev 等。
三、使用方式 默认流程为：先创建或更新 .drawio 源文件；新建图且用户未指定风格时，从视觉模板出发；需要导出时生成 .drawio.png、.drawio.svg、.drawio.pdf 或 .drawio.jpg；在展示或声称图表完成前，先导出 SVG 并运行 lint 脚本；lint 即使通过也要进行视觉复核。若 draw.io CLI 不可用，不应跳过检查，而应尽量生成同名 .drawio.svg 运行检查，并如实报告覆盖受限情况（如 parsed 0 edges），再辅以人工或脚本化的几何检查。
导出命令示例： node scripts/export-drawio.mjs architecture.drawio --format png --open node scripts/export-drawio.mjs architecture.drawio --format svg node scripts/export-drawio.mjs architecture.drawio --output architecture.drawio.pdf
手工 CLI 导出示例： drawio -x -f png -e -s 2 -t -b 10 -o architecture.drawio.png architecture.drawio
检查命令示例： node scripts/check-drawio-svg-overlaps.mjs architecture.drawio.svg
四、适用场景 适合架构图、系统图、组件图、部署图、数据流图、时序图等需要长期维护的图表；也适合需要把图表纳入文档、文章或仓库并在 CI 中校验的场景。对于复杂系统，建议拆分为多个层次的图表。
五、限制与注意事项 文字溢出检测为启发式，并非像素级精确；text-contrast 检查要求显式十六进制 fillColor 和 fontColor；lint 通过不替代视觉检查；不要手工编辑生成的 PNG、SVG、PDF；除用户明确要求外，应保留源图。该技能的具体收费、支持平台范围等未在资料中说明，暂未提供。