用 Claude Code 生成了 4 张微服务架构图（系统架构、业务架构、系统拓扑、数据流）。迭代过程中踩了布局、配色、内容规范的各种坑，最终把所有经验提炼成一个可复用的 Claude Code Skill。团队里任何人输入/drawio-arch就能生成同等质量的架构图。1. 起因项目需要一套完整的微服务架构图。之前用 draw.io 手动画过，一张图调半天对齐和配色，4 张图花了一整周。这次想试试让 Claude Code 直接生成 draw.io 的 XML。目标很朴素——生成出来能在 draw.io 里打开，不丑，能用。2. 第一版出来，惨不忍睹第一次生成的结果，问题一堆，而且每次生成都出同样的问题：问题具体表现模块宽度不统一同一行 5 个模块，有的 200px 有的 308px，参差不齐容器互相遮挡拓扑图里外部数据源面板和微服务面板位置重叠底部参差不齐5 个图层放下来，左边到底了右边还空一截颜色随意发挥同样是 AI 模型，Kimi 绿色、GLM 蓝色、MiniMax 又是另一个绿文字拼接 bug“LLM服务PodLLM服务Pod”、“DeepSeekDeepSeek大模型”不是偶发的小毛病，是系统性的问题。每生成一次就要手动修一次，比直接画还慢。3. 逐个击破：踩坑和解决3.1 布局问题的根源——Claude Code 不会算坐标draw.io 的每个元素都是绝对定位（x, y, width, height）。Claude Code 的做法是「估一个大概位置」，结果就是每次都不一样。解决方法：写了一套模块均分填充公式，直接告诉它怎么算坐标：// N 个模块均匀排布在容器宽度 W 内 availableWidth = W - 2 * padding - (N - 1) * gap moduleWidth = Math.floor(availableWidth / N) x_i = padding + i * (moduleWidth + gap)有了公式，同一行的模块自动等宽等距。不需要 Claude Code 「估算」，直接算。3.2 配色问题的根源——没有色板约束Claude Code 会从它见过的 draw.io 文件里「自由发挥」颜色。它觉得这样好看，但每次选的颜色不一样。解决方法：定义了一套语义化色板，每个颜色绑定一个角色：语义色值用途Primary Blue#1E88E5核心服务模块Header Blue#1565C0图层标题栏Infra Dark#0D47A1基础设施节点Container BG#E3F2FD容器背景New Feature#43A047新功能/二次服务