본문 바로가기
ETC

[ERD 툴 추천] vscode로 ERD 만들기 (feat. ERD Editor)

by 까리한 새우 2024. 12. 18.

 

이번에 혼자서 개인프로젝트를 해볼까? 하고 시작했으나, ERD를 어떤 툴을 사용하여 만들지 고민에 빠지게 되었다.

그러던 중, 쉽게 내가 기존에 깔려 있는 툴이며 깔끔하고 빠르게 만들 수 있을것 같은 방법을 찾아 공유하게 되었다.

 

vscode 를 사용하여 ERD 를 만들것이다!

 

우선, vscode 의 "확장" 탭에 들어가 "ERD Editor" 를 설치해준다.

 

설치가 되었다면 아래와 같은 형식으로 파일을 하나 만들어준다.

형식 : '{ERD 이름}.vuerd.json'

 

 

 

만들어진 파일을 우클릭을 한 다음 "Open ERD Editor" 를 클릭하여 ERD 편집기를 켜줍니다.

 


 

 

[ ERD Editor 사용법]

우선 맨 위 상단에 보면 다음과 같은 바 가 보일것이다.

간단하게 보고 넘어가면 될것같다. 

좀 더 자세한건 써보면서 익히는것으로 하자.

 

상단에 '?' 모양을 클릭하면 도움말이 나오니 참고해도 좋을 것 같다. (전부 영어로 나오지만..)

 

 

 

상단의 바가 아닌 가운데의 캔버스를 우클릭 하면 다음과 같은 창이 뜬다.

 

"New Table" 을 클릭하면 새로운 테이블을 생성할 수 있다.

만약 테이블간에 관계를 설정하고 싶다면 "Relationsship" 을 클릭하고 관계를 선택해주면 된다.

 

그 외에도 DB를 변경하거나 메모를 추가하는 등 여러가지 옵션이 있으니 직접 사용하며 익숙해지면 좋을 것 같다.

 

 

아래와 같이 N:M관계, 1:N관계, 1:1관계 등등 선택하여 사용할 수 있다.

 

 

"New Table" 을 클릭하면 다음과 같이 테이블이 생성된다.

'comment' 부분에는 table 이름을 적어주면 된다.

 

그리고 컬럼을 추가하고 싶다면 오른쪽 상단에 '+' 버튼을 클릭해주자.

 

그럼 아래와 같이 column 을 설정할 수 있는 칸이 추가가 된 후, 컬럼명과 컬럼의 데이터 타입, NULL 유무, default 값 설정 및 comment 를 설정할 수 있다.

 

 

그리고 컬럼을 우클릭하게 되면 아래와 같은 창이 뜬다.

여기서는 PK를 설정해줄 수 있다.

 

나머지 옵션들은 사용해보지 않았기때문에 생략하겠다!!

이정도만 알아도 왠만한건 만들수 있지않을까??

 

 

마지막으로, 아래 사진은 내가 지금 간단한 개인 프로젝트를 만들면서 ERD 를 그리고 있는 사진이다.

생각보다 편리하고 깔끔해서 나중에 기회가 된다면 이 툴을 또 사용할 것 같다!!

 

 

ps. 근데 DB 관계 설정하기 너무 복잡하고 어렵다.. (feat. JPA....)

반응형