보고서 흐름도·일정표, 업무 메모만 붙여 넣으면 그려 주는 AI
보고서나 기획서, 졸업 논문에 흐름도 한 장 넣으려다 도형 맞추느라 한참 걸린 적 있으시죠. 이 글은 흐름도 그리기를 말로 맡기는 AI 스킬 diagram-design을 직접 써 본 기록이에요. 업무 메모 한 단락을 붙여 넣었더니 흐름도가 약 2분 만에 나왔고, 일정 메모는 간트 차트(Gantt Chart)로 23초 걸렸습니다.
diagram-design은 깃허브(GitHub)에 공개된 에이전트 스킬(Agent Skills)이에요. 클로드 코드 같은 AI 에이전트에 붙여 두면 “이거 흐름도로 그려 줘” 한마디에 HTML 파일 한 장을 만들어 줍니다. 아래 기능 설명은 공식 README와 갤러리를 2026년 10월 15일에 받아 확인한 것이고, 시험 결과는 같은 날 직접 돌려 본 거예요.
diagram-design으로 흐름도 그리기, 무엇을 해 주나
README 첫머리는 이 스킬을 “도식을 HTML과 SVG가 든 파일 한 장으로 그리는 에이전트 스킬”이라고 소개합니다. 결과물은 더블클릭하면 브라우저에서 바로 열리고, 빌드 단계나 자바스크립트, 바깥 그림 파일이 필요 없다고 적혀 있어요.
도식 종류 수는 문서마다 조금 달라요. README와 스킬 문서는 45가지, 저장소 소개 문구는 44가지라고 적었습니다. 그래서 이 글에서는 “40가지 넘게”라고 부를게요.
그림을 그리는 방식도 정해져 있습니다. README는 기본 색이 검정과 탠저린(Tangerine) 주황이고, 강조색은 독자가 먼저 봐야 할 한두 곳에만 쓰며, 그림자 없이 1px 가는 선으로 4px 격자에 맞춰 그린다고 설명해요. 자기 웹사이트 주소를 알려 주면 그 사이트의 색과 글꼴을 뽑아 도식에 입히는 기능도 있습니다.
README에는 다른 흐름도 그리기 도구와 비교한 표도 있어요. Mermaid·PlantUML은 글로 적어서, draw.io·엑스칼리드로(Excalidraw)는 손으로 도형을 끌어서 만들고, diagram-design은 에이전트에게 말로 설명해서 만든다고 정리했습니다. 배치도 자동 배치가 아니라 에이전트가 4px 격자 위에 직접 놓고, README 표에는 자동 검사(CI)로 겹침·잘림을 점검한다고도 적혀 있는데, 이건 저장소에 올라오는 변경을 검사하는 장치예요.
Mermaid · draw.io
- 글로 적거나 손으로 도형을 끈다
- 배치는 자동이거나 손으로 맞춘다
diagram-design
- 에이전트에게 말로 설명한다
- 에이전트가 4px 격자에 직접 놓는다
메모 한 단락이 흐름도가 되기까지
시험은 가상의 수납용품 온라인 가게 ‘바른수납’을 두고 했어요. 회사 이름도 업무도 지어낸 것이고, 사람 이름이나 금액은 넣지 않았습니다. 스킬 파일을 내려받아 클로드 코드가 스킬 문서와 거기서 가리키는 참고 문서대로 그리게 했어요.
흐름도 그리기에 넣은 메모는 이 한 단락입니다. 순서와 “있으면/없으면” 같은 갈림길만 적었어요.
처음 쓸 때 스킬이 하나를 먼저 물어요. 스타일 가이드가 아직 기본값이면 첫 도식 전에 “브랜드에 맞출래요?” 하고 웹사이트 주소, 토큰 붙여넣기, 기본값 유지 같은 선택지를 내밉니다. 이번엔 기본값 유지를 골랐어요.
메모를 넣고 HTML이 나오기까지 1분 41초가 걸렸습니다. 스킬 문서를 읽는 시간과 AI가 생각하는 시간까지 다 넣은 시계 기준이에요. 첫 판은 도식이 오른쪽으로 쏠려 왼쪽이 비어 있어서, 결과 그림을 보고 한 번 고쳤고 최종본까지 약 2분 3초였습니다.
모양마다 뜻이 있어요. 시작과 끝은 둥근 상자, 단계는 네모, 판단은 마름모이고 아래 범례가 그걸 알려 줍니다. 메모에 없던 끝 상자 ‘배송 완료’는 “도착했으면 끝”을 그리려고 AI가 넣은 것이라, 메모 그대로 쓰고 싶으면 빼 달라고 하면 됩니다. 손으로 하는 흐름도 그리기라면 상자 크기와 화살표 간격을 맞추는 데 시간이 드는데, 그 부분을 AI가 맡아요.
조별과제·사업계획서 PDF PPT 변환, 글자·표·차트까지 고칠 수 있게 만들어 주는 AI일정은 간트 차트로, 못생긴 도식은 다시
흐름도 그리기 다음으로는 일정표를 시켜 봤습니다. 신상품 출시 4주 일정을 적고 “간트 차트로” 그려 달라고 했어요. 샘플 받기, 촬영·상세페이지, 스마트스토어 등록, 광고 시작이 한 주씩 이어지는 일정입니다. 23초 만에 나왔고 고칠 데가 없었어요.
AI가 네 작업을 ‘준비’와 ‘판매 시작’ 두 묶음으로 나눴고, 스마트스토어 등록 막대 하나만 강조했어요.
세 번째는 이미 있는 도식을 다시 그리는 시험이었습니다. README는 Mermaid, draw.io, 엑스칼리드로(Excalidraw)로 만든 도식을 넣으면 같은 내용을 이 스킬의 모양으로 다시 그린다고 설명해요. 교환·환불 흐름을 Mermaid 코드로 적어(상자 5개, 연결 5개) 넣었더니 31초 만에 나왔습니다. 제목의 가운뎃점이 앞뒤 글자에 붙어 보여 띄어쓰기를 넣어 한 번 고쳤고, 최종본까지 약 48초였어요.
스킬 규칙대로 Mermaid 그림을 그대로 가져오지 않고, 스크립트로 상자와 연결만 뽑아 새로 배치했어요. 다 그리면 무엇을 합치거나 뺐는지 장부를 남기는데, 이번엔 5개 상자와 5개 연결이 그대로 갔습니다.
| 시험 | 걸린 시간 | 고친 횟수 |
|---|---|---|
| 흐름도 (주문 처리 메모) | 약 2분 | 1번 (배치) |
| 간트 차트 (출시 4주 일정) | 약 23초 | 없음 |
| 다시 그리기 (교환·환불) | 약 48초 | 1번 (제목 띄어쓰기) |
보고서·과제에 쓸 만한 도식 종류
40가지 넘는 종류 가운데 개발 쪽 도식(아키텍처, DB 스키마 등)을 빼도 문서에 쓸 만한 게 꽤 많아요. 업무 절차는 흐름도, 부서가 여럿 얽히면 스윔레인(Swimlane), 담당 구조는 조직도(Org Chart), 원인 분석은 피시본(Fishbone)으로 그리면 됩니다. 순서도 만들기도 흐름도 그리기와 같은 흐름도 종류로 시키면 돼요.
공식 갤러리에서는 종류별 예시를 밝은 판, 어두운 판, 잡지형 판으로 바꿔 가며 볼 수 있어요. 무엇을 시킬지 고민될 때 먼저 훑어보기 좋습니다.
크기도 쓰임새에 맞출 수 있어요. 기존 도식을 다시 그릴 때 README가 소개한 크기 선택지에는 문서 안에 넣는 크기, 16:9 발표 슬라이드, A4 가로 인쇄용 등이 있고, 크기를 바꾸면 글자 크기도 같이 바뀐다고 합니다. 보는 사람을 개발자, 섞인 청중, 임원 중에서 고르면 같은 내용을 더 쉬운 말로 바꿔 적는다는 설명도 있어요. 보고서에 넣을 흐름도 그리기라면 임원용 쪽이 맞겠죠.
설치하고 처음 흐름도 그리기를 시킬 때
설치는 명령 한 줄이에요. README는 Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp처럼 에이전트 스킬을 읽는 도구라면 어디서든 된다고 적었습니다. 이번 시험에서 실제로 쓴 건 클로드 코드뿐이에요.
npx skills add cathrynlavery/diagram-design클로드 코드에서는 플러그인으로 까는 방법도 있어요. README에 따르면 이쪽은 업데이트와 슬래시 명령(Slash Command)이 함께 따라옵니다.
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design- 위 명령으로 스킬을 붙입니다.
- 첫 요청에서 브랜드 질문이 나오면 기본값 유지나 내 사이트 주소를 고릅니다.
- 메모를 붙여 넣고 “흐름도로 그려 줘”처럼 종류를 말합니다.
- 나온 HTML을 브라우저로 열어 보고, 쏠림이나 글자 간격처럼 거슬리는 곳을 한 줄씩 고쳐 달라고 합니다.
스킬 문서에는 그리기 전에 고른 종류와 크기, 빠질 내용을 한 줄로 먼저 말하라는 규칙도 있어요. 그 계획이 마음에 안 들면 그리기 전에 바꿔 달라고 하면 됩니다.
한글, 글꼴, 내보내기에서 알아 둘 것
한글로 흐름도 그리기를 할 때 걱정되는 게 글자 깨짐인데, 세 시험 모두 깨지지 않았습니다. 스킬의 스타일 가이드에 한글 라벨 절이 따로 있어요. 기본 글꼴인 Geist와 Instrument Serif에는 한글이 없으니 Noto Sans KR로 이어 붙이고, 한글은 12px 아래로 줄이지 말라고 적혀 있습니다. 다만 SVG는 저절로 줄을 바꾸지 않아서, 마름모 안 “3일 안에 / 도착했나?”는 두 줄로 직접 나눠 넣어야 했어요.
인터넷 없이 열고 싶다면
README에 따르면 기본 도식은 구글 폰트에서 글꼴을 받는 것이 유일한 네트워크 요청입니다. 시스템 글꼴을 쓰라고 하면 네트워크 요청 없이 열리는 파일이 나온다고 적혀 있어요. 시험에서는 흐름도를 네트워크를 막고 열어도 한글이 정상으로 보였습니다(이 맥에는 Noto Sans KR이 깔려 있었고, 제목 글꼴은 시스템 글꼴로 바뀌었어요).
PPT나 한글 문서에 넣으려면 그림 파일로 빼야 하죠. README 기준으로 SVG와 PNG 내보내기가 되고, 시험에서는 SVG 세 개(5~10KB)를 만들어 확인했어요. PNG는 플레이라이트(Playwright)를 한 번 설치해야 한다고 README에 적혀 있습니다.
README가 스스로 밝힌 한계
- 결과의 품질은 함께 쓰는 AI 모델에 달려 있고, 같은 요청도 두 번 하면 배치가 다르게 나올 수 있습니다.
- 결과는 고치기 쉬운 원본 형식이 아니에요. 상자를 끌어 옮길 캔버스가 없어서, 바꾸려면 다시 부탁하거나 SVG를 고쳐야 합니다.
- 깃(Git)에 두고 자주 바뀌는 문서라면 Mermaid가 더 맞는다고 README가 직접 적었습니다.
보고서에 한 번 넣고 끝나는 흐름도 그리기라면 이 한계가 크게 걸리지 않아요. 같은 요청에도 배치가 달라질 수 있으니, 마음에 드는 판이 나오면 SVG로 바로 빼 두는 편이 안전합니다. 스킬이 뭔지 처음이라면 에이전트 스킬 정리 글을, 만든 도식을 발표 자료로 옮길 생각이라면 PDF를 고칠 수 있는 PPT로 바꾼 PPT Master 글을 같이 보면 됩니다.
참고한 공식 문서
기능·설치·도식 종류·한계 설명은 diagram-design 깃허브 저장소의 README와 스킬 문서(SKILL.md, style-guide.md)를 기준으로 했고, 갤러리 화면은 공식 갤러리에서 찍었습니다. 기준일은 2026-10-15입니다. 시험 결과는 같은 날 가상 회사 메모로 직접 돌린 것이고, 걸린 시간은 AI가 생각하는 시간까지 넣은 실제 경과 시간이에요. 별 수와 도식 종류는 바뀔 수 있으니 원문을 확인하세요.
흐름도 그리기 자주 묻는 질문
diagram-design은 따로 깔아 쓰는 프로그램인가요?
아니에요. 클로드 코드(Claude Code)나 커서(Cursor) 같은 AI 에이전트에 붙이는 에이전트 스킬(Agent Skills)입니다. README에 적힌 대로 npx skills add 명령이나 클로드 코드의 플러그인 명령으로 붙이고, 그다음엔 말로 도식을 시키면 HTML 파일 한 장이 나옵니다.
한글 도식도 깨지지 않고 나오나요?
2026-10-15 직접 시험에서 흐름도, 간트 차트, 다시 그린 도식 세 장 모두 한글이 깨지지 않았어요. 스킬의 스타일 가이드에 한글 라벨 규칙(Noto Sans KR로 이어 붙이기, 12px 아래로 줄이지 않기)이 따로 있습니다. 마름모 안 글자를 두 줄로 쓰려면 줄을 직접 나눠 줘야 했어요.
만든 도식을 PPT나 한글 문서에 넣을 수 있나요?
README 기준으로 SVG와 PNG로 내보낼 수 있습니다. 시험에서는 SVG 세 개를 만들어 확인했어요. PNG 내보내기는 플레이라이트(Playwright)를 한 번 설치해야 한다고 README에 적혀 있습니다.
글에 나온 규칙 파일과 에이전트는 Claude Code에서 쓰는 방식이고, 공식 안내는 Claude Code 공식 문서에 있습니다.
이 글은 직접 만들고 운영하며 남긴 기록입니다. 적힌 수치는 작성 시점의 제 계정 기준이며, 같은 결과나 수익을 보장하지 않습니다.
