AI 코딩 에이전트로 다이어그램 44종 한 방에 뽑는 법

복잡한 다이어그램 툴을 익히거나 Mermaid 문법과 씨름할 필요 없이, 쓰는 AI 에이전트에게 말로만 시켜서 바로 쓸 수 있는 다이어그램을 얻는 방법을 정리했습니다.

diagram-design이란 무엇인가요

cathrynlavery/diagram-design은 AI 코딩 에이전트가 바로 사용할 수 있는 에이전트 스킬(Agent Skill) 형태의 다이어그램 생성 도구예요. 6개월 전(2026년 4월)에 처음 만들어져 이번 달(2026년 10월)에도 업데이트되었으며, GitHub 스타 5만 개(50K)를 기록할 만큼 큰 주목을 받고 있어요.

Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Pi, Gemini CLI, Cline, Windsurf, Amp 등 에이전트 스킬을 지원하는 다양한 환경에서 그대로 동작해요. 에이전트에게 자연어로 요청하면 적절한 다이어그램 유형을 골라 계획을 세운 뒤 더블 클릭으로 바로 열어볼 수 있는 단일 .html 파일로 생성해 줘요.

npx skills add cathrynlavery/diagram-design

왜 이 스킬을 쓰나요

기존 AI 도구로 다이어그램을 만들면 흔히 겪는 획일적인 렌더링 스타일이나 Mermaid 특유의 어색한 레이아웃에서 벗어날 수 있어요. 이 스킬은 복잡한 외부 의존성 없이 단 하나의 독립된 HTML + SVG 파일로 깔끔한 결과물을 완성해 줘요.

총 44종의 다이어그램 유형을 지원해 아키텍처 구조도부터 사분면 차트, 시퀀스 다이어그램까지 상황에 맞춰 유연하게 그릴 수 있어요. 단순히 새로 그리는 데 그치지 않고 기존 자산을 가져오거나 다양한 포맷으로 내보내는 기능도 탄탄해요.

• 브랜드 스타일 자동 적용: 사이트 주소를 지정해 온보딩하면 브랜드 색상 팔레트와 폰트를 가져와 모든 다이어그램에 동일한 스타일을 입혀요.
• 가져오기(Import): Draw.io, Mermaid, Excalidraw 형식의 기존 다이어그램을 불러와 작업할 수 있어요.
• 내보내기(Export): 완성된 다이어그램을 PNG나 SVG 형식으로 간편하게 추출해 문서나 발표 자료에 바로 활용해요.

평소 자주 쓰는 코딩 에이전트에 자연어로 아키텍처나 플로우를 설명하기만 하면, 에이전트가 알아서 최적의 다이어그램 유형을 선택하고 계획을 세워 하나의 완성된 파일로 뽑아내 줘요.

지원하는 에이전트와 설치 방법

이 스킬은 Claude Code·Cursor·Codex·GitHub Copilot·Gemini CLI·Cline·Windsurf·Amp 등 Agent Skills 표준을 따르는 모든 호스트에서 쓸 수 있어요. 설치 명령어는 호스트 구분 없이 똑같습니다.

npx skills add cathrynlavery/diagram-design

Claude Code에서 자동 업데이트 켜기

Claude Code는 서드파티 마켓플레이스의 자동 업데이트를 기본으로 끕니다. 한 번만 설정하면 이후 세션부터 백그라운드에서 갱신됩니다.

1. 플러그인 메뉴 열기

   /plugin 명령어를 입력하세요.

2. 마켓플레이스 진입

   Marketplaces 탭을 선택하세요.

3. 스킬 선택

   목록에서 diagram-design을 찾으세요.

4. 자동 업데이트 활성화

   Enable auto-update를 켜세요.

5. 플러그인 다시 불러오기

   안내가 뜨면 /reload-plugins를 실행하거나, 다음 세션을 기다리세요.

다른 호스트(Cursor, Codex, Copilot 등)

위 npx skills add … 명령어 한 줄이면 끝납니다. 별도 설정 없이 에이전트가 바로 스킬을 인식해 다이어그램을 그립니다.

