• 목록
  • 아래로
  • 위로
  • 쓰기
  • 검색

Draw.io 플로우차트 그리기, 다이어그램 툴 사이트 추천

덕후 덕후
17883 0 0

플로우차트, 다이어그램 그리기 사이트 추천 해봅니다.

아래 글 https://dukdo.com/it/3005 에서 LucidChart라는 것을 써보고 별로 마음에 들지 않아서 다른 것을 찾다가 Draw.io라는 곳을 알게 되었습니다. 급히 간단한 결과물을 만들어야 했는데 덕분에 잘 했습니다.

 

Draw.IO의 세계로~

사이트 주소 : https://www.draw.io/

 

들어 가시면 아래와 같은 화면이 나옵니다.

 

draw_io (1).jpg

다이어그램 혹은 플로우차트 결과물을 어디에 저장할지 선택하는 것인데요. 구글드라이브, 원드라이브, 디바이스(내 컴퓨터) 이렇게 3가지를 선택할 수 있습니다. 가장 많이 사용하는 드롭박스(Dropbox)가 없는게 조금 아쉽네요.

 

draw_io (2).jpg

그 아래 있는 Language 버튼을을 누르면 한국어 선택도 가능합니다. 아 물론 영어로 해도되는데~ 한글을 사랑하니까 한글로..

 

draw_io (3).jpg

새로운 다이어그램을 만들어 봅시다.

 

draw_io (4).jpg

꽤나 많은 서식들이 있기 때문에 마음에 드는 디자인이나 레이아웃을 골라서 글자및 몇몇 도형을 수정하는 형식으로 꽤 멋지게 만들 수 있습니다. 와 이런것들이 그냥 온라인상에서 가능하다니.. 사이트 자체가 하나의 프로그램, 툴이 되어버리는 세상.. 포토샵도 가능하니 놀랄 것 없다고 생각할 수 있겠지만 막상 내가 유용한 서비스를 이렇게 적절한 타이밍에 찾아서 쓰게 되니 고마울 지경입니다.

 

draw_io (5).jpg

저는 연습도 해볼겸 공백 다이어그램 선택

 

draw_io (6).jpg

왼쪽에 각종 도형들이 있습니다. Misc, Advanced, UML, Entry Relation, Basic, Flowchart, BPMN 어쩌고.. 등등 눌러보시면 더 많이 나옵니다. 

draw_io (7).jpg

마음에드는 것은 한글이 그냥 바로 된다는것. 그리고 스타일을 좀 더 세부적으로 편집할 수 있습니다.

 

  • 스타일 - 도형의 컬러 / 채우기(일반색, 그라데이션) / 선의 색과 굵기 / 음역, 유리효과, 둥근선, 코믹 등등 다양한 것들이 있습니다.
  • 텍스트 - 폰트 선택 / 굵게 / 이탤릭 / 언더라인 / 좌, 중간, 우 배열 / 폰트 크기 / 글꼴 색 / 배경색 / 테두리 색 / 불투명 투명 조절 / 상하좌우 및 전체 간격 조정
  • 배열 - 도형들의 크기(너비, 높이) / 위치 / 각도 / 회전, 뒤집기

꽤나 기능들이 많습니다.

 

draw_io (8).jpg

이렇게 도형을 선택한 후 글자를 넣으면 되는 단순한 구조 입니다.

 

draw_io (9).jpg

복사(Ctrl+C) - 붙여넣기(Ctrl+V)도 됩니다!

 

플로우차트 다이어그램 툴 사이트 (5).jpg

도형+텍스트+화살표 이게 뭐 할일의 거의 대부분이기 때문에 설명이 필요없겠지만...

 

 

플로우차트 다이어그램 툴 사이트 (6).jpg

두개를 만들어서

 

플로우차트 다이어그램 툴 사이트 (7).jpg

연결할때는 저렇게 마우스를 점있는 부분에 갖다대면 초록색 원이 생기는데요. 저기서 마우스를 클릭해서 

 

플로우차트 다이어그램 툴 사이트 (8).jpg

끌어다 다른 점에 붙이면 저렇게 화살표가 생깁니다. 쉽죠?

 

 

draw_io (10).jpg

제가 원하는 결과물을 만들었습니다.

 

draw_io (11).jpg

바탕화면에 격자(Grid)가 보기 싫으시다면 컨트롤+쉬프트+G를 누르셔도 되고, 저 메뉴에서 선택해제를 해주셔도 됩니다.

draw_io (12).jpg

마이크로소프트 프린트 to PDF를 통해서 PDF 파일로 저장할수도 있고, 따로 파일로 저장해서 다음에 다시 불러서 수정도 가능합니다. 너무 편하더군요.

 

draw_io (13).jpg

두번째 다이어그램도 잘 만들어서 출력했습니다.

 

아래는 예제 레이아웃들입니다.

플로우차트 다이어그램 툴 사이트 (1).jpg

플로우차트 다이어그램 툴 사이트 (2).jpg

플로우차트 다이어그램 툴 사이트 (3).jpg

플로우차트 다이어그램 툴 사이트 (4).jpg

이정도면 훌륭하죠? 무료로 이렇게 쓸 수 있다니.. 가끔 사용하는 저 같은 유저들에게는 정말 큰 도움이 되는 사이트 입니다. 제작자님 쌩유~

신고공유스크랩

댓글 0

댓글 쓰기
에디터 모드

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크
번호 제목 글쓴이 날짜 조회 수
33
image
덕후 20.09.12.14:35 6739 0
32
image
덕후 20.03.22.17:34 1008 0
31
image
덕후 20.03.09.19:11 1759 0
30
image
덕후 20.02.29.21:46 7854 0
29
image
덕후 20.02.25.03:12 6795 0
28
image
덕후 20.02.08.03:57 3500 0
27
image
덕후 20.01.28.18:44 11229 0
26
image
덕후 20.01.15.14:40 3503 0
25
image
덕후 20.01.12.00:33 981 0
24
image
덕후 19.12.01.01:07 2593 0
23
image
덕후 19.04.02.20:36 1102 0
image
덕후 19.03.24.00:50 17883 0
21
image
덕후 19.03.24.00:27 1405 0
20
image
덕후 19.03.23.03:35 6596 0
19
image
덕후 19.03.23.02:29 5482 0
18
image
덕후 19.03.19.23:37 3840 0
17
image
덕후 19.03.17.02:35 4380 0
16
image
덕후 19.03.17.00:22 8189 0
15
image
덕후 19.03.16.23:34 3357 0
14
image
덕후 19.03.12.04:27 522 0