Repolode
제출하기
hediet

hediet/vscode-drawio

Draw.io(diagrams.net) 다이어그램을 VS Code 편집기에서 바로 만들고 수정할 수 있는 비공식 확장입니다.

GitHub에서 보기웹사이트
스타
9,511
포크
470
열린 이슈
171
마지막 커밋
어제

어떤 프로젝트인가요?

이 확장은 .drawio, .dio, .drawio.svg, .drawio.png 파일을 VS Code 안의 Draw.io 편집기에서 엽니다. 기본으로 Draw.io 오프라인 사본을 포함하므로 네트워크 연결 없이 다이어그램을 수정할 수 있습니다. 이러한 확장자를 가진 빈 파일을 열어 새 다이어그램을 시작할 수 있으며, convert 명령으로 형식을 전환할 수도 있습니다.

.drawio.svg와 .drawio.png 형식은 유효한 이미지 파일이며, 저장할 때 내장된 다이어그램도 최신 상태로 동기화됩니다. 따라서 GitHub README 같은 곳에 바로 표시할 수 있습니다. 일반 .drawio 파일은 XML 형식이어서 git에서 diff를 읽기 쉽고 AI assistant가 읽고 수정하기도 편리합니다.

그 밖에도 여러 Draw.io 테마, 공동 편집과 발표를 위한 Live Share 지원, 심볼 이름이 붙은 노드에서 해당 소스로 이동하는 코드 링크 옵션, 다이어그램과 XML을 나란히 편집하는 기능을 제공합니다.

핵심 기능

  • 01.drawio, .dio, .drawio.svg, .drawio.png 파일을 Draw.io 편집기에서 수정합니다.
  • 02기본으로 Draw.io 오프라인 버전을 포함합니다.
  • 03저장할 때 내장된 SVG 및 PNG 이미지를 최신 상태로 유지합니다.
  • 04다이어그램을 일반 XML로 저장해 git에서 깔끔하게 diff를 확인할 수 있습니다.
  • 05공동 편집과 발표를 위해 Live Share를 지원합니다.
  • 06다이어그램 노드를 코드 심볼에 연결해 해당 소스로 이동할 수 있습니다.

활용 사례

  • 설명 대상 코드와 같은 저장소에 아키텍처 다이어그램을 보관합니다.
  • GitHub README에서 바로 렌더링되는 SVG 파일로 다이어그램을 삽입합니다.
  • 읽기 쉬운 XML diff로 pull request에서 다이어그램 변경 사항을 검토합니다.
  • Live Share를 통해 팀원과 함께 다이어그램을 그립니다.

빠른 시작

  1. 1

    VS Code Marketplace에서 확장 프로그램을 설치합니다

  2. 2

    확장자가 .drawio, .drawio.svg 또는 .drawio.png인 빈 파일을 만들고 엽니다

사용 전 알아둘 점

  • diagrams.net 팀이 만든 것이 아닌 비공식 확장 프로그램입니다.
  • 카피레프트 라이선스인 GPL-3.0에 따라 라이선스가 부여됩니다.
  • Markdown 인라인 편집에는 VS Code Insiders가 필요하며 실험 단계입니다.

토픽

#diagram#drawio#vscode-extension#diagramming#svg#whiteboard#hacktoberfest

자주 묻는 질문

vscode-drawio은(는) 무엇인가요?
Draw.io(diagrams.net) 다이어그램을 VS Code 편집기에서 바로 만들고 수정할 수 있는 비공식 확장입니다. 이 확장은 .drawio, .dio, .drawio.svg, .drawio.png 파일을 VS Code 안의 Draw.io 편집기에서 엽니다. 기본으로 Draw.io 오프라인 사본을 포함하므로 네트워크 연결 없이 다이어그램을 수정할 수 있습니다. 이러한 확장자를 가진 빈 파일을 열어 새 다이어그램을 시작할 수 있으며, convert 명령으로 형식을 전환할 수도 있습니다.
vscode-drawio은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
vscode-drawio은(는) GPL-3.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
vscode-drawio은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. vscode-drawio의 마지막 커밋은 2026년 11월 6일입니다.
vscode-drawio은(는) 어디에 사용할 수 있나요?
설명 대상 코드와 같은 저장소에 아키텍처 다이어그램을 보관합니다. GitHub README에서 바로 렌더링되는 SVG 파일로 다이어그램을 삽입합니다. 읽기 쉬운 XML diff로 pull request에서 다이어그램 변경 사항을 검토합니다. Live Share를 통해 팀원과 함께 다이어그램을 그립니다.
vscode-drawio는 어떻게 설치하나요?
VS Code Marketplace에서 확장 프로그램을 설치합니다 확장자가 .drawio, .drawio.svg 또는 .drawio.png인 빈 파일을 만들고 엽니다
vscode-drawio은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/hediet/vscode-drawio

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트