쉬운 설명
AI에게 "흐름도 하나만 그려줘"라고 부탁하면 보통 어떤 그림이 나오나요? 대부분 둥글넓적한 사각형에 화살표만 이어진, 조금은 심심하고 뻔한 그림이 나오곤 하죠. 이 프로젝트는 그런 흔한 그림 대신 잡지나 전문 디자인 서적에서 볼 법한 감각적인 '편집 디자인' 스타일의 다이어그램을 AI가 뚝딱 그려주도록 만든 도구예요. 피라미드, 흐름도, 조직도처럼 자주 쓰이는 39가지 유형을 미리 세련되게 디자인해 두었는데요. Claude 같은 AI 코딩 도구에 '스킬'로 추가해 두기만 하면, 필요할 때마다 그 멋진 스타일 그대로 그림을 쏙 뽑아준답니다.
요약
이 깃허브(GitHub) 프로젝트의 이름은 바로 diagram-design인데요. littlemight.com 블로그와 BestSelf.co 사이트를 운영하는 분이 직접 만들었습니다. 본인이 블로그 글에 넣을 다이어그램이 필요할 때마다 Claude에게 부탁했는데, 사이트 분위기와는 전혀 안 어울리는 딱딱한 사각형 상자만 나왔다고 해요. 결국 마음에 드는 그림을 얻으려고 피그마(Figma)를 켜서 30분 넘게 색상만 고르고 있는 자신을 발견하고는, 아예 전문 잡지 수준의 다이어그램을 자동으로 만들어주는 Claude Code용 스킬을 직접 개발하게 된 거죠.
버전이 올라가면서 유용한 기능도 꾸준히 더해졌습니다. 2.0 버전에서는 공유 메모리 허브를 갖춘 플라이휠(순환 구조) 다이어그램이 들어갔고, 2.3 버전에서는 대기열(큐)이나 정책 흐름 같은 시스템의 동작 패턴을 전체 화면 배치와 분리해서 표현하는 방식이 도입되었어요. 그리고 2.5.10 버전에서는 생키 다이어그램, 어골도(피시본), 워들리 맵, 칸반, 사용자 여정 지도, 배포 구조도, 의존성 그래프, UML 클래스 다이어그램, 스토리 맵, 데이터베이스 스키마까지 10종류가 한 번에 추가되면서 지원하는 유형이 총 39가지로 늘어났습니다. 그림 하나하나가 단순한 꾸미기를 넘어 정보를 명확하게 정리해 전달하는 데 집중하고 있어서, 이제 AI 도구가 시각적인 완성도까지 본격적으로 챙기기 시작했음을 잘 보여주는 사례랍니다.
활용 포인트
기술 블로그나 사내 문서를 자주 작성하는 개발자, 기획자분들이 아키텍처 다이어그램이나 흐름도를 넣을 때 아주 유용하게 쓸 수 있어요. 예를 들어 서비스 구조를 소개하는 글을 쓰면서 Claude Code에 이 스킬을 설치해 두면, "이 시스템의 배포 구조를 그려줘"라고 한마디만 해도 draw.io나 Mermaid로 급하게 그린 듯한 투박한 느낌 없이 깔끔하게 완성된 SVG 그림을 받을 수 있습니다. 스타일도 라이트, 다크, 풀 에디토리얼 세 가지 중에서 마음에 드는 것을 고를 수 있죠. 게다가 별도의 빌드 과정이나 외부 이미지 서버를 거칠 필요 없이, 웹 브라우저에서 바로 열어볼 수 있는 정적 HTML 파일 형태로 나오기 때문에 실무에서 다루기가 무척 편합니다.
이미 draw.io, Mermaid, Excalidraw 등으로 만들어 둔 다이어그램이 있을 때, 이를 세련되게 다시 그리는 용도로도 훌륭합니다. 팀 위키에 예전에 등록해 둔 투박한 Mermaid 순서도가 있다면, 원하는 포맷이나 크기, 상세 수준을 지정해서 멋진 편집 디자인 스타일로 탈바꿈할 수 있거든요. 강의 자료를 준비하는 분이라면 사용자 여정 지도나 스토리 맵을, 데이터베이스 설계를 문서로 정리하는 분이라면 새로 들어간 데이터베이스 스키마 다이어그램을 곧바로 활용해 보시면 좋겠네요.
주의 사항
이 도구는 Claude Code, Codex, Factory Droid, Pi처럼 '에이전트 스킬(Agent Skills)'을 지원하는 특정 AI 개발 환경에 설치해 쓰는 방식입니다. 일반 웹 브라우저에 접속해서 바로 클릭 몇 번으로 쓰는 서비스는 아니라는 점을 미리 알아두셔야 해요. 또 자동 업데이트 설정법이나 업데이트 명령어(plugin marketplace upgrade 등)가 각 도구(Claude Code, Codex, Copilot, Droid)마다 조금씩 다르게 안내되어 있고, 버전 번호(2.5.10 등) 역시 계속 달라질 수 있으니 설치하기 전에 GitHub 저장소의 최신 안내를 꼼꼼히 확인해 보시는 게 좋습니다. 개인이 운영하는 오픈소스 프로젝트인 만큼, 앞으로의 업데이트 주기나 지속적인 유지관리 여부도 가볍게 지켜볼 필요가 있습니다.
자체 검증
원문 문서를 자세히 살펴보면 제목에는 "38가지 편집 디자인 다이어그램 유형"이라고 적혀 있지만, 본문 설명에서는 v2.5.10 버전을 기준으로 "39가지 유형(39 editorial diagram types)"이라고 명시되어 있습니다. 즉 리포지토리의 대표 제목은 이전 버전 기준이며, 현재 최신 버전 기준으로는 39종을 지원하는 것이 맞습니다. 개발자가 littlemight.com과 BestSelf.co를 운영한다는 사실, 2.0에서 플라이휠(루프) 패턴이, 2.3에서 시맨틱 패턴과 접근성 모션 옵션이, 2.5.10에서 생키·어골도·워들리 맵 등 10종이 추가되었다는 내용도 원문과 정확히 일치합니다. Claude Code, Codex, Copilot, Droid 각각의 설치 및 업데이트 명령어 또한 원문에 나온 내용을 그대로 요약한 것이며, 임의로 내용을 덧붙이거나 과장한 부분은 없습니다.
태그
#AI #ClaudeCode #다이어그램 #개발도구 #생산성 #디자인