Diagram Design은 Claude Code, Codex, Factory Droid, Pi 등 다양한 Agent Skills 호환 호스트에서 사용할 수 있는 39가지 유형의 편집 품질(editorial-quality) 다이어그램 생성 도구입니다. 이 시스템은 범용적인 둥근 상자 형태의 다이어그램에서 벗어나, 특정 브랜드의 디자인 언어를 반영한 고품질 시각화 결과물을 생성하는 데 목적을 두고 있습니다.

핵심 방법론 및 기술적 상세

이 시스템은 단순한 템플릿 제공을 넘어, 시각적 레이아웃과 의미론적 패턴(semantic system patterns)을 분리하여 처리하는 계층적 구조를 갖추고 있습니다.

1. 브랜드 온보딩 및 토큰화: 시스템은 사용자의 웹사이트 URL을 입력받아 도메인의 폰트 스택, 주 색상(accent), 배경색(paper), 텍스트 색상(ink) 등을 추출합니다. 이후 references/style-guide.md 파일에 정의된 시맨틱 토큰(semantic roles)으로 매핑합니다. 모든 색상 조합은 WCAG AA 대비(contrast) 표준을 자동으로 검증하여 가독성을 보장합니다.
2. 의미론적 라우팅(Semantic Routing): 다이어그램 생성 시 먼저 '의미론적 패턴'을 선택한 후 '시각적 유형'을 결정합니다. 예를 들어, 큐(queue), 정책 추적(policy trace), 신뢰 경계(trust boundary) 등은 레이아웃과 독립적인 동작 원리를 가지며, 이를 위해 semantic-patterns.md에서 정의된 규칙에 따라 가장 적합한 시각적 템플릿을 선택합니다.
3. 데이터 구조 및 렌더링: 모든 결과물은 외부 이미지 의존성이나 JavaScript 없이 작동하는 독립적인 HTML + SVG 구조로 출력됩니다. 정적 출력이 기본이나, 선택적으로 animation.md를 통해 reveal, step, loop 모드의 모션을 적용할 수 있습니다. 모션은 결정론적 타이밍(deterministic timing)을 따르며, 접근성을 위해 Reduced-motion 모드를 완벽하게 지원합니다.
4. 데이터 변환(Import): draw.io 및 Mermaid 소스를 지원하며, 파이썬 기반의 추출기(drawio_extract.py, mermaid_extract.py)를 통해 원본의 구성 요소, 관계, 방향성을 분석한 뒤 시스템의 디자인 시스템에 맞게 재구성합니다. 이때 사용자의 목적에 따라 detail 수준(faithful, balanced, simplified)과 audience 등을 조정할 수 있습니다.
5. 품질 보증(CI 및 검증): 모든 풀 리퀘스트는 CI 환경에서 lint-skin.py와 lint-render.py(Chromium 기반)를 통해 렌더링 품질을 검사합니다. 특히, boundingClientRect가 감지하지 못하는 오버플로우나 클리핑 문제를 방지하기 위해 픽셀 단위의 스크린샷 차이 분석(pixel-based diff)을 수행하며, treemap과 같은 정량적 인코딩은 기하학적 검증(geometric gate)을 거쳐 면적과 데이터 값의 일치 여부를 보장합니다.

주요 특징

• 다양한 시각화 유형: 39종의 유형(예: Sankey, Fishbone, Wardley map, UML class, DB schema 등)을 지원합니다.
• 파일 기반 제어: 모든 설정은 references/ 디렉토리 내의 파일들로 관리되며, 필요에 따라 수동으로 토큰이나 프로필을 수정할 수 있는 편집 가능한(editable) 설치를 지원합니다.
• 확장성: Pi, Claude Code 등 각 호스트에 최적화된 플러그인 인터페이스와 명령어를 제공하며, docs/cookbook.md를 통해 운영 레시피를 공유합니다.

결론적으로, 이 시스템은 다이어그램을 단순히 정보를 전달하는 도구가 아니라 브랜드 아이덴티티의 연장선으로 취급하며, 기하학적 검증과 시맨틱 패턴을 통해 일관성 있고 수준 높은 기술 문서를 생성하는 데 특화되어 있습니다.