Draw IO 说明文档

# draw-io 图表技能 一个用于创建、编辑和管理具有专业质量标准的 draw.io 图表的 Claude Code 技能。 ## 目的 此技能支持 AI 辅助创建和维护 draw.io 架构图、流程图和技术文档视觉效果。它确保了样式的一致性、正确的布局以及用于演示和文档的自动 PNG 转换。 ## 何时使用此技能 当您需要执行以下操作时使用此技能： - 创建或编辑 `.drawio` XML 图表文件 - 将图表转换为具有透明背景的 PNG 格式 - 以编程方式调整元素位置和布局 - 确保一致的字体系列（特别是针对 Quarto 幻灯片） - 使用官方图标处理 AWS 架构图 - 保持具有可访问性标准的专业图表质量 - 调试布局问题或元素重叠 ## 工作原理 该技能提供： 1. **直接 XML 编辑**：将 `.drawio` 文件作为结构化 XML 进行操作 2. **自动转换**：通过预提交钩子或脚本将图表转换为高分辨率 PNG 3. **布局计算**：计算正确的间距、对齐方式和边距 4. **图标集成**：搜索并集成官方 AWS 图标 5. **质量保证**：应用设计原则和可访问性指南 ## 关键特性 ### 1. 字体管理 确保图表中的排版一致： - 在 mxGraphModel 中设置 `defaultFontFamily` - 将 `fontFamily` 应用于单个文本元素 - 推荐：使用 "Noto Sans JP" 以支持日语文本 ### 2. PNG 转换 多种转换方法： bash # 通过预提交钩子（所有文件） mise exec -- pre-commit run --all-files # 通过预提交钩子（特定文件） mise exec -- pre-commit run convert-drawio-to-png --files assets/my-diagram.drawio # 直接脚本执行 bash ~/.claude/skills/draw-io/scripts/convert-drawio-to-png.sh assets/diagram.drawio 转换生成： - 2 倍缩放（高分辨率） - 透明背景 - 适合演示的 PNG 格式 ### 3. 布局调整 以编程方式定位元素： - 计算元素中心：`y + (height / 2)` - 通过匹配中心坐标对齐多个元素 - 保持与容器边界至少 30px 的边距 - 定位箭头以避免标签重叠（20px+ 间隙） ### 4. AWS 图标集成 搜索并集成官方 AWS 服务图标： bash python ~/.claude/skills/draw-io/scripts/find_aws_icon.py ec2 python ~/.claude/skills/draw-io/scripts/find_