用 Claude Code 做了 4 张架构图，然后我把设计系统抽成了 Skill

用 Claude Code 生成了 4 张微服务架构图（系统架构、业务架构、系统拓扑、数据流）。迭代过程中踩了布局、配色、内容规范的各种坑，最终把所有经验提炼成一个可复用的 Claude Code Skill。团队里任何人输入 /drawio-arch 就能生成同等质量的架构图。

1. 起因

项目需要一套完整的微服务架构图。之前用 draw.io 手动画过，一张图调半天对齐和配色，4 张图花了一整周。

这次想试试让 Claude Code 直接生成 draw.io 的 XML。目标很朴素——生成出来能在 draw.io 里打开，不丑，能用。

2. 第一版出来，惨不忍睹

第一次生成的结果，问题一堆，而且每次生成都出同样的问题：

不是偶发的小毛病，是系统性的问题。每生成一次就要手动修一次，比直接画还慢。

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 文件里「自由发挥」颜色。它觉得这样好看，但每次选的颜色不一样。

解决方法：定义了一套语义化色板，每个颜色绑定一个角色：