用 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 | 新功能/二次服务 |
