본문 바로가기

별걸다하는 IT/개발환경 세팅&TIPS

[UML tool]인터넷 웹에서 설치없이 UML 설계 그리기 지원하는 사이트 diagrams.net 소개 및 사용법 (draw.io)

안녕하세요 양햄찌 블로그입니다.

다양한 무료 UML 프로그램을 인터넷에서 쉽게 찾을 수 있는데요,

오늘은 웹 온라인에서 UML을 그릴 수 있는 사이트를 소개하려고 합니다.

설계 DIAGRAM 그릴 수 있는 사이트 - draw.io 소개

원래 저 대학생 시절에만 해도, www.draw.io였는데 url주소가 diagrams.net으로 바꼈더라고요?!  

그런데 어느 주소로 가던 다 라우팅되기 때문에 어떤 접속 주소로 치던 관계없습니다~!

그림 누르면 링크로 이동!

 

DRAW.IO의 특징!

1. 일단 가장 중요한 점은 가격!! 무료라는게 큰 장점

2. MAC이던 윈도우던 OS관련없이 지원된다는거~~

3. 웹이기 때문에 별도의 프로그램 설치가 필요없습니당.

4. 내 데탑 로컬에다가 저장할 수도 있지만, 클라우드 저장도 가능하다는 점 (깃헙, 원드라이브, 구글드라이브 등 다양하게 지원)

5. 여러가지 다이어그램을 지원

6. 직관적인 UI

7. 한글 지원 됨

사이트에 들어가면 요렇게 뜨는데 ~~

원하는 저장공간 선택하시면 돼요.

지원되는 다이어그램이 정말 많죠?? ㅎㅎ

제 개인적으로 가장 많이 쓰는 ERD도 있고, 클래스 다이어그램, flow chart등 다 있습니당.

 

선택하면 끝! 요렇게 뜹니다 간단하쥬??

 

간단하게 ERD를 만들어봤어요 ㅎㅎ

요 옆에 보이는 탭 있죠?? 이걸 통해서 여러가지 시트를 만들어 각기 다른 UML을 저장해도 된답니다. 

 

Draw.io 사용팁

사실 직관적이라서 사용법이 딱히 필요없는데 몇가지 사용팁을 적어볼게요

 

▼배경화면 객자 무늬 없애는 법

저 배경을 클릭하면 오른쪽에 Diagram과 Style 메뉴가 뜨는데 Diagram에서 Grid 체크된걸 풀어주시면 배경무늬가 흰 바탕으로 변경됩니다.  

 

▼화살표 간편하게 그리기

오른쪽에 있는 메뉴에서 화살표를 클릭해다가 두 도형을 연결해줘도 되지만, 

화살표를 많이 이어야할 경우에는 번거로울 수 있죠.

그럴때에는 이렇게 도형을 먼저 만들어놓고, 도형에 마우스를 올려놓으면 이렇게 초록색깔 모양이 뜨는데 여기를 클릭해 드래그로 다른 도형과 이어주면 자동으로 화살표가 만들어집니다.

 

▼화살표와 함께 도형 복사하기

저렇게 도형 두 개를 준비해놓은 다음에 드래그로 이어도 되지만,

저기 초록색 부분을 컨트롤+드래그로 하면 왼쪽 도형과 동일한 도형이 복사되면서 화살표가 붙습니다. 간편하쥬?

 

▼기존에 만들어둔 도형 변경하기

만들어둔 도형의 모양을 변경하고 싶으시면, 왼쪽의 메뉴에서 원하는 도형을 드래그한 뒤 겹치면 변경됩니다.

 

▼ERD테이블에서 행(열) 컬럼 추가하기

테이블에서 추가하고 싶은 행에다가 마우스를 갖다되면 행 양옆에 푸른 화살표가 뜨는데요,

요 화살표를 클릭해도 행을 이렇게 넓힐 수 있고.

테이블을 클릭한 상태에서 Arrange 탭을 들어가면, 위 사진처럼, 행이나 열을 추가할 수 있는 아이콘이 있습니다. 이거 눌러서 추가하셔도 돼요 ㅎㅎ

 

오늘은 간단하게 UML 웹사이트 draw.io에 대해 소개해봤어요 ㅎㅎ

그럼 다음 포스팅에서 뵐게요~~