Claude Code나 Codex로 블로그·발표 자료용 다이어그램을 만들면서 배치와 브랜드 스타일까지 맞추고 싶은 사람에게 Diagram Design은 특정 상황에서 유용합니다. 에이전트에 다이어그램 유형별 시각 규칙과 기존 도식 가져오기 절차를 추가해 HTML·SVG·PNG 결과물을 준비하도록 돕습니다. Git에서 자주 고치는 기술 문서라면 Mermaid를 함께 비교할 만합니다. 2026년 10월 11일 확인한 공식 저장소를 기준으로 설명합니다.
한눈에 보기
| 궁금한 점 | 확인한 내용 |
|---|---|
| 무엇입니까? | 코딩 에이전트가 읽는 지침·템플릿·로컬 스크립트 묶음입니다. |
| 어떤 결과를 만듭니까? | 인라인 SVG를 담은 HTML 파일을 만들고, 요청하면 SVG·PNG로 내보냅니다. |
| 어떤 작업에 맞습니까? | 발표용 아키텍처, 블로그 설명 도식, 브랜드에 맞춘 기존 도식 재작성입니다. |
| 유형은 몇 가지입니까? | 문서는 아키텍처·흐름도·시퀀스·타임라인 등을 포함한 44종을 안내합니다. |
| 시작 명령은 무엇입니까? | npx skills add cathrynlavery/diagram-design입니다. |
| 비용과 라이선스는 어떻습니까? | 프로젝트 코드는 MIT이며, 모델 이용 비용은 에이전트 요금제에 따릅니다. |
| 도입 판단은 무엇입니까? | 특정 상황에 유용합니다. 게시용 도식 한 개로 적합성을 비교합니다. |
기능은 프로젝트 측 문서 설명입니다. 아래 작업 예시는 문서의 시작 절차를 독자가 따라가기 쉽게 구체화한 것이며, 도구를 실행한 결과나 생산성 측정값으로 제시하지 않습니다. README
어떤 작업에 도움이 됩니까?
Diagram Design은 Cathryn Lavery가 공개한 다이어그램 작성용 Agent Skill입니다. Agent Skill은 에이전트가 특정 작업을 할 때 읽는 지침과 참고 파일의 묶음입니다. Claude Code·Codex 같은 코딩 에이전트가 내용을 해석하고 파일을 작성하며, Diagram Design은 그 위에서 도식의 유형·배치·색상·글꼴을 고르는 기준을 제공합니다. 독립적인 웹 편집기에 가입해 도형을 끌어 놓는 방식과는 사용 흐름이 다릅니다. 프로젝트 소개
예를 들어 개발자가 서비스 구조를 설명하는 발표 자료를 준비한다고 가정합니다. 프런트엔드, 백엔드, 데이터베이스, Redis 캐시의 관계는 알고 있지만, 에이전트가 즉석으로 만든 그림마다 간격과 색이 달라지는 상황입니다. 이때 입력은 구성 요소와 연결 관계이고, 기대 결과는 읽는 순서와 강조점이 정돈된 도식입니다. README의 첫 요청 예시도 이 네 요소로 아키텍처를 그리는 작업을 안내합니다. 시작 예시
관계를 설명하는 아키텍처와 메시지가 오가는 순서를 보여 주는 시퀀스는 독자가 읽는 방식이 다릅니다. 선택할 유형을 먼저 좁히면 한 그림에 서비스 구조와 시간 순서를 모두 넣으려는 요청도 정리할 수 있습니다. README는 44종 각각에 밝은 미니멀, 어두운 미니멀, 편집 디자인형 변형이 있다고 설명합니다. 기능의 이름을 길게 나열하기보다, 독자가 그림에서 알아야 할 질문을 하나 정하는 것이 이 도구를 비교하는 출발점입니다. 44종 유형 안내
기존 도구와 무엇이 다릅니까?
코딩 에이전트에 일반적인 다이어그램을 요청해도 HTML이나 Mermaid 소스를 작성할 수 있습니다. Diagram Design을 추가했을 때 기대하는 차이는 그림을 그릴 수 있느냐보다 어떤 설계 기준을 참고하느냐입니다. 프로젝트는 유형별 레이아웃, 일정한 간격, 강조색 사용, 브랜드 스타일, 기존 파일 재작성과 출력 검증 절차를 묶어 제공합니다. 저장소 설명
| 작업의 우선순위 | 비교할 도구와 이유 |
|---|---|
| 문서 안에서 관계를 자주 수정합니다. | Mermaid·PlantUML처럼 텍스트를 고쳐 렌더링하는 방식이 편리합니다. |
| 도형을 직접 끌어 놓고 위치를 조정합니다. | draw.io·Excalidraw처럼 편집 캔버스를 제공하는 도구가 맞습니다. |
| 공개할 그림의 배치와 스타일을 맞춥니다. | Diagram Design으로 에이전트의 설계 기준을 보완할 수 있습니다. |
이미 Mermaid로 관리하는 문서가 있다면 원본을 보존한 채 발표용 그림을 따로 만드는 흐름을 고려할 수 있습니다. 파일 가져오기는 원본 도형의 좌표와 색상을 그대로 옮기는 변환이 아니라, 내용을 읽고 새 설계 규칙에 맞춰 다시 그리는 작업입니다. 따라서 같은 내용의 두 산출물을 관리하게 된다는 점까지 도입 판단에 포함합니다. 가져오기 절차
짧은 목록이나 작은 표로 관계가 충분히 전달되는 경우에는 그림 자체의 효용부터 비교합니다. 발표용으로 보기 좋게 만든 도식도 다음 주에 구성 요소가 바뀌면 다시 확인해야 합니다. 결과물의 외형을 다듬는 일과 원본 관계를 지속해서 관리하는 일의 빈도를 따져 보면, 모든 문서를 이 도구로 바꿀 필요가 있는지 판단하기 쉽습니다.
어떻게 사용합니까?
서비스 구조를 발표용 HTML로 만드는 예시
다음은 README의 아키텍처 예시를 구체화한 요청 예시입니다. 프런트엔드에서 백엔드로 요청하고, 백엔드가 데이터베이스와 캐시를 이용하는 서비스라는 가정을 입력에 포함합니다. 실제 시스템의 구조에 맞춰 관계를 바꿔 사용할 수 있습니다.
Diagram Design으로 발표용 아키텍처 도식을 만들어 주세요. 구성 요소는 프런트엔드, 백엔드, 데이터베이스, Redis 캐시입니다. 프런트엔드는 백엔드에 요청하고, 백엔드는 데이터베이스와 Redis를 이용합니다. 백엔드를 중심으로 보여 주세요. 먼저 도식 유형과 배치 계획을 설명하고, HTML 파일로 작성해 주세요.
이 입력만으로 실제 코드에서 관계를 조사했다는 의미가 생기지는 않습니다. 시스템 소유자가 아는 연결을 제공하는 예시입니다. 코드에서 추출한 구조를 사용하려면 추출 결과의 범위와 누락을 별도로 확인하고, 그림에는 그 결과에 맞는 구성 요소만 넣습니다.
- 스킬을 설치한 에이전트 세션에서 입력을 전달합니다. 프로젝트의 스타일이 기본값이면 브랜드 설정, 저장된 프로필, 기본 스타일 사용 중 하나를 고르는 절차가 있습니다.
- 에이전트가 밝힌 유형·크기·복잡도와 생략할 내용을 확인합니다. 네 구성 요소를 남기면서 연결 방향을 바꾸거나 추가 관계를 만들었는지 살펴봅니다.
- 작성된 HTML을 브라우저에서 엽니다. README는 별도의 빌드 없이 파일을 열 수 있다고 안내합니다. 화살표의 출발점·도착점과 글자 겹침을 사람이 확인합니다.
- 발표 자료에 파일로 붙일 때 SVG 또는 PNG 내보내기를 요청합니다. 원본 HTML과 내보낸 파일을 함께 보관하면 수정할 출발점을 남길 수 있습니다.
스타일 선택과 설계 확인 절차는 첫 도식 안내, 열어 볼 수 있는 HTML 생성은 README 시작 설명에 근거합니다. 사람이 확인할 연결 관계는 이 예시의 공개 전 확인 항목입니다.
내보낸 파일은 무엇을 포함합니까?
내보내기 문서는 SVG·PNG가 도식 부분만 담는다고 설명합니다. 전체 HTML의 제목·요약 카드·푸터를 한꺼번에 이미지로 담는 것과 범위가 다릅니다. 페이지 전체가 필요하다면 도식 내보내기와 전체 페이지 캡처를 구분해 요청합니다. PNG는 Playwright가 브라우저에서 SVG 영역을 렌더링하는 흐름이고, SVG는 CSS와 식별자를 포함해 독립 파일로 준비합니다. 내보내기 문서
기대 결과는 발표 자료에 넣을 도식 파일입니다. 내용의 정확성은 입력한 구조에 달려 있고, 출력 크기와 글꼴은 실제 파일을 열어 확인할 항목입니다. 도구가 설계 절차를 제공하는 것과 그 결과를 작성자가 검토한 것을 나누어 보면, 문서 예시를 직접 사용 후기처럼 받아들이는 혼동도 줄어듭니다.
설치와 이용 조건
Agent Skills를 읽는 호스트에서 README가 안내하는 공통 설치 명령은 다음과 같습니다. 독자가 사용하는 에이전트 환경에 스킬을 추가하는 명령입니다.
npx skills add cathrynlavery/diagram-design
명령에는 특정 버전을 고정하는 값이 없습니다. 아래 검토 기준 커밋과 독자가 설치하는 시점의 파일이 달라질 수 있습니다. Node.js·npm 계열 실행 환경과 패키지·저장소를 받을 네트워크가 필요하고, 설치 CLI가 선택한 호스트의 스킬 경로에 파일을 추가합니다. 공통 설치는 스킬 파일을 추가하는 단계이고, HTML 작성은 이후 에이전트 요청에서 진행합니다. 에이전트가 HTML을 쓸 때는 작업 폴더의 파일 쓰기 권한을 사용합니다. README는 Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro, OpenCode별 설치 안내를 따로 둡니다. 쓰는 에이전트가 목록에 있으면 해당 안내를 먼저 확인합니다. 공통 설치 설명
이 공통 설치 경로는 독립 설치라 마켓플레이스의 자동 갱신을 따르지 않습니다. README는 npx skills update diagram-design으로 갱신하도록 안내합니다. 여러 호스트 경로를 선택할 때 연결 설치와 복사 설치가 다르며, Windows에서 심볼릭 링크를 사용할 수 없으면 복사로 대체한다고 설명합니다. 설치 범위와 갱신 방식을 먼저 정하면 같은 스킬이 여러 곳에 발견되거나 오래된 사본이 남는 일을 줄일 수 있습니다. 설치 방식과 갱신
프로젝트의 개발 안내는 Linux·Windows·macOS CI와 개발 스크립트용 Python 3.10 이상을 명시합니다. 이를 모든 에이전트 호스트의 전체 OS 지원 보장이나 일반 HTML 생성의 필수 Python 버전으로 확장하지 않습니다. PNG를 내보낼 환경은 추가로 준비합니다. 스킬의 점검 절차는 패키지를 설치하지 않고, 내보내기 문서도 Playwright를 자동 설치하지 않는다고 밝힙니다. 운영자 안내에는 다음 명령이 있으며, 브라우저 바이너리도 내려받습니다. 개발 조건, PNG 환경 준비
python -m pip install playwright
python -m playwright install chromium
기본 글꼴과 한국어는 어떻게 다룹니까?
글꼴 설정의 기본값은 Font source: web입니다. 생성된 도식과 템플릿을 열면 Google Fonts의 스타일시트와 글꼴 파일을 요청합니다. 네트워크 없는 도식을 원하면 스타일 가이드나 저장된 프로필의 글꼴 소스를 system으로 설정하고, SVG 내보내기에도 --system-fonts를 적용하는 안내를 따릅니다. 파일을 오프라인으로 열어 대체 글꼴을 보는 것과, 외부 글꼴 요청을 파일에서 제거하는 것은 구분할 수 있습니다. 글꼴 소스 설정
한국어 이름에는 Noto Sans KR, 제목에는 Noto Serif KR을 보완하는 규칙이 있습니다. 문서는 한글 이름이 맞지 않을 때 글자를 작게 줄이기보다 이름 길이와 상자 크기를 조정하고, 한글 화살표 설명도 읽을 수 있는 크기로 바꾸도록 안내합니다. 따라서 한국어 요청이 가능하다는 설명을 넘어, 내보낸 파일의 긴 서비스명과 줄바꿈을 실제 크기로 확인하는 것이 도입 시험의 한 항목입니다. 한국어 레이블 규칙
입력과 외부 요청은 어디로 갑니까?
개인정보 안내는 자체 서버·계정·분석·텔레메트리가 없다고 밝힙니다. 입력한 설명과 파일은 사용하는 AI 에이전트 제공자의 정책과 실행 환경에 따라 처리됩니다. Google Fonts는 도식 내용 대신 요청자의 IP·브라우저 정보 등을 받을 수 있고, 브랜드 가져오기를 요청하면 선택한 웹사이트로 접속합니다. 브랜드 설정에는 로컬 자료를 주거나 웹사이트 가져오기를 생략할 수 있습니다. 생성 도식과 프로필의 보관·삭제 위치도 로컬 에이전트와 호스팅된 작업 공간에 따라 달라집니다. 개인정보 안내
비용과 라이선스
저장소의 MIT 라이선스는 사용·복사·수정·배포·판매를 허용하고, 코드의 사본이나 상당 부분에 저작권과 허가 고지를 포함하도록 정합니다. 상업적 사용을 고려할 때 확인할 조건입니다. 라이선스는 결과의 품질이나 특정 목적에 맞는 작동을 보증하는 계약까지 제공하지는 않습니다. LICENSE
확인한 문서에서는 Diagram Design 자체의 유료 요금제나 새 결제 계정 조건을 확인하지 않았습니다. 모델 요청은 기존 에이전트를 사용하므로 실제 이용 비용과 사용량 제한은 그 요금제에 따릅니다. HTML을 여러 번 수정하고 내보내는 과정에 모델 호출이 더해질 수 있지만, 요청 한 건의 비용이나 절감률은 이 조사에서 측정하지 않았습니다. 별도 유료 제공자를 자동으로 선택한다는 안내도 확인하지 않았으며, 외부 요청에서 구체적으로 확인한 기본값은 Google Fonts입니다. README, 데이터 수신자 안내
한계와 유지보수
출력 품질은 사용하는 모델에 따라 달라지고 같은 입력을 반복해도 배치가 달라질 수 있다고 프로젝트는 설명합니다. README의 비교 설명은 결과물이 Mermaid처럼 텍스트를 고쳐 다시 렌더링하는 편집용 원본 형식이 아니라는 점도 적습니다. 보기 좋은 첫 결과가 나온 뒤에도, 다음 수정에서 관계와 강조점이 유지됐는지 비교할 작업은 남습니다. 한국어 품질과 긴 레이블의 안정성 역시 실제 도입 환경에서 살펴볼 항목입니다. 비교와 한계 설명
2026년 10월 11일 원문을 확인한 이슈 #299는 열림 상태입니다. 작성자는 문서의 소수 배율 PNG 내보내기와 실제 파싱 동작이 어긋나고, CSS 크기 때문에 기대한 픽셀 크기와 달라지는 경우를 보고했습니다. 예제 아키텍처 도식의 2배 PNG가 문서의 2000×960이 아니라 2400×1152로 나왔다는 내용입니다. 이 문제를 고치려는 연결 PR #322도 확인 시점에 열림 상태입니다. 이는 작성자의 재현 보고이며, 모든 내보내기가 실패한다는 뜻으로 일반화하지 않습니다. 정확한 크기로 이미지를 납품하려는 사람에게는 결과 파일의 가로·세로를 확인할 이유가 됩니다. 이슈 #299
커밋 목록에는 10월 8일 export·doctor 수정 여러 건을 반영한 4fc2242와 10월 10일 매니페스트를 2.6.74로 갱신한 7a2e221이 있습니다. 최근 관리 활동은 확인되지만, 이 기록만으로 #299가 해결됐다고 연결하지 않습니다. 전달된 릴리스 페이지 사본에는 정식 릴리스가 없어, 이번 조사 기준은 커밋과 매니페스트 버전으로 남깁니다. 커밋 기록, 릴리스 페이지
확인한 범위
문서 확인: 공식 저장소·README, 커밋 기록, 릴리스 페이지 사본, 이슈 목록과 #299 원문, 라이선스, 개인정보 안내, 개발 안내, 운영자 예시, 글꼴·내보내기 문서를 대조했습니다. 기준은 main 7a2e221과 매니페스트 2.6.74이며 확인일은 2026년 10월 11일입니다. 설치 패키지의 버전을 고정해 시험한 기록은 별도로 없습니다.
직접 실행: 직접 실행하지 않았습니다. 외부 프로젝트 설치, 에이전트 연결, PNG 내보내기, 한국어 출력 품질 시험을 수행하지 않았고, 대표 일러스트와 카드뉴스는 설명용 이미지입니다. 이 글의 예시에서 HTML이 생성되고 그림을 검토하는 순서는 문서 안내와 독자의 확인 절차를 나눈 것입니다.
도입 판단
특정 상황에 유용합니다. 블로그나 발표 자료에 공개할 도식을 자주 만들고, 에이전트가 그린 그림의 배치·색상·한국어 레이블을 일관되게 맞추고 싶다면 비교할 만합니다. 기존 Mermaid 원본을 계속 관리하면서 공개용 도식을 따로 준비하는 방식도 선택할 수 있습니다.
다음 행동은 이미 구조를 알고 있는 작은 도식 한 개를 선택하는 것입니다. 구성 요소와 관계를 입력하고, HTML에서 관계가 보존됐는지 본 뒤, 목표 크기로 내보낸 이미지의 한국어·간격·픽셀 크기를 확인합니다. 수정이 잦은 문서라면 같은 변경을 Mermaid에서 하는 과정과 함께 비교하면 선택 근거가 구체적입니다. 도식이 처음 예쁘게 나온 것과 지속해서 관리하기 편한 것을 각각 확인할 수 있습니다.
에이전트의 작업 절차 자체를 보완하려는 독자는 mattpocock 스킬 탐구도 함께 읽을 수 있습니다. 그 글은 코딩 작업 흐름을, 이 도구는 공개할 도식의 작성 기준을 다룹니다.
참고한 자료
확인일은 2026년 10월 11일입니다. 기능 설명과 조건은 공식 자료, 도입 판단과 작은 비교 시험의 제안은 이 글의 판단입니다.
- 공식 저장소와 README: 프로젝트 정의, 설치 명령, 44종 유형, 비교와 한계입니다.
- 커밋 기록: 검토 기준 커밋과 최근 수정 활동입니다.
- 릴리스 페이지: 전달된 사본의 정식 릴리스 부재를 확인했습니다.
- 이슈 #299: 열림 상태와 PNG 크기 관련 보고입니다.
- MIT 라이선스: 사용·배포와 고지 조건입니다.
- 개인정보 안내: 제공자 처리, 글꼴 요청과 보관 위치입니다.
- 개발 안내: Python 개발 조건과 검증 항목입니다.
- 운영자 예시: 시작 절차, 가져오기와 PNG 환경 준비입니다.
- 스타일 가이드: 오프라인 글꼴 설정과 한국어 레이블입니다.
- 내보내기 문서: 도식만 내보내는 범위와 SVG 옵션입니다.
