PlantUML을 이용해서 온라인으로 수정이 편리한 다이어그램 그리기

간혹 업무를 하다보면 이미지로 도식화 하여 문서를 작성하거나 발표를 해야하는 경우가 생긴다. 이 때마다 PowerPoint등 툴을 이용하여 객체 관계나 ERD, FlowChart 등을 표현하곤 했었는데, 깔금하게 만들 수 있는 장점이 있긴 하지만 문서나 구조가 수정된 경우 파일을 다시 다운로드 받아서 수정하거나, 이미지를 다시 그리는 등 번거로운 일이 많았다. 그나마 원본을 잃어버리면 새로 그려야하는 단점까지 있다. 이럴 때 PlantUML을 활용하면 간단하게 수정 가능한 다양한 형태의 다이어그램을 표현할 수 있다.

Flow chart

플로우 차트는 기능 개발 할 때 각종 조건에 따른 단계별 액션을 표현할때 주로 사용한다. PlantUML에서는 아주 간단하게 플로우차트를 생성할 수 있다.

(*) 는 플로우의 시작과 끝을 표현한다.
–> 화살표를 통해 단계별 과정을 설정할 수 있고
if else endif문을 통해 분기를 직접 표현할 수 있다.

로그인 후 홈페이지에 접근하는 예시를 표현한 코드를 직접 확인해보자.

@startuml
!theme aws-orange
(*) --> "홈페이지접근"
--> "로그인"

if "유저 존재 확인" then
  -->[기존유저] "로그인 처리"
else
  ->[신규유저] "유저 생성"
  --> "로그인 처리"
endif

--> "홈페이지 이동"
--> (*)
@enduml

위와 같이 간단한 코드로 아래와 같은 다이어그램 표현이 가능하다.

만약 로그인 플로우에서 비밀번호를 틀려서 비밀번호 찾기를 해야하는 과정이 추가로 생겼다고 하면 어떨까?
PlantUML을 사용하면 기존 코드 사이에 신규 플로우만 추가해주면 새로 적용된 다이어그램 이미지를 바로 확인할 수 있게 된다. 여기에서 직접 수정해보자.

ERD (entity relationship diagram)

서비스를 설계할 때 보통 DB 구조부터 설계하고 개발을 시작하는 편인데, ERD의 경우 여러가지 DB툴에서 제공하긴 하지만 간략한 초기 모델을 표현할 때는 PlantUML을 사용하면 편리하게 표현할 수 있다.

어느정도 규모가 있는 시스템 설계시엔 DB툴에서 생성한 ERD는 바로 테이블화 시키기도 용이하므로 이럴땐 DB툴을 통해 ERD를 구성하는게 나을 수도 있다.

entity로 객체 형식으로 entity를 정의할 수 있다. 각 항목의 텍스트는 원하는 대로 수정이 가능하다. entity를 정의한 후, 각 entity간의 관계를 표현해야하는데 각 표현은 다음과 같은 표기로 나타낼 수 있다.

관계 표현식
Zero or One |o--
Exactly One ||--
Zero or Many }o--
One or Many }|--

그라파나나 태블루 같은 서비스를 구성해보려고 간단히 구성했던 DB구조를 예시로 들어보겠다.

@startuml
!theme sandstone

entity "유저" as user {
  *Id : 식별자 <<PK>>
  --
  Name : 이름
}

entity "대시보드" as dash {
  *Id : 식별자 <<PK>>
  --
  *OwnerId : 유저 식별자<<FK>>
  Name : 대시보드 이름
  Desc : 대시보드 설명
  IsPublic : 공개 여부
}

entity "차트" as chart {
  *Id : 식별자 <<PK>>
  --
  *DatasourceId: 데이터소스 식별자 <<FK>>
  ChartType : 차트 타입
  Options : 옵션
  Desc : 차트 메모
}
entity "데이터소스" as datasource {
  *Id : 식별자 <<PK>>
  --
  ProjectId : 프로젝트 종속
  ApiUrl : API 경로
}

entity "차트포지션" as chart_pos {
  *Id : 식별자 <<PK>>
  --
  *ChartId : 차트 식별자 <<FK>>
  *DashboardId: 대시보드 식별자 <<FK>>
  Pos: 차트 위치정보
  Size: 차트 크기정보
}

entity "사용로그" as log {
  *seq : 시퀀스 <<PK (AI)>>
  --
  *UserId: 유저 식별자<<FK>>
  DoSometing: 행동기록...
}

user ..o{ dash
datasource ||..o{ chart
chart ..o{ chart_pos
chart_pos }o..|{ dash
@enduml

위 코드의 결과는 다음과 같다.

여기에서 직접 코드를 수정해볼 수 있다.

PlantUML은 위 두개를 제외하고도 상당히 많은 다이어그램을 표현할 수 있는데, 이외의 다이어그램은 홈페이지에 자세히 나와있으니 참조하면 된다.

중요 서비스나 민감한 정보가 온라인으로 표현되는게 부담된다면 별도로 설치해서 사용해도 된다. (참조)
Visual Studio에서 직접 사용가능한 PlanyUML 라이브러리도 있다.