AI 코딩 에이전트에게 시스템 구조도를 요청하면 투박한 둥근 상자나 복잡한 Mermaid 결과물이 나오는 경우가 많습니다. diagram-design 프로젝트는 이 문제를 해결하기 위해 등장한 에이전트 전용 스킬입니다. 외부 의존성 없이 에디토리얼 품질의 HTML과 SVG 다이어그램을 작성합니다.

디자인 원칙과 세 가지 스타일 변주

diagram-design 스킬은 불필요한 장식을 배제하고 세 가지 기본 테마를 제공합니다. 미니멀 라이트, 미니멀 다크, 풀 에디토리얼 스타일로 구성되며 자바스크립트나 별도 빌드 단계 없이 브라우저에서 곧바로 열립니다. 군더더기를 줄였습니다.

시각적 밀도는 10점 만점에 4 수준을 지향합니다. 강조 색상은 시선이 먼저 닿아야 하는 한두 개 요소에만 제한하여 적용합니다. 웹사이트 URL을 분석해 브랜드를 60초 만에 파악하고 스타일을 맞추는 기능도 갖췄습니다. 직관적입니다.

42가지 다이어그램 유형과 세만틱 패턴

이 프로젝트는 시퀀스, 플로우차트, 데이터베이스 스키마 등 42가지 시각 유형을 지원합니다. 최근 v2.5.10 버전에서는 Sankey, Fishbone, Wardley map, Kanban, Dependency graph 등 10가지 레이아웃이 새로 추가되었습니다. 시스템 동작과 레이아웃을 분리하는 세만틱 패턴을 써서 유형 수를 과도하게 늘리지 않고도 다양한 상태를 표현합니다.

기존 Mermaid나 Excalidraw 소스를 가져와 지정한 포맷과 상세 수준으로 다시 그려내는 재작성 기능도 갖췄습니다. 정적 출력이 기본이지만 순차적 설명을 위한 동적 모션 옵션도 선택할 수 있습니다. 활용도가 높습니다.

에이전트 환경별 설치 및 적용 방법

다양한 에이전트 CLI 환경에서 전용 명령어로 스킬을 손쉽게 설치합니다. Claude Code에서는 /plugin marketplace add cathrynlavery/diagram-design 명령어로 마켓플레이스를 등록한 후 플러그인을 설치합니다. 자동 업데이트 옵션을 켜면 세션 시작 시 배경에서 최신 버전을 자동으로 불러옵니다.

Codex나 GitHub Copilot, Factory Droid, Pi 등에서도 각각의 패키지 관리 명령어나 저장소 주소를 지정해 바로 활용합니다. 조직용 Claude Cowork 환경은 미러 저장소를 연결해 자동 동기화 루틴을 구축합니다. 편리합니다.

외부 디자인 도구 없이 코드 환경 안에서 완성도 높은 도면을 얻는 실용적인 접근법입니다. AI 개발 워크플로우에 깔끔한 시각적 렌더링을 더해 줍니다.

요약

  • 빌드 단계, 자바스크립트, 외부 이미지 의존성 없이 단일 파일 형태의 HTML과 SVG로 고품질 다이어그램을 생성합니다.
  • v2.5.10 업데이트를 통해 Sankey, Wardley map, DB 스키마 등 총 42가지의 풍부한 에디토리얼 레이아웃을 제공합니다.
  • Claude Code, Codex, GitHub Copilot, Pi 등 주요 AI 에이전트 CLI 환경에 플러그인 형태로 간단히 통합됩니다.