• 거의 무인도 입니다. 표류되어 같이 노실분?
    일주일 동안 열지 않기

컴퓨터/모바일

쓰기
  • 목록
  • 아래로
  • 위로
  • 0
  • 덕후
  • 2019.03.24. 00:50
  • 조회 수 350

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

아래 글 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

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

작성자
덕후 5 Lv. (37%) 2621/3240P

♥기록덕후♥

공유

facebooktwittergoogle pluspinterestbandkakao story
퍼머링크

댓글 0

권한이 없습니다.