diagram-design: 에이전트가 브랜드에 맞춰 그리는 44종 에디토리얼 다이어그램
diagram-design은 Claude Code, Codex, Copilot, Cursor 같은 환경에서 다이어그램을 브랜드에 맞춘 자체 완결형 HTML과 SVG 파일 하나로 그려 주는 에이전트 스킬이다. 44가지 유형을 제공하고, draw.io와 Excalidraw 가져오기, PNG와 SVG 내보내기를 지원하며, MIT 라이선스를 따른다.
개발자가 코딩 에이전트에게 아키텍처 다이어그램을 그려 달라고 하면, 흔히 Mermaid 코드가 나오고 그림자가 있는 회색 상자와 제각각인 글꼴로 렌더링된다. cathrynlavery/diagram-design 저장소는 바로 이 작지만 현실적인 불편을 겨냥한다. 이것은 에이전트 스킬(Agent Skill)로, 에이전트가 모든 다이어그램을 자체 완결형 HTML과 SVG 파일 하나로 그리게 한다. 더블클릭으로 열 수 있고 사용자 자신의 브랜드를 따른다. 프로젝트는 44가지 다이어그램 유형을 제공한다고 밝히며, 구호도 직설적이다. 그림자 없음, Mermaid식 조잡함 없음. README에는 Trendshift 배지도 붙어 있어 개발자들의 관심을 받고 있음을 보여 준다.
사용 방식은 일부러 가볍게 만들었다. 사용자는 자연어로 요청한다. 예를 들어 프런트엔드, 백엔드, 데이터베이스, Redis 캐시가 들어간 아키텍처 다이어그램이나, 2분기 프로젝트를 영향과 노력 기준으로 나눈 사분면이다. 에이전트가 다이어그램 유형을 고르고 계획을 밝힌 뒤 .html 파일 하나를 쓴다. 설치도 npx skills add cathrynlavery/diagram-design 한 줄이면 된다. 대상은 Agent Skills를 읽는 모든 환경이며, README는 Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp를 든다. 특정 한 회사의 도구에 묶이지 않는 이 설계가 주목해야 할 첫 번째 이유다.
두 번째 이유는 브랜드 온보딩이다. 사용자가 에이전트에게 diagram-design을 자기 웹사이트에 맞춰 달라고 하면, 스킬이 그 사이트의 색상과 글꼴을 가져와 이후 생성하는 모든 그림이 사이트와 일치하게 된다. 이로써 다이어그램 스타일은 대화마다 쓰고 버리는 프롬프트에서 재사용 가능한 영속적 설정으로 바뀐다. 콘텐츠 팀과 디자인 팀에게는 색상을 프롬프트에 매번 설명하는 것보다 훨씬 믿을 만하다. README는 draw.io, Mermaid, Excalidraw에서 가져오는 경로와 PNG, SVG로 내보내는 경로도 안내한다. 기존 자산을 버릴 필요가 없고, 완성된 그림을 문서와 슬라이드에 넣을 수 있다.
배포 방식도 눈여겨볼 만하다. Claude Code에서는 플러그인 마켓플레이스로 설치하면 업데이트와 /export-diagram, /import-mermaid, /profile, /doctor 같은 슬래시 명령을 받는다. skills CLI를 통한 독립 설치는 Agent Skill 본체만 설치하며, 마켓플레이스 업데이트를 따라가지 않으므로 npx skills update diagram-design을 직접 실행해야 한다. 선택한 환경의 디렉터리가 둘 이상이면 CLI는 심볼릭 링크를 권한다. 기준 사본 하나를 각 디렉터리에 연결하므로 한 번의 업데이트가 모두에 닿는다. --copy를 주면 환경별 독립 사본이 된다. 개발자 모드가 꺼진 Windows처럼 링크를 쓸 수 없는 곳에서는 복사로 전환하고 결과를 알린다. 여러 환경에서 가장 흔한 버전 불일치를 작성자가 고려했음을 알 수 있다.
신뢰와 출처에 대해 README는 절제된 어조를 유지한다. 공식 빌드는 이 저장소에서만 나온다. 플러그인 디렉터리 등록을 하는 곳은 작성자 Cathryn Lavery의 회사 LittleMight이며, 다른 이름의 등록은 비공식 사본이라고 밝힌다. PRIVACY.md에는 스킬이 네트워크로 보내는 내용이 정리되어 있다. 라이선스는 MIT이고 지속적 통합과 버전 배지도 있다. 에이전트가 코드베이스 안에서 실행하는 스킬이라면, 출처 선언과 네트워크 동작 공개는 기업이 도입 전에 반드시 확인해야 할 최소 조건이다.
우리의 평가는 이렇다. diagram-design의 가치는 그리기 도구가 하나 더 생겼다는 데 있지 않다. 디자인 제약을 에이전트가 호출할 수 있는 스킬로 묶었다는 데 있다. 결과물은 HTML과 SVG 파일 하나이므로 버전 관리에 넣을 수 있고, 차이를 검토할 수 있으며, 외부 렌더링 서비스에 의존하지 않는다. 위험도 분명하다. 44가지 유형의 실제 품질은 사용자가 프로젝트 갤러리에서 직접 판단해야 한다. 브랜드 온보딩은 대상 사이트의 스타일이 얼마나 정돈되어 있는지에 좌우된다. 스킬 생태계는 빠르게 바뀌므로 환경마다 동작이 다를 수 있다. 팀은 먼저 아키텍처도와 시퀀스도처럼 가장 자주 쓰는 두세 가지를 그려 현재의 Mermaid 흐름과 비교한 뒤, 확대 도입 여부를 정하기를 권한다.
Sources
FAQ
diagram-design은 무엇이며 Mermaid와 어떻게 다른가?
독립형 그리기 앱이 아니라 에이전트 스킬이다. 에이전트가 스킬을 읽은 뒤 자체 완결형 HTML과 SVG 파일 하나를 작성하며, 더블클릭으로 열 수 있다. 그림자를 쓰지 않고 브랜드에 맞추는 점을 강조하고, 기본 Mermaid식 결과물을 피해야 할 대상으로 본다. Mermaid 가져오기 경로도 있어 기존 도표를 옮길 수 있다.
어떤 에이전트 환경을 지원하며 어떻게 설치하는가?
README는 Agent Skills를 읽는 모든 환경에서 동작한다고 하며 Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp를 든다. 공통 명령은 npx skills add cathrynlavery/diagram-design이다. Claude Code에서는 플러그인 마켓플레이스로 설치해 업데이트와 슬래시 명령을 받을 수 있다.
팀이 도입 전에 확인해야 할 것은 무엇인가?
먼저 출처와 개인정보를 본다. 공식 빌드는 이 저장소에서만 나오며, PRIVACY.md에 스킬이 네트워크로 보내는 내용이 적혀 있다. 그다음 아키텍처도와 시퀀스도 같은 흔한 유형 두세 가지를 현재 흐름과 비교한다. 44가지 유형의 품질은 프로젝트 갤러리에서 직접 판단한다.