다이어그램 디자인|도식·차트 39종 그리기

아키텍처도·플로차트·시퀀스·ER·간트·Sankey·피시본·Wardley map 등 서른아홉 가지 도식을 HTML 한 파일로 뽑습니다. SVG 와 CSS 가 파일 안에 들어 있어 그대로 열리고 PNG 로도 내보냅니다. 이미 있는 .drawio 나 Mermaid 파일을 읽어 크기와 상세도를 바꿔 다시 그리는 것도 됩니다.

한눈에 보기

설치

npx skills add https://github.com/cathrynlavery/diagram-design -g -a claude-code

처음 시킬 말

“우리 서비스 구조를 아키텍처 도식으로 그려줘”

난이도

조금 준비가 필요합니다

만든 곳

cathrynlavery/diagram-design (커뮤니티)

도도리 AI연구소 · 최종 수정 2026년 11월 4일 · CC BY-NC 4.0

문서 작성 분야 · 디자인·이미지 용도 · 조금 준비가 필요합니다.

diagram-design 스킬 설치 한 줄

Claude Code 의 명령 입력 칸(터미널·데스크톱 앱·웹·편집기 확장)에 붙여 넣습니다. 대화만 하는 Claude 앱의 채팅창에서는 동작하지 않습니다.

-g 는 모든 폴더에서 쓰게, -a claude-code 는 Claude Code 에만 넣게 합니다. 빼면 생기는 일은 설치 안내에 있습니다.

diagram-design 스킬 설치 절차

터미널 여는 법, Node.js 확인, 다시 시작, 확인 명령, 자주 나는 오류는 클로드 스킬 설치하는 법에 한 장으로 모았습니다.

이 스킬 설치 절차 전체 복사

이렇게 시켜 보세요

넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.

알아 둘 것

diagram-design 스킬 안 될 때 확인할 것

첫 도식에서 한 번 멈춰 섭니다

프로젝트에서 처음 그릴 때 "브랜드 색을 맞출까요?" 하고 물으며 멈춥니다. 고장이 아닙니다. 기본값으로 갈지 웹사이트에서 가져올지 답하시면 이어집니다.

빽빽한 도식을 원하면 안 맞습니다

"밀도 4/10" 을 목표로 삼아 덜어 내는 쪽으로 그립니다. 요소가 아홉 개를 넘으면 두 장으로 나누라고 합니다.

한 장짜리라면 과합니다

참고 문서가 216개인 큰 스킬입니다. 간단한 흐름도 하나면 Mermaid 를 직접 쓰는 편이 빠릅니다.

언제 쓰고, 언제 안 쓰나

도식이 여러 장 필요하고 색과 서체를 브랜드에 맞춰야 할 때 씁니다. 한 장짜리 간단한 흐름도라면 굳이 쓸 필요가 없습니다.

비슷한 것 중에 왜 이걸

이 목록에서 도식을 그리는 유일한 스킬입니다. 비슷해 보이는 것들과는 결과물이 다릅니다. pptx 는 발표용 .pptx 파일을 만듭니다. 장표 안에 도형을 놓지, 아키텍처도나 간트를 그려 주지 않습니다. web-artifacts-builder 는 동작하는 웹 화면을 만듭니다. 결과물이 앱에 가깝습니다. 이것은 한 장짜리 도식이 목적이라 HTML·SVG·PNG 로 떨어지고, 문서나 장표에 그대로 얹습니다. Mermaid 와 비교하면 이렇습니다. Mermaid 는 문법이 간단한 대신 배치와 색을 거의 못 고칩니다. 이건 브랜드 색을 입히고 강조 노드를 지정하고 손그림 느낌까지 줄 수 있습니다. 대신 무겁습니다. 도식 한 장이면 Mermaid, 보고서에 열 장이면 이것입니다.

문서 작성 도구를 고를 때

PPT·워드 같은 문서를 생성합니다. 한글 폰트가 깨지지 않는지, 만든 파일을 기존 템플릿에 맞춰 커스터마이징할 수 있는 범위를 확인하세요.

원본 보기

스킬의 실제 내용은 SKILL.md 파일 하나에 들어 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다. 스킬은 Claude 에게 그대로 들어가는 지시문이라, 무엇을 시키는지 확인하지 않고 쓰면 의도치 않은 동작을 할 수 있습니다.

GitHub 에서 cathrynlavery/diagram-design 열기

이 작업에 쓰는 장비 제휴 링크

코드와 결과를 나란히 놓고 보는 작업입니다.

이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 이용자가 내는 금액은 달라지지 않습니다.

별점과 댓글

이 스킬을 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다.

자주 묻는 것

다이어그램 디자인 스킬(diagram-design)은 어떻게 설치합니까?

터미널에 npx skills add https://github.com/cathrynlavery/diagram-design -g -a claude-code 한 줄이면 됩니다. -g 는 계정 전체에 넣는다는 뜻으로, 빼면 지금 열려 있는 폴더에만 깔려 다른 곳에서는 안 보입니다. -a claude-code 를 빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간 실패 문구가 뜨는데 실제로는 깔린 상태라 헷갈립니다.

다이어그램 디자인 스킬은 무엇을 합니까?

아키텍처도·플로차트·시퀀스·ER·간트·Sankey·피시본·Wardley map 등 서른아홉 가지 도식을 HTML 한 파일로 뽑습니다. SVG 와 CSS 가 파일 안에 들어 있어 그대로 열리고 PNG 로도 내보냅니다. 이미 있는 .drawio 나 Mermaid 파일을 읽어 크기와 상세도를 바꿔 다시 그리는 것도 됩니다.

다이어그램 디자인 스킬은 언제 씁니까?

제안서나 보고서에 넣을 구조도·흐름도를 브랜드 색에 맞춰 만들 때입니다. 도식이 여러 장 필요하고 색과 서체를 브랜드에 맞춰야 할 때 씁니다. 한 장짜리 간단한 흐름도라면 굳이 쓸 필요가 없습니다.

다이어그램 디자인 스킬을 쓸 때 걸리는 데가 있습니까?

첫 도식에서 한 번 멈춰 섭니다. 프로젝트에서 처음 그릴 때 "브랜드 색을 맞출까요?" 하고 물으며 멈춥니다. 고장이 아닙니다. 기본값으로 갈지 웹사이트에서 가져올지 답하시면 이어집니다. 빽빽한 도식을 원하면 안 맞습니다. "밀도 4/10" 을 목표로 삼아 덜어 내는 쪽으로 그립니다. 요소가 아홉 개를 넘으면 두 장으로 나누라고 합니다. 한 장짜리라면 과합니다. 참고 문서가 216개인 큰 스킬입니다. 간단한 흐름도 하나면 Mermaid 를 직접 쓰는 편이 빠릅니다.

함께 보면 좋은 스킬

어느 것부터 깔지 모르겠다면 클로드 스킬 추천 15개를 보십시오. 67개를 직접 깔아 보고 골랐습니다.