ERD Editor - VSCode에서 ERD를 그려보자

들어가기에 앞서,
회사에서 모든 업무가 Oracle DB를 베이스로 진행되다보니
자연스럽게 ERD를 작성할 필요가 많아졌다.

이번 프로젝트를 진행하면서 ERD를 그리고자
다양한 툴을 사용해봤는데, (Mermaid, Lucid 등) 내 기준 가장 만족스러운 ERD 툴은 ERD Editor이다.

ERD Editor

일단, ERD Editor는 다른 툴들과 달리 웹 베이스가 아닌
VSCode내 Extension이다.
물론 Mermaid도 Extension이 따로 있다.

파일 생성 방법은 해당 Extension 설치 후,
폴더에서
다이어그램명.vuerd.json 파일을 생성해주면 끝.

사용법

1. 새로운 테이블 추가
   
   생성한 json파일에서 우클릭 후 New Table클릭 or Alt + N
   

2. 테이블이 개설됬으면,
   테이블 명과, 테이블에 대한 설명을 간단히 적을 수 있다.

3. 새로운 컬럼 추가
   테이블 개설 후, Alt+Enter를 통해 컬럼을 구성할 수 있다.
   

4. PK 설정
   구성한 컬럼에서 Alt+K를 통해 해당 컬럼을 PK로 지정할 수 있다.
   

5. RelationShip 설정
   두 테이블을 간 관계는 마우스 우클릭 후, 관계에 맞는 선을 찾아 연결하면 된다.
   관계를 연결하면 자동으로 FK가 딸려온다.
   
   해당 FK를 자식 테이블의 PK로 설정하면,
   선이 식별관계(실선)으로 자동 변경

6. Index 설정
   테이블 우클릭 or Alt+Space를 통해 Table Properties 속성을 변경할 수 있다.
   
   Unique여부와 Index 생성을 표기 가능.
   

7. Memo 작성
   ERD를 작성하다보면 변화가 예상(필요)하거나, 놓쳤던 부분에 대한 메모가 필요할 떄가 있다.
   혹은, 다른 팀원이 ERD를 확인할 때 확인하면 좋을 내용을 기록해 둘 필요도 있다. (주석같이)
   
   그럴 때, 우클릭 해 New Memo를 추가하거나 Alt+M을 통해 메모를 추가할 수 있다.
   

8. 기타 단축키는
   Settings > Shortcuts을 통해 확인할 수 있다.
   

장점

1. VSCode에서 작업하다보니, 아무래도 UI가 직관적이고 익숙하다.
2. 단축키가 매우 편리하게 되어있어, 마우스 접근이 비교적 덜하다.
3. VSCode를 Git과 직접 연결해서 사용하는 개발자가 많아(나도 포함),
   산출물 관리가 매우 편리하고, ERD 변화 과정을 기록할 수 있다.
4. 다른 툴들과 달리 UI 기반 사용이 편리했다. (개인적)
5. ERD를 작성하면서 메모를 남길 수 있는데 이 부분이 개인적으로 좋았음

단점

1. Mermaid, Lucid와 달리 AI가 직접적으로 연결되어있지 않다보니, LLM에 따로 도움을 요청해야 한다.
2. 기본적으로 ChatGPT, Claude, Gemini의 경우, ERD에 대한 답변이 Mermaid코드 기준이다.
3. Relationship 표현이 IE 표기법으로 한정되어있다.

마치며...

앞으로 ERD는 해당 툴을 통해 자주 그릴 것 같다.
다양한 AI 툴, ERD 툴을 사용하며 느낀 건
시작부터 백지에서 VSCode에 그리는건 미련하다는 것이다.
내가 고려한 방식은 다음과 같다.

1. 설계 및 작성할 DDL Schema를 ChatGPT, Gemini에 전달해 오류 및 정규화 위배 부분을 잡는다.
2. 어느 정도 완성된 Schema를 토대로 Mermaid에서 AI를 통해 ERD를 그린다.
   (사실 여기까지해도 완성된 ERD가 도출될 때가 많음)
3. DB 이해도를 높이고, 테이블 간 관계를 직접 파악하기 위해
   ERD Editor를 통해 ERD를 직접 그린다.
4. 그린 ERD를 Git에 Commit에 형상관리를 하거나 팀원과 작성 내용을 공유한다.

다음엔 PlantUML을 통해 Usecase, Sequence 등의 다이어그램을 그려보겠다.

ps. Cursor나 Windsurf가 이것도 도와주는지 확인해 볼 필요있음