PlantUML 을 이용하여 다이어그램을 쉽게 그리자 - 소개 및 설치

시퀀스 다이어그램

프로젝트 분석을 위한 교육자료를 만드는 업무를 받게 되었습니다.

교육자료를 만들기 위해 사내 문서들을 뒤적뒤적 하다 보니 시퀀스 다이어그램으로 표현되는 부분이 가시성이 가장 좋았습니다.

여기서 시퀀스 다이어그램은 UML 다이어그램의 한 종류 입니다.

 

UML 다이어그램 ( Unified Modeling Language ) 

• 통합 모델링 언어
• 시스템을 모델로 표현해주는 대표적인 모델링 언어

 

UML 다이어그램 종류 

• 구조 다이어그램
  • 클래스 다이어그램
  • 객체 다이어그램
  • 복합체 구조 다이어그램
  • 배치 다이어그램
  • 컴포넌트 다이어그램
  • 패키지 다이어그램
• 행위 다이어그램
  • 활동 다이어그램
  • 상태 머신 다이어그램
  • 유스케이스 다이어그램
  • 상호작용 다이어그램
  • 커뮤니케이션 다이어그램
  • 시퀀스 다이어그램

여러 종류의 다이어그램 중 해당 블로그에서는 유스케이스 다이어그램과 시퀀스 다이어그램 두가지에 대해서만 다룰 예정 입니다.

 

• 유스케이스 다이어그램 이란?
  • 시스템과 사용자의 상호작용을 표현
  • 사용자가 시스템 내부에 있는 기능 중에 어떤 기능을 사용할 수 있는지를 나타내는 것으로 사용자와 시스템 사이의 관계를 간락하게 표현 할 수 있는 장점이 있음
• 시퀀스 다이어그램 이란?
  • 특정 행동이 어떠한 순서로 어떤 객체와 어떻게 상호작용을 하는지 표현
  • 현재 존재하는 시스템이 어떠한 시나리오로 움직이고 있는지를 나타내는 장점이 있음

 

시퀀스 다이어그램을 작성 하기 위한 무료 툴 들을 찾아보니 GitMind, Gliffy 등이 있었지만, 계정을 연동 (회원가입) 해야 되는 불편함 과 이쁘긴 하지만 간단하고 빠르게 작성을 할 수 없다는 단점을 가진다는 생각이 들었습니다.

그러다가 사내에서 한분이 사용을 하고 계신 PlantUML 이 사용하기 좋을 것 같아서 직접 사용을 해 보았고, 높은 만족도를 받게 되어 다른 사람들도 유용하게 사용할 수 있도록 내용을 공유 하기로 정했습니다.

 

 

PlantUML

 

※ PlantUML 주소

• https://plantuml.com/ko/

※ 환경 참고

• 시스템 : 맥 OS
• 도구 : 인텔리제이

PlantUML 장점은 아래와 같습니다.

• 현재 사용하는 IDE 툴인 인텔리제이에서 플러그인만 깔면 된다. ( 웹 서비스, Jar 파일, 기타 프로그램 등도 존재 )
• 색상 지정, 폰트 변경 등 다양한 기능을 제공 한다.
• 오픈소스 프로젝트
• 다양한 다이어그램, WBS, 마인드맵 등을 쉽게 그릴 수 있다.

 

1. 설치 하기

1. 인텔리제이 실행
2. 설정 화면 열기 ( CMD + , )
3. 좌측 메뉴 Plugins 선택
4. Marketplace 검색란에 plantuml 입력 후 엔터
5. Install 버튼 클릭 & 재시작

설치 완료!! 하지만 이렇게 간단히 ? Perfect!!

 

2. 일단 사용 해보기 1 ( 시퀀스 다이어그램 작성 )

1. 빈 프로젝트 생성
2. sample1.puml 파일 생성
3. 아래 샘플 복사 & 붙여넣기
4. 생성 된 시퀀스 다이어그램 확인

sample1.puml

sample1.puml( 일상 생활 이라는 타이틀을 가지고 있으며, 와이프의 일해라 라는 명령을 시작으로 하루의 일과에 대한 시나리오 )

