IT 정보

draw.io ,무료 다이어그램 제작 도구

aiproductmanager 2025. 6. 6. 17:40
728x90
반응형
 

draw.io는 지금은 "diagrams.net" 이라는 이름으로 운영되는 무료 다이어그램 제작 도구입니다.
웹 기반이면서도 오프라인 사용, Git 연동, 클라우드 저장소 연동, 팀 협업 기능까지 탑재한 강력한 대안 설계 툴입니다.

 

https://www.drawio.com/

 


✅ draw.io (diagrams.net) 개요


항목 내용
공식 이름 diagrams.net (구 이름: draw.io)
운영 방식 웹 기반 + 데스크톱 앱 (오프라인 가능)
사용료 완전 무료 (광고 없음)
플랫폼 Windows / macOS / Linux / Web
오픈소스 여부 ✅ GitHub에 공개 (🔗 링크)
저장 방식 로컬, GitHub, Google Drive, OneDrive, Dropbox 등
 

✅ 사용처 & 특징

특징 설명
다양한 도형 UML, ERD, 네트워크, 조직도, BPMN, AWS/GCP/Azure 등 수천 개
실시간 협업 Google Drive, Microsoft 365 연동 시 실시간 공유/수정
커스터마이징 도형, 폰트, 색상, 라인 스타일, 템플릿 등 완전 자유
내보내기 PNG, JPG, SVG, PDF, XML 등
통합성 Atlassian(Jira, Confluence), GitHub, Notion 등에 통합 가능
 

✅ 접근 경로


✅ 사용 예시

📌 예: IMS 아키텍처 다이어그램 그리기

  • 네트워크 카테고리 → 방화벽, 서버, 클라이언트 도형 활용
  • 텍스트 도구로 각 컴포넌트 이름 추가
  • 그룹화 및 색상 지정으로 역할별 구분
  • 다 만든 후 PNG + 투명 배경으로 내보내기 가능

✅ Draw.io vs Lucidchart vs Miro

항목 draw.io Lucidchart Miro
가격 무료 제한적 무료 제한적 무료
협업 실시간 협업 가능 강력한 협업 도구 화이트보드 중심
오픈소스 ✅ 예 ❌ 아니오 ❌ 아니오
저장소 연동 Google Drive, GitHub 등 Google Drive 등 제한적
템플릿 매우 많음 많음 보통
커스터마이징 고급 설정 가능 강력함 화이트보드 중심
 

 


✅ 추천 사용 시나리오

  • 회사 조직도, IMS 네트워크 다이어그램, ERD, BPMN, 시스템 구성도 작성
  • Nextcloud, Confluence, Jira와 연동하여 팀 협업
  • GitHub 저장소 문서화용 .drawio + .png 버전 관리

ex,예제:

  • 📘 IMS 구조, 5G Core, 서버 아키텍처 예제 템플릿
  • 🎓 draw.io 사용법 PDF 요약, 단축키 목록
  • 🛠️ 직접 만든 .drawio 예제 공유

 

 **draw.io (diagrams.net)**를 100% 활용하기 위한 전체 세트입니다.

✅ 1. draw.io (diagrams.net) 설치 및 시작하기

🔹 웹 버전 바로가기

🔹 데스크탑 설치 (Windows/macOS/Linux)


✅ 2. 핵심 기능 요약

기능 설명
도형 추가 왼쪽 패널에서 드래그
텍스트 입력 더블 클릭 또는 T 키
도형 연결 도형 가장자리 → 자동 연결 라인
그룹화 Ctrl+G
정렬/정돈 도형 선택 → 상단 메뉴 [정렬]
색상 오른쪽 스타일 → 배경/선/폰트 등 설정 가능
 

✅ 3. 단축키 요약 (핵심 15개)

단축키 기능
Ctrl + Z 실행 취소
Ctrl + G 그룹화
Ctrl + Shift + U 정렬 → 수평 중앙 맞춤
Ctrl + Shift + L 정렬 → 수직 정렬
Ctrl + D 복제
Ctrl + Shift + B 뒤로 보내기
Ctrl + Shift + F 앞으로 가져오기
Ctrl + M 메모 추가
Ctrl + K 하이퍼링크 연결
Shift + 드래그 직선 유지
Alt + 드래그 격자 무시
Ctrl + A 전체 선택
Delete 삭제
Arrow Keys 도형 이동
Ctrl + Scroll 확대/축소
 

✅ 4. 실전 예제 템플릿 제공 목록

📌 A. IMS 네트워크 구조 템플릿

  • EPC (MME, SGW, PGW)
  • IMS (P-CSCF, S-CSCF, HSS, AS 등)
  • ATCF / VCC AS / SCC AS 연동 포함
  • VoLTE/VoNR 흐름 예시 포함

📌 B. 5G Core (5GC) 아키텍처

  • AMF, SMF, UPF, PCF, NRF, AUSF, UDM, AF 등
  • N1~N15 인터페이스 포함
  • SBA 구조 및 API 기반 흐름 다이어그램

📌 C. 서버 구성도

  • 3계층 구조: Web → App → DB
  • 로드 밸런서, 방화벽, DNS, Redis, MQ 포함
  • 클라우드 or 온프레미스 옵션 선택 가능

✅ 5. 내보내기 / 공유 방법

목적 방법
이미지로 저장 파일 > 내보내기 > PNG / JPG / SVG
PDF로 저장 파일 > 내보내기 > PDF
웹 공유 파일 > 저장 위치를 Google Drive or OneDrive
Git 연동 .drawio + .xml 파일 GitHub 저장소에 커밋
 

✅ 6. 협업 팁

  • 파일 > 저장 위치 > Google Drive 선택
    공유 권한 설정으로 실시간 공동 작업 가능
  • Confluence, Jira 연동 시 [Plugin 설치 필요]

✅ 7. 추가 지원 (선택 요청 가능)

항목 설명
IMS/5G 관련 템플릿 zip 파일 .drawio, .png, .pdf 포함
기술 설계 다이어그램 예시 모음집 Layer별 설계 가이드 포함
커스텀 아이콘 라이브러리 IMS, 5G, 클라우드, 보안 도형 세트
테크 블로그용 다이어그램 최적화 템플릿 사이즈, 배경, 폰트 조절 세팅
 

이 글이 도움이 되었다면,아래 링크를 통해서 후원해주세요.( 커피나 차 한잔 이나 맥주나 와인한잔 )

 

728x90
반응형