실전 사용 흐름: 자연어로 다이어그램 만들기

스킬을 설치하고 나면 복잡한 설정 없이 평소 쓰던 자연어로 에이전트에게 필요한 다이어그램을 요청하면 돼요. 에이전트가 요구사항을 분석해 44종류 중에서 가장 알맞은 다이어그램 유형을 고르고 계획을 세운 뒤 완성된 결과물을 만들어줘요.

1. 자연어로 다이어그램 요청하기1단계

   에이전트 대화창에 원하는 구조나 시나리오를 일상적인 문장으로 입력해요.

2. 다이어그램 유형 선정 및 계획 수립2단계

   에이전트가 44종의 다이어그램 타입 중 적합한 형식을 스스로 판단하고 진행 계획을 정리해요.

3. 단일 HTML 파일 생성3단계

   외부 의존성 없이 독립적으로 실행되는 하나의 self-contained .html 파일(HTML + SVG)을 작성해 내보내 줘요.

4. 결과물 확인4단계

   생성된 .html 파일을 더블클릭해 브라우저에서 바로 열어보고 확인할 수 있어요.

실제 프롬프트 요청 예시

아키텍처 구성부터 프로젝트 우선순위 사분면, 인증 흐름을 나타내는 시퀀스까지 다양한 상황에서 다음과 같이 요청할 수 있어요.

브랜드 적용·가져오기·내보내기 한눈에 보기

다이어그램을 만들 때 서비스마다 색상이나 글꼴이 제각각이라 매번 수작업으로 다듬느라 번거로우셨나요? diagram-design은 처음부터 내 서비스의 고유한 브랜드 스타일을 그대로 입혀서 그릴 수 있도록 온보딩 기능을 제공해요. 웹사이트 주소만 전달하면 에이전트가 알아서 사이트 팔레트와 폰트를 추출해 동기화해 줍니다.

Onboard diagram-design to https://yoursite.com

기존에 다른 도구로 작업해 두었던 파일도 버릴 필요가 없어요. 여러 도구에서 쓰던 데이터를 손쉽게 가져와서 diagram-design의 스타일로 재구성할 수 있고, 완성된 결과물은 어디서나 쓰기 좋은 형식으로 내보낼 수 있답니다.

• 기존 다이어그램 가져오기: draw.io, Mermaid, Excalidraw로 작성된 기존 다이어그램을 임포트해 세련된 형태로 다시 다듬을 수 있어요.
• 다양한 포맷 내보내기: 완성된 다이어그램은 독립 실행형 HTML 외에도 PNG나 SVG 파일로 손쉽게 내보낼 수 있어요.
• 일관된 브랜드 유지: 사이트 폰트와 컬러가 자동으로 입혀지므로 매번 그래픽 툴을 켜서 테마를 수정할 필요가 없어요.

주의할 점과 라이선스

이 스킬은 MIT 라이선스로 공개되어 있어 상업·비상업 용도 모두 자유롭게 쓸 수 있어요. 다만 라이선스 원문(LICENSE)과 저작권 고지를 함께 포함해야 하니 배포 시 빠뜨리지 마세요.

네트워크 전송 내역(PRIVACY.md) 확인 포인트

• 브랜드 온보딩(Onboard diagram-design to https://yoursite.com) 시 지정한 사이트의 색상·글꼴 메타데이터만 가져옵니다.
• 다이어그램 렌더링·변환 로직은 로컬에서만 동작하며, 생성된 HTML·SVG 파일엔 외부 스크립트·트래커가 없습니다.
• 사용자 코드·데이터·프롬프트 내용을 외부 서버로 전송하지 않습니다.
• 자동 업데이트(마켓플레이스) 시 버전 메타데이터·체크섬 확인용 요청만 발생합니다.

요약하면: 공식 저장소·공식 마켓플레이스만 사용, MIT 라이선스 표기 준수, PRIVACY.md의 네트워크 동작 범위 숙지 세 가지만 지키면 안전하게 쓸 수 있어요.

• 원문 보기