수록 현황:437 건의 뉴스/102 개의 AI 도구/413 개의 오픈소스 프로젝트/75 개의 학습 자료
홈뉴스오픈소스모델AI 도구Skills학습 자료
홈 / Skills / 개발 생산성 / Draw.io 다이어그램과 PNG 내보내기
개발 생산성

Draw.io 다이어그램과 PNG 내보내기

awesome-copilot communityMITSkill 언어: 영어
라이선스 확인됨스크립트 포함외부 서비스 필요중간 위험
데모실행 기록 · claude-sonnet-5-5 · 2026년 10월
I have a draw.io diagram at .claude/skills/drawio/sample/architecture.drawio. Export it to a PNG next to it (default name) using the skill's script, so I can paste it into a Word document. Dependencies are not installed yet: first run `npm install --prefix .claude/skills/drawio/scripts` (that exact command is allowed), then use the export command with relative paths. Afterwards open the PNG and describe what it shows, and tell me which renderer was used.
Skill: drawio
Read: sample/architecture.drawio.png

I exported the diagram to .claude/skills/drawio/sample/architecture.drawio.png. That is the script's default name, so the file ends in .drawio.png, not .png. It's 13 KB, and the diagram XML is embedded, so you can still edit it in draw.io.

What it shows: a simple left-to-right flow with three elements joined by arrows.

  1. Client is a blue rounded box.
  2. API Gateway is a green rounded box.
  3. 数据库 (Database) is a yellow cylinder, the data-store shape.

Renderer: the draw.io CLI (the desktop app's draw.io command), selected automatically. The headless-browser viewer fallback wasn't needed.

I ran npm install --prefix .claude/skills/drawio/scripts first, as you asked, and it added 80 packages.

You can paste the PNG straight into Word. If you'd rather have the name architecture.png, I can rename or re-export it.

试用方式：我在本机装有 draw.io 桌面版的前提下，让模型先执行 npm install，再用 Skill 的导出脚本把我构造的 .drawio 文件导出为 PNG，并打开 PNG 描述内容；Bash 只放行这两条命令。这次只试了导出这一半，没有让模型从零生成图表 XML（试用环境不能写文件）。我另外手动测了浏览器后备渲染、批量目录、无效文件和覆盖。

하는 일

모델이 draw.io 다이어그램을 .drawio 파일 안의 mxGraphModel XML로 쓰게 하고, Word 문서에 넣을 수 있는 이미지로 내보냅니다. 동봉된 drawio-to-png.mjs에는 두 가지 렌더링 방식이 있습니다. draw.io 데스크톱이 설치되어 있으면 그 명령줄(가장 빠르고 픽셀 단위로 동일), 없으면 헤드리스 Chromium 또는 Edge에서 공식 draw.io 뷰어를 사용합니다. 파일 하나나 디렉터리 전체를 내보낼 수 있고, PNG·SVG·PDF에는 다이어그램 XML이 포함되어 draw.io에서 계속 편집할 수 있습니다. 주요 서비스, 외부 시스템, 성공·경고·오류 경로, 데이터 저장소, 화살표의 스타일 규칙도 담겨 있습니다.

동작 방식

  1. 모델이 다이어그램 XML을 .drawio 파일에 씁니다.
  2. scripts 폴더에서 한 번 npm install을 실행합니다.
  3. node drawio-to-png.mjs input.drawio [output.png], 또는 --dir <폴더>, --renderer=cli|viewer|auto를 사용합니다.

이런 때 좋습니다

결국 문서 속 이미지가 될 아키텍처 다이어그램과 흐름도.

참고 및 위험

중간 위험：내보내기 스크립트는 로컬 프로그램을 실행하고, 대체 경로에서는 브라우저도 실행합니다. `DRAWIO_PATH` 변수 또는 `which drawio`로 draw.io 명령줄을 찾아 인자 목록으로(셸을 거치지 않고) 시작하며, 없으면 설치된 Chrome 또는 Edge를 샌드박스를 끈 채(`--no-sandbox`) 헤드리스로 실행하고 `viewer.diagrams.net`에서 뷰어 스크립트를 불러오므로 네트워크 접속이 필요합니다. `npm install`(`puppeteer-core`)이 필요하고 출력 경로에 이미지 파일을 쓰며 같은 이름의 파일은 바꿉니다. 시험 실행함: draw.io 데스크톱이 설치된 기기에서 명령줄 렌더링(중국어 포함)과 브라우저 대체 렌더링이 모두 올바르게 내보내졌고, PNG에는 다시 편집할 수 있는 다이어그램 XML이 포함되었습니다. 제한: 렌더링이 실패하면(예: 올바른 draw.io 형식이 아닌 파일) 오류만 출력하고 Done을 표시하며 종료 코드는 0입니다. 같은 이름의 출력 파일은 바뀝니다.