该技能用于 draw.io 图表的创建、编辑与审校，主要面向 .drawio XML 编辑、PNG 转换、布局调整以及 AWS 图标使用。
基本规则：只编辑 .drawio 文件，不直接编辑 .drawio.png 文件；幻灯片中使用的 .drawio.png 由 pre-commit 钩子自动生成。用于 Quarto 幻灯片时，需在 mxGraphModel 标签指定 defaultFontFamily，并在每个文本元素的 style 中显式指定 fontFamily。
转换命令：转换全部 .drawio 文件可运行 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/diagram1.drawio。draw.io CLI 具体参数需参见 drawio-skills 技能。
布局调整：在文本编辑器中打开 .drawio，按 value 属性定位 mxCell，调整 mxGeometry 的 x、y、width、height；元素中心为 y 加 height 的一半，对齐时使中心一致。
设计原则包括清晰、一致、准确；所有元素需标注，箭头标方向，一个图表达一个概念，复杂系统拆分为分阶段图表，注意颜色对比。幻灯片图表尺寸为 1920x1080，须设 page="0" 透明背景，字体用 Noto Sans JP，限制 1 至 3 种强调色，底部加 takeaway 栏。相关图表集需统一画布宽度、颜色、字体与线宽。
最佳实践：移除 background="#ffffff"，字号约为标准的 1.5 倍（约 18px），日文每字符预留 30 至 40px 宽度，画布按比例缩放；箭头需注意层级顺序、间距 80 至 100px、避免箭头重叠，边标签置于 root 末尾并设 labelBackgroundColor=#ffffff；容器内元素至少留 30px 边距；标签去掉冗余信息。
工作流分为设计、布局计算、实现与验证阶段。验证阶段必须将图转换为 PNG 并目视检查，不能仅凭 XML 判断无问题。可更新文件包括 color-palette.md、layout-guidelines.md 以及 SKILL.md 第 7、9 节。AWS 图标检索脚本为 python ~/.claude/skills/draw-io/scripts/find_aws_icon.py ec2。
限制：资料未提供收费、价格或平台兼容性等说明。