스킬 · 문서 작성
도식·차트 39종 그리기
아키텍처도·플로차트·시퀀스·ER·간트·Sankey·피시본·Wardley map 등 서른아홉 가지 도식을 HTML 한 파일로 뽑습니다. SVG 와 CSS 가 파일 안에 들어 있어 그대로 열리고 PNG 로도 내보냅니다. 이미 있는 .drawio 나 Mermaid 파일을 읽어 크기와 상세도를 바꿔 다시 그리는 것도 됩니다.
문서 작성 분야 · 디자인·이미지 용도 · 조금 준비가 필요합니다.
이럴 때 씁니다
제안서나 보고서에 넣을 구조도·흐름도를 브랜드 색에 맞춰 만들 때
한 줄로 넣기
Claude Code 용입니다. Claude 데스크톱 앱의 채팅창이 아니라 컴퓨터의 터미널에 붙여 넣으십시오 — macOS 는 터미널, Windows 는 PowerShell 입니다. Node.js 가 깔려 있어야 하며, node -v 를 쳐서 버전이 나오면 준비된 것입니다.
npx skills add https://github.com/cathrynlavery/diagram-design -g -a claude-code
뒤의 두 가지는 붙여 두시는 편이 좋습니다. -g 는 계정 전체에 넣는다는 뜻으로, 없으면 지금 열려 있는 폴더에만 깔려 다른 곳에서는 스킬이 보이지 않습니다. -a claude-code 는 Claude Code 에만 넣는다는 뜻입니다. 이걸 빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간 Failed to install 이 뜨는데, 실제로는 설치가 된 상태라 헷갈립니다.
전체 설치 절차
터미널을 처음 여시거나, 위 한 줄에서 막히셨다면 여기를 보십시오. 터미널 여는 법부터 확인 명령까지 순서대로 적어 두었습니다.
# cathrynlavery/diagram-design 설치
## 0. 어디에 붙여 넣나
Claude 데스크톱 앱의 채팅창이 아닙니다. 컴퓨터의 터미널입니다.
macOS Spotlight(Command + 스페이스)에서 "터미널" 을 여십시오
Windows 시작 메뉴에서 "PowerShell" 을 여십시오
Node.js 가 있어야 합니다. 터미널에 node -v 를 쳐서 v20.1.2 처럼
버전이 나오면 준비된 것입니다. "찾을 수 없습니다" 가 나오면
nodejs.org 에서 LTS 버전을 먼저 설치하십시오.
## 1. 넣기
npx skills add https://github.com/cathrynlavery/diagram-design -g -a claude-code
성공하면 이 한 줄이 나옵니다.
Installed 1 skill → ~/.claude/skills/...
-g 는 계정 전체에 넣는다는 뜻입니다(~/.claude/skills).
어느 폴더에서 Claude Code 를 열든 쓸 수 있습니다.
빼면 지금 열려 있는 폴더에만 깔려서(./.claude/skills), 다른 데서
열면 스킬이 안 보입니다. "깔았는데 안 보인다" 는 대개 이것입니다.
-a claude-code 는 Claude Code 에만 넣는다는 뜻입니다.
빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간
"Failed to install" 이 뜹니다. 실제로는 설치가 끝난 상태인데
실패한 것처럼 보여 여기서 멈추기 쉽습니다.
저장소에 스킬이 여러 개면 어느 것을 넣을지 물어봅니다.
미리 보시려면 --list 를 붙이십시오.
npx skills add https://github.com/cathrynlavery/diagram-design --list
## 2. Claude Code 를 다시 시작합니다
이미 claude 를 실행 중이셨다면 끝내고 다시 실행하십시오.
실행 중인 세션은 시작할 때 읽은 목록을 그대로 씁니다.
데스크톱 앱을 껐다 켜는 것이 아닙니다. 터미널의 claude 를 말합니다.
## 3. 확인
npx skills list -g
전역으로 넣은 스킬이 이름과 경로와 함께 나옵니다.
-g 를 빼면 지금 폴더의 스킬만 보이므로 "없다" 고 나올 수 있습니다.
## 4. 쓰기
"도식·차트 39종 그리기" 관련 작업을 시켜 보십시오.
스킬이 붙었다면 알아서 불러 씁니다.이렇게 시켜 보세요
넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.
알아 둘 것
웹사이트 주소를 주면 그 사이트의 색과 서체를 가져와 도식에 입히고, 고객사별로 저장해 두었다가 꺼내 씁니다. 참고 문서가 216개인데 고른 도식 종류의 문서만 그때 읽어 들이는 구조입니다. 직접 설치해 파일 수와 첫 실행 동작을 확인했습니다.
자주 막히는 지점
첫 도식에서 한 번 멈춰 섭니다
프로젝트에서 처음 그릴 때 "브랜드 색을 맞출까요?" 하고 물으며 멈춥니다. 고장이 아닙니다. 기본값으로 갈지 웹사이트에서 가져올지 답하시면 이어집니다.
빽빽한 도식을 원하면 안 맞습니다
"밀도 4/10" 을 목표로 삼아 덜어 내는 쪽으로 그립니다. 요소가 아홉 개를 넘으면 두 장으로 나누라고 합니다.
한 장짜리라면 과합니다
참고 문서가 216개인 큰 스킬입니다. 간단한 흐름도 하나면 Mermaid 를 직접 쓰는 편이 빠릅니다.
언제 쓰고, 언제 안 쓰나
도식이 여러 장 필요하고 색과 서체를 브랜드에 맞춰야 할 때 씁니다. 한 장짜리 간단한 흐름도라면 굳이 쓸 필요가 없습니다.
비슷한 것 중에 왜 이걸
이 목록에서 도식을 그리는 유일한 스킬입니다. 비슷해 보이는 것들과는 결과물이 다릅니다. pptx 는 발표용 .pptx 파일을 만듭니다 — 장표 안에 도형을 놓지, 아키텍처도나 간트를 그려 주지 않습니다. web-artifacts-builder 는 동작하는 웹 화면을 만드는 쪽이라 결과물이 앱에 가깝습니다. 이것은 한 장짜리 도식이 목적이라 HTML·SVG·PNG 로 떨어지고, 문서나 장표에 그대로 얹습니다. Mermaid 와 비교하면 — Mermaid 는 문법이 간단한 대신 배치와 색을 거의 못 고칩니다. 이건 브랜드 색을 입히고 강조 노드를 지정하고 손그림 느낌까지 줄 수 있습니다. 대신 무겁습니다. 도식 한 장이면 Mermaid, 보고서에 열 장이면 이것입니다.
문서 작성 도구를 고를 때
PPT·워드 같은 문서를 생성합니다. 한글 폰트가 깨지지 않는지, 만든 파일을 기존 템플릿에 맞춰 커스터마이징할 수 있는 범위를 확인하세요.
원본 보기
스킬의 실제 내용은 SKILL.md 파일 하나에 들어 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다. 스킬은 Claude 에게 그대로 들어가는 지시문이라, 무엇을 시키는지 확인하지 않고 쓰면 의도치 않은 동작을 할 수 있습니다.
GitHub 에서 cathrynlavery/diagram-design 열기