--- type: WebPage title: drawio-skill: 자연어 설명 description: "" resource: https://discuss.pytorch.kr/t/drawio-skill-draw-io/10750 tags: [] timestamp: 2026-06-26T08:33:53.150517Z --- [PyTorchKR](/) # [drawio-skill: 자연어 설명을 draw.io 다이어그램으로 만드는 에이전트 스킬](/t/drawio-skill-draw-io/10750) [읽을거리&정보공유](/c/news/14) [claude-code](https://discuss.pytorch.kr/tag/claude-code), [agent-skill](https://discuss.pytorch.kr/tag/agent-skill), [drawio-skill](https://discuss.pytorch.kr/tag/drawio-skill), [diagram](https://discuss.pytorch.kr/tag/diagram), [uml](https://discuss.pytorch.kr/tag/uml), [drawio](https://discuss.pytorch.kr/tag/drawio), [codebase-visualization](https://discuss.pytorch.kr/tag/codebase-visualization) [9bow](https://discuss.pytorch.kr/u/9bow) (박정환) 6월 25, 2026, 5:30오전 1 [![drawio-skill: 자연어 설명을 draw.io 다이어그램으로 만드는 에이전트 스킬](https://discuss.pytorch.kr/uploads/default/optimized/3X/5/7/576a79df99b33b94a2416d511082908ec452560e_2_1028x685.jpeg) drawio-skill: 자연어 설명을 draw.io 다이어그램으로 만드는 에이전트 스킬1536×1024 286 KB](https://discuss.pytorch.kr/uploads/default/original/3X/5/7/576a79df99b33b94a2416d511082908ec452560e.jpeg "drawio-skill: 자연어 설명을 draw.io 다이어그램으로 만드는 에이전트 스킬") ## drawio-skill 소개 drawio-skill은 자연어로 적은 설명을 `.drawio` XML로 바꾸고, [draw.io](http://draw.io) 데스크톱 CLI를 통해 PNG, SVG, PDF, JPG로 내보내는 에이전트 스킬입니다. 다이어그램을 손으로 그리거나 좌표를 일일이 지정하지 않고, "마이크로서비스 전자상거래 아키텍처를 그려줘"처럼 말로 설명하면 도구가 배치와 연결을 계획해 결과 파일까지 만들어 줍니다. Claude Code, Cursor, Copilot, OpenClaw, Codex, Hermes 등 [Agent Skills](https://agentskills.io) 형식을 지원하는 여러 에이전트에서 동작합니다. 손으로 작성하는 다이어그램에 더해, drawio-skill은 기존 코드베이스를 구조 다이어그램으로 바꾸는 기능도 제공합니다. Python, JS/TS, Go, Rust 프로젝트의 임포트 그래프나 Python 클래스 상속 계층을 추출해 자동으로 배치하므로, 큰 프로젝트의 구조를 직접 좌표로 그리지 않아도 됩니다. 별도의 MCP 서버나 백그라운드 데몬 없이 하나의 SKILL.md만으로 실행된다는 점도 특징입니다. 스킬의 기반은 MIT 라이선스로 공개돼 있고, 6가지 다이어그램 유형 프리셋(ERD, UML 클래스, 시퀀스, 아키텍처, ML/딥러닝, 플로우차트)을 갖추고 있습니다. 본 게시물에서는 drawio-skill의 생성 흐름과 코드베이스 시각화, 도형 검색 및 AI 로고 기능, 그리고 설치와 사용법을 정리합니다. ## drawio-skill의 동작 방식 drawio-skill은 설명을 받으면 레이아웃을 계획하고 `.drawio` XML을 생성한 뒤, 원하는 형식으로 내보내고 결과를 스스로 점검하는 순서로 동작합니다. 자체 검수 단계에서는 출력한 PNG를 도구가 직접 읽어 도형 겹침, 잘린 라벨, 엇갈린 연결선 같은 문제를 찾아 최대 2회까지 자동으로 고칩니다. 여기에 더해 사용자가 원하는 방향으로 최대 5회까지 반복 수정(iterative refinement)을 거칠 수 있습니다. 아래 다이어그램은 "Mobile/Web/Admin 클라이언트, 인증·레이트리밋·라우팅을 담당하는 API 게이트웨이, 여러 마이크로서비스, Kafka 메시지 큐, 각 서비스용 데이터베이스와 Redis 캐시, Stripe API"를 묘사한 단 하나의 자연어 프롬프트로 생성된 결과입니다. [![drawio-skill이 단일 자연어 프롬프트로 생성한 마이크로서비스 아키텍처 다이어그램](https://discuss.pytorch.kr/uploads/default/optimized/3X/8/7/8735068ff137e44df71ee41e478bf5e32e123549_2_1028x670.png) drawio-skill이 단일 자연어 프롬프트로 생성한 마이크로서비스 아키텍처 다이어그램1725×1125 122 KB](https://discuss.pytorch.kr/uploads/default/original/3X/8/7/8735068ff137e44df71ee41e478bf5e32e123549.png "drawio-skill이 단일 자연어 프롬프트로 생성한 마이크로서비스 아키텍처 다이어그램") 저자는 이 도구가 서로 다른 토폴로지에서도 연결선이 도형을 가로지르지 않도록 경로를 정리하는 데 초점을 맞췄다고 설명합니다. 실제로 저장소의 예시에는 별(star), 계층(layered), 링(ring) 형태의 토폴로지에서 각각 연결선이 도형을 피해 배선되는 모습이 정리돼 있습니다. ## drawio-skill의 코드베이스 시각화 drawio-skill은 손으로 그린 다이어그램을 넘어, 기존 코드를 구조 다이어그램으로 바꾸는 파이프라인을 함께 제공합니다. "이 Python 프로젝트의 모듈 구조를 시각화해줘"처럼 요청하면, 내부적으로 추출기(extractor) → 자동 배치(auto-layout) → 검증(validate) 단계를 거쳐 편집 가능한 `.drawio` 파일을 만듭니다. [![drawio-skill이 Python logging 패키지에서 자동 생성한 클래스 계층 다이어그램](https://discuss.pytorch.kr/uploads/default/optimized/3X/7/e/7e4084fdcf78777682df242f58347799ac1b7388_2_1028x280.png) drawio-skill이 Python logging 패키지에서 자동 생성한 클래스 계층 다이어그램1900×519 137 KB](https://discuss.pytorch.kr/uploads/default/original/3X/7/e/7e4084fdcf78777682df242f58347799ac1b7388.png "drawio-skill이 Python logging 패키지에서 자동 생성한 클래스 계층 다이어그램") 추출기는 Python, JS/TS, Go, Rust의 임포트 그래프와 Python 클래스 상속 계층을 다룹니다. 자동 배치는 Graphviz로 노드를 배치하고 연결선을 도형 주위로 우회시켜, 큰 그래프에서 좌표를 직접 지정해야 하는 한계를 없앱니다. 또한 더 긴 경로로 이미 함축된 간선을 제거하는 전이적 감소(transitive reduction)를 적용해, 저자에 따르면 asyncio 모듈의 경우 간선 수를 149개에서 46개로 줄였습니다. 배치에는 Graphviz가 필요하지만 나머지 기능은 Graphviz 없이도 동작합니다. ``` # 임포트 그래프 추출 — Python / JS-TS / Go / Rust python3 scripts/pyimports.py myproject --group -o graph.json # Python 클래스 상속 계층 python3 scripts/pyclasses.py mypackage --group -o graph.json # 추출 결과 → 자동 배치 → 편집 가능한 .drawio python3 scripts/autolayout.py graph.json -o diagram.drawio ``` ## drawio-skill의 도형 검색과 AI 로고 다이어그램 도구에서 정확한 벤더 아이콘을 찾지 못해 빈 상자로 렌더링되는 경우가 흔합니다. drawio-skill의 [`scripts/shapesearch.py`](https://github.com/Agents365-ai/drawio-skill/blob/main/skills/drawio-skill/scripts/shapesearch.py)는 1만 개 이상의 공식 [draw.io](http://draw.io) 도형에서 정확한 스타일 문자열을 검색해, AWS, Azure, GCP, Cisco, Kubernetes, UML, BPMN 등의 아이콘이 제대로 렌더링되도록 합니다. 또한 draw.io에는 최신 AI/LLM 로고가 들어 있지 않아 LLM 앱 다이어그램이 일반 상자로 그려지곤 합니다. drawio-skill은 `aiicons.py`로 OpenAI, Claude, Gemini, Mistral, Llama, Cohere, DeepSeek, Qwen, Ollama, LangChain, HuggingFace 등 321개 로고를 [lobe-icons](https://github.com/lobehub/lobe-icons)(MIT)에서 가져와 [draw.io](http://draw.io) 이미지 스타일로 변환합니다. ## drawio-skill 설치 및 사용법 먼저 [draw.io](http://draw.io) 데스크톱 CLI를 설치합니다. macOS에서는 다음과 같이 설치할 수 있으며, Windows와 Linux 설치 방법은 [drawio-skill 설치 문서](https://github.com/Agents365-ai/drawio-skill/blob/main/docs/INSTALL_CLI.md)에 정리돼 있습니다. ``` # macOS: draw.io 데스크톱 CLI 설치 brew install --cask drawio # 스킬 설치 (Claude Code, Cursor, Copilot 등) npx skills add Agents365-ai/365-skills -g ``` 설치 후에는 만들고 싶은 다이어그램을 자연어로 설명하면 됩니다. 예를 들어 다음은 README에 실린 머신러닝 모델 예시 프롬프트입니다. ``` 기계 번역용 Transformer 인코더-디코더를 그려줘: self-attention을 적용한 6층 인코더, cross-attention을 적용한 6층 디코더, 입력 임베딩(batch × 512 × 768), 위치 인코딩, 마지막 출력 프로젝션. 층 사이의 텐서 모양을 주석으로 달고 층 유형별로 색을 구분해줘. ``` drawio-skill은 레이아웃을 계획하고 `.drawio` XML을 생성한 뒤 선택한 형식으로 내보내고, 결과를 스스로 점검하면서 사용자가 반복 수정할 수 있게 합니다. ## drawio-skill의 라이선스 drawio-skill은 [MIT 라이선스](https://github.com/Agents365-ai/drawio-skill/blob/main/LICENSE)로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다. ## ![:books:](https://discuss.pytorch.kr/images/emoji/fluentui/books.png?v=15 ":books:") drawio-skill 문서 사이트 [agents365-ai.github.io](https://agents365-ai.github.io/drawio-skill/) ![](https://raw.githubusercontent.com/Agents365-ai/drawio-skill/main/assets/demo-star.png) ### [drawio-skill — From Text to Professional Diagrams](https://agents365-ai.github.io/drawio-skill/) Professional draw.io diagrams from natural language: 6 presets, codebase visualization, 10,000+ official shapes, 321 AI/LLM brand logos, self-check loop. ## ![:github:](https://discuss.pytorch.kr/uploads/default/original/2X/7/70a6220c603eed42089b4f67366225849e119e20.svg?v=15 ":github:") drawio-skill 프로젝트 GitHub 저장소 [github.com](https://github.com/Agents365-ai/drawio-skill) ![](https://opengraph.githubassets.com/e54551a55ba14cd2bf49d4ea3df78c3c/Agents365-ai/drawio-skill) ### [GitHub - Agents365-ai/drawio-skill: Generate draw.io diagrams from natural language —...](https://github.com/Agents365-ai/drawio-skill) Generate draw.io diagrams from natural language — 6 presets, vision self-check + up to 5-round refinement, codebase-to-diagram, 10,000+ official shapes & 321 AI/LLM brand logos. Exports PNG/SVG/PDF/JPG. ## 더 읽어보기 * [CodeBoarding: AI와 정적 분석을 결합한 오픈소스 코드베이스 분석 및 시각화 도구](https://discuss.pytorch.kr/t/8881) * [학술용 삽화 및 다이어그램 자동 생성 프레임워크 PaperBanana 관련 저장소 3종 소개: PaperVizAgent, PaperBanana, 오픈소스 PaperBanana 등](https://discuss.pytorch.kr/t/9136) * [Agent Sprite Forge: 자연어 요청으로 2D 게임 스프라이트와 맵을 만드는 Codex 에이전트 스킬](https://discuss.pytorch.kr/t/10649) * [Garden Skills: Claude Code, Cursor, Codex를 위한 4가지 프로덕션 에이전트 스킬 모음](https://discuss.pytorch.kr/t/10309) * [CAD Skills: CAD와 로봇 설계를 자동화하는 Codex 및 Claude Code 등 AI 에이전트 스킬 모음](https://discuss.pytorch.kr/t/10374) --- *이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.* ![:hugs:](https://discuss.pytorch.kr/images/emoji/fluentui/hugs.png?v=15 ":hugs:") [![:pytorch:](https://discuss.pytorch.kr/uploads/default/original/2X/f/fa98c2196c22febe7475e503792febf39ba7a0de.svg?v=15 ":pytorch:")파이토치 한국 사용자 모임![:south_korea:](https://discuss.pytorch.kr/images/emoji/fluentui/south_korea.png?v=15 ":south_korea:")](https://pytorch.kr/)이 정리한 이 글이 유용하셨나요? [회원으로 가입](https://discuss.pytorch.kr/signup)하시면 주요 글들을 이메일![:love_letter:](https://discuss.pytorch.kr/images/emoji/fluentui/love_letter.png?v=15 ":love_letter:")로 보내드립니다! [텔레그램(Telegram)](https://t.me/pytorchkr)이나 [Slack/Discord/Teams/Dooray/GoogleChat 등](https://discuss-noti.pytorch.kr)으로도 새 글 알림을 받으실 수 있습니다. ![:smiley:](https://discuss.pytorch.kr/images/emoji/fluentui/smiley.png?v=15 ":smiley:") ![:wrapped_gift:](https://discuss.pytorch.kr/images/emoji/fluentui/wrapped_gift.png?v=15 ":wrapped_gift:") 아래![:down_right_arrow:](https://discuss.pytorch.kr/images/emoji/fluentui/down_right_arrow.png?v=15 ":down_right_arrow:")쪽에 좋아요![:+1:](https://discuss.pytorch.kr/images/emoji/fluentui/+1.png?v=15 ":+1:")를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ ![:star_struck:](https://discuss.pytorch.kr/images/emoji/fluentui/star_struck.png?v=15 ":star_struck:") * [홈](/) * [카테고리](/categories) * [가이드라인](/guidelines) * [이용약관](https://pytorch.kr/coc) * [개인정보 취급방침](/privacy) [Discourse](https://www.discourse.org)를 사용합니다. JavaScript가 활성화된 상태에서 가장 잘 보입니다.