본문 바로가기

기획/Note

[vscode Extension] drawio

vsCode Extension 에 drawio 가 추가되었다. 

사용방법은 잘 모르던 툴인데, visio와 mySql workbench 를 이용해 erd를 그리거나, uml그리던것과 비슷하기도 하고, 

무엇보다도, 무료고... 

 

해서 관심있던 툴.

 

간단한 소개는 아래 링크 참조

 

https://app.diagrams.net/

 

Flowchart Maker & Online Diagram Software

Flowchart Maker and Online Diagram Software diagrams.net (formerly draw.io) is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPM

app.diagrams.net

1. 설치

설치 방법은 vsCode에서 extension 메뉴, 

이후 drawio검색, install 

 

처음 사용방법은, *.drawio라는 파일로 저장 후 해당 파일 편집 시작하면 아래와 같은 인터페이스가 나타난다. 

 

ERD 예

 

마인드맵 기능도 있고, GMDL은 Google Material Design 양식, Apple 도 있고, SQL 문을 넣어서 ERD 작업도 금방 할 수 있다. 

샘플 문구가 들어있으니, 창 열어서 시도해보면 이해가 쉬울 것 같다. 

SQL 을 이용해 ERD 생성 예.


여러가지 customizing 이 가능하고, 여러가지 그림들이 있다. 템플릿까지도 제공하고 있어서, 처음 그리기 귀찮을 때엔 템플릿 검색해서 넣고 수정하면 된다. 

 

아직 편집 중 drag 가 잘못먹히는 경우가 있지만, 이정도면 굉장히 무난한 편. 

 

내보내기는 SVG, PNG, JPG 등의 이미지 포맷도 가능하고, HTML 형식으로 내보내기도 지원된다. 

아직 pdf나 바로 출력을 넣는건 제대로 돌아간게 확인은 안되었다. 


그래도 html내보내기 이후 크기 조절이나, dropdown 구현정도도 들어가 있어 굳이 비싼 돈 주고 erd를 그릴 툴 살 필요는 없어졌다. 

 

크랙 지워놓고 뭘로 쓰나 싶어서 xd랑 pptx로 미리 만들어놓았었는데. 

 

어쨌든 이걸로 오늘 몇개의 flowchart 금방 끝내고 업무가 꽤 단축된 느낌. 

 

받지않았다면 빨리 서두르시길.