@startuml

autoactivate on

title 일상 생활

actor 와이프 as user

box "나"
participant 집 as home
participant 회사 as company
end box

user -> home : 일해라
home -> home : 출근 준비
home -> company : 출근
note right
    8시간 업무
end note
company --> home : 퇴근
home --> user : 밥줘

@enduml

 

3. 일단 사용 해보기 2 ( 유스케이스 다이어그램 작성 )

1. sample2.puml 파일 생성
2. 아래 샘플 복사 & 붙여넣기
3. 생성 된 유스케이스 다이어그램 확인

sample2.puml

sample2.puml ( PlantUML 홈페이즈 유스케이스 다이어그램 가장 처음 접할 수 있는 내용 )

@startuml

(First usecase)
(Another usecase) as (UC2)
usecase UC3
usecase (Last\nusecase) as UC4

@enduml

Cannot find Graphviz.

 

4. Graphviz 설치 하기

1. homebrew 를 통해서 설치( 설치가 안되어 있다면 구글링! )

brew install graphviz

터미널에서 설치 명령어 실행

2. 인텔리제이 PlantUML Graphviz dot executable 설정

which dot

터미널에서 설치 된 위치 확인

3. 위에서 얻은 정보를 가지고 인텔리제이 PlantUML 설정 변경 

- 인텔리제이 > 설정 화면 > Languages & Frameworks > PlantUML으로 이동하여 아래 이미지 빨간색 표시 된 부분 수정

인텔리제이 PlantUML 설정 변경

 

4. 설정 완료

sample3.puml

 

 

5. 카카오 로그인 과정 시퀀스 다이어그램 그리기

그럼 예제로 요즘 흔하게 연동 하는 카카오 로그인 과정의 시퀀스 다이어그램을 PlantUML로 진행해 보겠습니다.

참고 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

Kakao Developers

 

카카오에서 제공하는 시퀀스 다이어그램은  아래와 같습니다. 

출처 : 카카오 개발자 사이트

 

PlantUML 로 작성하게 되면 아래와 같습니다. 

@startuml

hide footbox
autoactivate on

participant "Service Client" as sc
participant "Service Server" as ss
participant "Kakao Auth Server" as kas

sc -> ss : 카카오 로그인 요청

group Step 1: 인가 코드 받기
    autonumber 1 "(0)"
    ss -> kas : GET /oauth/authorize
    kas --> sc : 카카오계정 로그인 요청
    sc -> kas : 카카오계정 로그인
    kas -> kas : 사용자 인증\n앱 설정 확인
    kas --> sc : 동의 화면 출력
    sc -> kas : 동의하고 계속하기
    kas --> ss : 302 Redirect URI로 인가 코드 전달
end

group Step 2: 토큰 받기
    autonumber 1 "(0)"
    ss -> kas : POST /oauth/token
    kas --> ss : 토큰 발급
end

group Step 3: 사용자 로그인 처리
    opt OpenID Connect 사용 시
        ss -> ss : ID 토큰 유효성 검증
    end opt
    ss -> ss : 발급받은 토큰으로 사용자 정보 조회\n서비스 회원 정보 확인 또는 가입 처리
    ss --> sc : 로그인 완료
end

@enduml

이와 같이 간단한 타이핑을 통해 시퀀스 다이어그램을 생성할 수 있습니다.

 

 

마무리

업무를 진행 하다 보면 시퀀스 다이어그램 같은 문서 작성 할일은 종종 생길 것이고, 분석한 내용을 머리속으로 기억 하기 보다 문서화 하면 내용이 오래도록 남을 것 입니다.

이러한 문서를 조금 더 쉽고 빠르게 만들 수 있는 방법이 있다면 한번 Try 해보는 것도 좋을 것 같습니다.

 

다음시간에는 작성법에 대한 상세한 설명과 가시성이 더욱 돋 보일 수 있도록 색상 입히기, 폰트 변경 등 다양한 요소들을 살펴 보겠습니다.