vscode-drawio

# Draw.io VS Code 통합 이 비공식 확장 프로그램은 [Draw.io](https://app.diagrams.net/)(또는 [diagrams.net](https://www.diagrams.net/))을 Visual Studio Code에 통합합니다. 공식 diagrams.net 블로그에서 언급되었습니다. ## 기능 - **다이어그램 파일 편집**: `.drawio`, `.dio`, `.drawio.svg`, 또는 `.drawio.png` 파일을 Draw.io 편집기 인터페이스로 편집합니다. - 새 다이어그램을 만들려면 이러한 확장자 중 하나로 빈 파일을 생성하고 열면 됩니다. - `.drawio.svg` 파일은 유효한 SVG로, 내보내기 없이 GitHub README에 직접 삽입할 수 있습니다. - `.drawio.png` 파일은 유효한 PNG 이미지입니다. 지원되지만, 더 나은 품질을 위해 SVG를 권장합니다. - `Draw.io: Convert To...` 명령을 사용하여 형식 간에 전환할 수 있습니다. - **오프라인 모드**: 기본적으로 오프라인 버전의 Draw.io를 사용하여 편집 중 개인 정보 보호와 외부 종속성 없음을 보장합니다. - **테마**: "atlas", "Kennedy", "min", "dark"를 포함한 여러 Draw.io 테마를 사용할 수 있습니다. - **협업**: [VS Code Liveshare](https://visualstudio.microsoft.com/de/services/live-share/)를 완전히 지원합니다. 원격으로 다이어그램을 공동 편집하거나 발표하며, 각 참가자의 커서와 선택 영역을 볼 수 있습니다. 원격 코드 인터뷰, 브레인스토밍, 리뷰에 적합합니다. 참고: Liveshare가 텍스트 문서를 동기화하므로 동시 수정 시 충돌이 발생할 수 있습니다. - **코드 링크 기능**: 상태 표시줄에서 이 기능을 활성화합니다. `#`로 레이블이 지정된 노드(예: `#MyClass`)를 더블 클릭하면 해당 기호에 대한 작업 영역 검색을 수행하고 해당 소스 코드로 이동합니다. 프로젝트에서 해당 기호가 포함된 파일이 하나 이상 열려 있어야 합니다. - **Markdown의 인라인 다이어그램(실험적)**: VS Code Insiders에서 `drawio` 태그가 지정된 펜스 코드 블록은 Markdown 미리보기 내에서 라이브, 크기 조정 가능한 편집기로 렌더링됩니다. 편집 내용은 소스 블록에 다시 기록됩니다. `locked` 및 `height=N`과 같은 속성이 지원됩니다. - **나란히 편집**: 동일한 `.drawio` 파일을 시각적 Draw.io 편집기와 원시 XML로 동시에 엽니다. 동기화 상태를 유지하므로 VS Code의 찾기/바꾸기 또는 기타 텍스트 기능을 사용하여 다이어그램 생성을 빠르게 할 수 있습니다. ## 구성 ### `.svg` 파일 연결 기본적으로 확장 프로그램은 `*.drawio.svg` 파일만 처리합니다. 모든 `.svg` 파일을 Draw.io 편집기에 연결하려면 `settings.json`에 다음을 추가합니다: ```json "workbench.editorAssociations": { "*.svg": "hediet.vscode-drawio-text" } ``` *참고: Draw.io 또는 이 확장 프로그램으로 생성된 SVG만 이 방식으로 편집해야 합니다.* ## 기여자 - Henning Dieterichs ([hediet](https://github.com/hediet)) - 주요 기여자 / 저자 - Vincent Rouillé ([Speedy37](https://github.com/Speedy37)) ## 참조 - [Draw.io](https://app.diagrams.net/): 이 확장 프로그램을 구동하는 핵심 엔진. - [vscode-drawio](https://github.com/eightHundreds/vscode-drawio): eightHundreds의 유사한 확장 프로그램.