ERD Editor - ERD 툴 추천, vscode로 ERD 만들기
1. 들어가며
나는 평소 ERD를 그릴 때 ERDCloud를 사용했다. 하지만 아래 3가지가 마음에 들지 않았다.
- UI가 예쁘지 않다 (개인 취향)
- 광고로 인해 화면의 절반 정도밖에 사용하지 못한다
- 확대를 하면 화질이 깨진다
다른 ERD 툴로 갈아타려고 여러 번 시도해보았지만 나의 니즈를 모두 충족하는 무료 툴을 찾지 못했다 ㅠ ㅠ
- 깔끔한 UI (draw.io 같은 UI는 투박해보여서 pass...!)
- 연관 관계를 UI 상에 표시할 것 (가끔 직선만 존재하여 1:1인지 1:N인지 구분이 안되는 툴들이 있다)
- 테이블 수의 한계가 없을 것 (대부분의 무료 툴은 10~15개 테이블 제한이 있다)
- 다른 사람과 공유가 가능할 것 (png export 또는 웹 링크 공유가 가능할 것)
2. ERD Editor란?
ERDCloud의 대체재를 찾다가 발견한 것이 vscode 익스텐션인 ERD Editor이다!
ERD Editor - Visual Studio Marketplace
Extension for Visual Studio Code - Entity-Relationship Diagram Editor VSCode Extension
marketplace.visualstudio.com
우선 첫인상은 합격이였다. (무료, UI가 깔끔함, PK&FK 여부 직관적으로 확인 가능, 연관 관계 직관적으로 표시)
익스텐션이기 때문에 공동 편집은 안되지만 파일로 관리하기 때문에 git을 사용하여 형상관리가 가능하고, 이를 활용하여 협업이 가능할 것이라고 판단했다. (그리고 지금 하고 있는 프로젝트에서는 서버 개발자가 나 혼자이기 때문에 당장은 상관이 없다.)
ERD Editor의 단점을 발견하기 전까지는 ERD Editor에 정착할 예정이다!
3. 간단한 사용 방법
익스텐션 설치
확장 탭에 들어가 'ERD Editor'을 설치해주자.
ERD 생성
{ERD 이름}.vuerd.json 형식으로 파일을 만들고, 우클릭을 한 다음 'Open ERD Editor'를 눌러 ERD 편집기를 켜준다.
아래와 같이 빈 캔버스가 나온다. 상단 바에서 중요한 아이콘들만 일부 설명을 적어두었다. 마우스를 위에 두면 어떤 기능인지 나오기도 하고 직접 하나씩 눌러보며 기능을 익히자.
물음표 아이콘을 누르면 도움말(단축키 정보)이 나오는데 단축키가 매우 다양하다!
테이블 생성
빈 캔버스 위에서 우클릭을 하면 아래와 같이 주요 기능들이 나온다.
Automatic Table Placement는 ... 한번 해봤는데 내가 원하던대로 정렬되진 않았다 ... ^^ 연관 관계가 너무 꼬였을 때만 사용하자 하하
New Table을 눌러 테이블을 생성해보자.
+ 버튼이나 Alt + Enter로 컬럼을 추가할 수 있다.
dataType의 경우 드롭다운이 나와서 편했다. Null 여부, 기본값, 메모도 적을 수 있다.
PK 설정은 우클릭 후 Primary Key를 누르거나 Alt + K로 지정할 수 있다.
연관관계 설정
빈 공간에서 우클릭 후 원하는 연관 관계를 선택해준다.
그 후 연관관계를 설정할 두 테이블을 클릭해주면 연관관계가 맺어진다. ERDCloud와 동일하게 식별 관계인지 비식별 관계인지 색깔로 구분이 되고, 연관관계를 설정하면 자동으로 FK와 PK 컬럼이 생긴다.
나머지 기능들을 직접 ERD를 그려가면서 알아가길 바란다.