diagrams.net

2021년 06월 08일 golgol [Dev]Tip 0

Remark : 소프트웨어 설계, 시스템 구조, 데이터 흐름, UI 구성 등 복잡한 정보를 시각적으로 표현하기 위해 사용하는 다이어그램 도구 또는 표현 방법을 의미할 수 있습니다.

다이어그램 그리기

Note : 특히 개발과 아키텍처 설계에서 많이 활용

오픈 소스

  • https://www.diagrams.net/

아래에서 대표적인 다이어그램 종류와 특징을 정리해 드릴게요.

1. UML 다이어그램 (Unified Modeling Language)

소프트웨어 개발에서 가장 많이 사용하는 표준화된 다이어그램 언어입니다.

주요 종류

다이어그램설명활용 예시
클래스 다이어그램클래스, 속성, 메서드, 관계를 시각화C# / Java 모델 설계
시퀀스 다이어그램객체 간 메시지 흐름을 시간 순으로 표현API 호출 흐름, Travelport UAPI 예약 프로세스
활동 다이어그램프로세스의 단계와 흐름을 표현항공권 발권 프로세스
유스케이스 다이어그램사용자와 시스템 간 상호작용을 표현고객이 예약 → 결제 → 발권
컴포넌트 다이어그램시스템 구성요소 간의 관계를 표현API Gateway, DB, React Front-end 구조

예시
Travelport UAPI → ASP.NET Core API → SQL DB → React WebTerminal
같은 구조를 UML 컴포넌트 다이어그램으로 표현하면 전체 시스템 흐름을 쉽게 이해할 수 있습니다.

2. 아키텍처 다이어그램

시스템의 전체 구성 요소와 네트워크 구조를 시각적으로 표현합니다.

  • 예시:
    • 프론트엔드 → React / Tailwind WebTerminal
    • 백엔드 API → ASP.NET Core 6, Travelport UAPI
    • DB → SQL Server, Dapper ORM
    • PDF 서버 → wkhtmltopdf, XSLT 기반
    • 메일 서버 → SMTP API
    • 클라우드 → Azure DevOps, IIS, Kestrel

효과: 개발자, 디자이너, 운영팀, 기획자가 동일한 그림을 보며 협업할 수 있습니다.

3. ERD (Entity Relationship Diagram)

데이터베이스 모델링에서 사용하는 다이어그램입니다.

  • 사용 목적
    • 테이블 간 관계를 시각적으로 표현
    • PK, FK, 컬럼, 제약 조건을 설계 단계에서 명확히 함
  • 예시:
    • Booking 테이블
    • Traveler 테이블
    • Payment 테이블
    • 관계: Booking → Traveler (1:N), Booking → Payment (1:1)

Travelport XML 데이터를 DB에 저장할 때, ERD를 먼저 설계하면 데이터 정규화 및 성능 최적화에 유리합니다.

4. 시퀀스 다이어그램 (Sequence Diagram)

시간의 흐름에 따라 객체, 시스템, API 간 호출 과정을 표현하는 데 사용됩니다.

예를 들어 Travelport UAPI Split Ticketing Search 요청을 시퀀스 다이어그램으로 표현하면:

  1. 사용자가 React WebTerminal에서 항공권 검색
  2. ASP.NET Core API에서 UAPI 호출
  3. Travelport XML 응답 처리 후 DB 저장
  4. PDF Generator(XSLT)로 eTicket 생성
  5. 사용자 이메일로 발송

5. 플로우차트 / BPMN

비즈니스 프로세스를 시각적으로 표현할 때 사용합니다.

  • 플로우차트: 단순 프로세스 표현
  • BPMN (Business Process Model and Notation): 기업 프로세스 모델링 표준

예를 들어 환불 프로세스를 BPMN으로 표현하면:

  1. 고객이 환불 요청
  2. 시스템에서 GDS(Travelport) Refund API 호출
  3. 항공사 승인 여부 확인
  4. 환불 성공 → 메일 발송 / 실패 → 관리자 알림

6. 다이어그램 제작 도구

도구특징추천 사용 용도
draw.io / diagrams.net무료, 웹 기반, 간단한 다이어그램 제작빠른 시각화
Lucidchart협업 기능 강력, 실시간 편집 가능팀 단위 설계
PlantUML코드 기반 UML 작성시퀀스 다이어그램, 클래스 다이어그램
Mermaid.jsMarkdown 기반 다이어그램GitHub, Wiki 문서에 최적
Figma디자인 + 다이어그램 가능UI/UX 설계 및 협업
Visual Paradigm전문 UML/ERD 도구대규모 시스템 설계

정리

  • 단순 구조 → 플로우차트, diagrams.net
  • 데이터 모델링 → ERD
  • API 호출 흐름 → 시퀀스 다이어그램
  • 전체 시스템 → 아키텍처 다이어그램
  • 프로세스 최적화 → BPMN