이런 분께
보고서나 제안서에 업무 흐름도, 조직도, 일정표 한 장이 필요한데 파워포인트 도형을 하나씩 끌어다 놓다가 30분이 지나 버리는 분께 맞아요. Claude Code를 한 번이라도 켜 본 분이면 따라 할 수 있어요.
왜 필요하냐면, AI에게 그냥 "흐름도 그려줘"라고 하면 둥근 상자만 잔뜩 있는 밋밋한 그림이 나오기 쉬워요. 오늘 GitHub 인기 목록에 오른 'diagram-design'은 잡지에 실릴 법한 깔끔한 도식 규칙을 Claude Code에 넣어 주는 스킬이에요.
끝나면 이렇게 됩니다
"우리 팀 고객 문의 처리 과정을 부서별 흐름도로 그려줘"라고 말하면, 브라우저로 바로 열리는 도식 파일이 생겨요.
[고객 문의 처리 흐름] (부서별 칸 나눔)
고객센터 | 문의 접수 → 1차 답변 가능? → 예: 답변 발송
| → 아니오: 담당 부서로
담당 부서 | 내용 확인 → 처리 → 고객센터로 회신
흐름도 말고도 조직도, 타임라인, 2x2 매트릭스(사분면), 레이어 구조, 트리 같은 여러 형식을 고를 수 있어요.
준비물
- Claude Code(컴퓨터에 설치해 글자로 일을 시키는 Claude 프로그램). Claude Pro 이상 유료 요금제가 필요해요(2026년 10월 기준).
- 터미널(컴퓨터에 글자로 명령하는 창). 윈도우는 시작 메뉴에서 '터미널' 검색, 맥은 Spotlight에서 '터미널' 검색.
- diagram-design 스킬: GitHub의 cathrynlavery/diagram-design 저장소(프로그램 파일을 모아 둔 공개 폴더). MIT 라이선스, 무료.
따라 하기
- 터미널을 열고 도식 파일을 모아 둘 폴더로 이동한 뒤
claude를 입력해 Claude Code를 켜요. - Claude Code 입력창에 아래 두 줄을 한 줄씩 넣어요. 첫 줄은 이 스킬이 있는 곳을 등록하고, 둘째 줄이 실제로 설치해요.
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
- Claude Code를 닫았다가 다시 켜요(
/exit입력 후 다시claude). - 아래 '복사해서 쓰는 프롬프트'를 넣어요. 처음 쓰면 스킬이 "기본 색으로 갈지, 회사 홈페이지 색을 가져올지"를 물어봐요. 그냥 쓰려면 기본으로 진행한다고 답해요.
- 다 그려지면 폴더에 HTML 파일이 생겨요. 파일을 더블클릭해 브라우저로 열어 확인해요.
- 보고서에 넣을 때는 브라우저 화면을 캡처하거나, 그 파일을 그대로 첨부해요.
복사해서 쓰는 프롬프트
diagram-design 스킬로 [고객 문의 처리 과정]을 [부서별 흐름도]로 그려줘.
들어갈 내용: [고객센터가 접수 → 1차 답변 가능하면 바로 발송, 아니면 담당 부서로 넘김 → 담당 부서가 처리 후 고객센터로 회신]
글자는 한국어로, 가장 중요한 단계 한 곳만 강조색으로 표시해줘.
- [부서별 흐름도] 자리에 넣을 수 있는 예: 조직도, 타임라인, 2x2 매트릭스, 레이어 구조, 트리
- 회사 색을 쓰고 싶으면
onboard diagram-design to https://회사홈페이지주소를 먼저 보내요.
AI에게 통째로 맡기기
위 가이드대로 diagram-design 설치부터 첫 도식까지 한 단계씩 안내해줘.
