【팁 Visual Studio Code의 Draw.io에서 최신 AWS 아이콘을 사용하는】 방법

📅 작성일: 2025/01/04, 수정일: 2025/06/17 ⏱️ 예상 읽기 시간 약 3분 (1,229자)

Visual Studio 「Code용 Draw.io Integration」 플러그인을 사용하면 로컬 환경에서 Draw.io를 사용할 수 있습니다.
Draw.io는 HTML5와 JavaScript로 개발된 다이어그램 소프트웨어입니다.
AWS 아키텍처 다이어그램, UML 흐름도, 네트워크 다이어그램 등을 만드는 데 유용합니다.Draw.io에서 기본적으로 제공되는 AWS 아이콘은 오래되어 최신 아이콘을 사용할 수 없는 경우가 많습니다.
이 문서에서는 Visual Studio 코드 내에서 Draw.io의 최신 AWS 아이콘을 사용하는 방법을 소개합니다.

설정 개요
설정 단계
1. 1단계: AWS 아이콘 다운로드
2. 2단계: Visual Studio Code 사용자 설정에서 사용자 지정 라이브러리 등록
참조

설정 개요

이 가이드에서는 Visual Studio Code 확장 “Draw.io 통합”이 설치되어 있다고 가정합니다.
이 확장을 사용하면 XML 형식 아이콘을 사용자 정의 라이브러리로 등록할 수 있습니다.
웹사이트 https://app.diagrams.net/ 에서는 커스텀 라이브러리를 생성해 기본적으로 포함되지 않는 아이콘을 추가할 수 있습니다.
그러나 VS Code 확장을 사용하면 사용자 지정 라이브러리를 직접 만들 수 없습니다.
VS Code에 사용자 정의 아이콘을 추가하려면 먼저 웹 사이트에서 사용자 정의 라이브러리를 생성 및 다운로드한 다음 Draw.io 통합 확장에 등록해야 합니다.

이 가이드에서는 m-radzikowski/diagrams-aws-icons: AWS 아키텍처 아이콘이 포함된 Diagrams.net 모양 라이브러리 에 게시된 XML 파일을 다운로드하고 Draw.io 통합 확장 프로그램에 등록하는 방법을 설명합니다.
프로세스는 두 단계로 구성됩니다. 1단계는 AWS 아이콘을 다운로드하는 것이고, 2단계는 Visual Studio Code 사용자 설정에 사용자 지정 라이브러리를 등록하는 것입니다.

설정 단계

1단계: AWS 아이콘 다운로드

먼저 m-radzikowski/diagrams-aws-icons: AWS 아키텍처 아이콘이 포함된 Diagrams.net 모양 라이브러리 에서 필요한 XML 파일을 다운로드합니다.
작성 당시 최신 버전은 AWS Architecture Icons 20240206.xml 입니다.
다운로드 후 원하는 디렉토리에 XML 파일을 저장하세요.예를 들어, 사용자 디렉터리에 ’vscode-drawio’라는 디렉터리를 만들고 거기에 저장할 수 있습니다.
경로는 /Users/user01/vscode-drawio/AWS Architecture Icons 20240206.xml 과 같습니다.

2단계: Visual Studio Code 사용자 설정에서 사용자 지정 라이브러리 등록

그런 다음 Visual Studio Code를 열고 다음 키를 눌러 사용자 설정을 엽니다(Windows: Ctrl + , , Mac: Command + , ).검색창에 ’drawio’를 입력하고 ’Drawio: Custom Libraries’를 선택하세요.그런 다음 ’settings.json에서 편집’을 클릭하세요.

’settings.json’에 다음 설정을 추가하세요. entryId 및 libName 을 원하는 값으로 설정하고 file 에 다운로드한 XML 파일의 경로를 지정할 수 있습니다.

"hediet.vscode-drawio.customLibraries": [
    {
        "entryId": "AWS-20240206", // https://github.com/m-radzikowski/diagrams-aws-icons
        "libName": "AWS-20240206",
        "file": "/Users/user01/vscode-drawio/AWS Architecture Icons 20240206.xml"
    }
]

설정을 저장한 후 Visual Studio Code를 다시 시작합니다.다시 시작한 후 Draw.io 파일(예: test.drawio )을 생성하고 엽니다.
왼쪽 창에서 “다른 모양”을 클릭합니다.

사용자 정의 라이브러리 섹션에서 libName 에 설정한 이름(예: AWS-20240206)에 대한 확인란을 선택한 다음 적용을 클릭합니다.(제 환경에서는 왠지 라이브러리 이름이 검은색으로 나오더라구요.)

왼쪽 패널에 ’AWS-20240206’이 나타나면 설정이 완료된 것입니다.

참조

VSCode #VSCode - Qiita용 Draw.io 플러그인을 사용하여 디지털 에이전시에서 게시한 일러스트레이션 및 아이콘 자료 사용에 대한 메모
참고: 위에 링크된 관련 자료는 일본어로 작성되었습니다.