기술 문서로 Claude Code를 이용해 아키텍처 다이어그램을 만들 때 발생하는 SVG 문제 해결

요약

Claude Code를 이용해 아키텍처 다이어그램을 생성할 때 발생하는 SVG 품질 문제를 해결하는 방법을 제시합니다. 'svg-diagram'이라는 Agent Skill을 통해 박스 높이 계산, 곡선 연결선 처리, 화살표 거리 유지 등의 규칙을 정의했습니다.

핵심 포인트

• SVG 아키텍처 다이어그램의 시각적 오류를 개선함.
• Agent Skill에 구체적인 디자인 및 레이아웃 규칙을 적용함.
• 12가지 항목(폰트, 여백 등)을 점검하는 검사기를 추가하여 완성도를 높임.