Text로 간단히 UML 그리기

UML을 쉽게 그리는 관리하는 방법

PlantUML은 여러 가지 다이어그램을 text형식으로 빠르게 작성 하기 위한 오픈소스입니다. 텍스트로 작성된 문서를 그래픽으로 변경하여 보여주기 때문에 초기 만들기도 쉽고 만들었던 UML을 다시 변경하기도 쉬운 장점이 잇습니다.

 

PlantUML에서 지원하는 다이어그램은 아래와 같습니다.

 

- 시퀀스 다이어그램

- 유즈케이스 다이어그램

- 클래스 다이어그램

- 객체 다이어그램

- 액티비티 다이어그램

- 배치 다이어그램

- 상태 다이어그램

- 타이밍 다이어그램

- Newtork 다이어그램

- MindMap 다이어그램

- Gantt Diagram

 

굉장히 많은 수의 다이어그램을 지원하는 것을 알 수 있습니다.

 

쉽고 다양한 다이어그램을 지원하는 것을 알았으니 어떤 방식으로 UML을 그래프를 그려주는 지 전체적인 작성 순서를 훑어 보겠습니다.

 

 

1. PlantUML을 위한 환경 설정

 

: PlantUML을 사용하여 다이어그램을 그리기 위해서는 PlantUML 문법을 지원하는 웹사이트나 프로그램을 사용하여 작성이 필요합니다.

우선 처음 접하시는 분들은 웹사이트를 이용하여 필요할 때 마다 사용하시는게 편리할 것 같습니다

제가 주로 사용하는 웹사이트는 아래와 같습니다. PlantUML editor가 UI도 편리하고 구문 강조도 되어서 편리한 것 같습니다.

 

저는 프로그램으로는 VSCODE의 extension을 사용합니다. 코드를 구현하면서 같이 UML을 그리는 경우가 많아 따로 앱을 설치하는 것 보다는 VSCODE에서 같이 작성하는 편이 좋은 것 같습니다. 
다만 이 경우 Graphviz와 같은 랜더링을 위해 필요한 프로그램을 추가 설치 해야합니다.

 

웹사이트

-. (추천) PlantUML editor : plantuml-editor.kkeisuke.com/

-. PlantUML 온라인 서버 : www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000

 

프로그램

-. VSCODE extension : PlantUML

 

 

2. 코드 작성

 

 : 웹페이지 (plantuml-editor.kkeisuke.com)를 기반으로 설명하도록 하겠습니다.

사이트 이름이 plantuml editor이니 아래 부터는 plantuml editor로 명칭하겠습니다.

 

2.1. 자신이 원하는 template 선택

plantuml editor는 자주 사용하는 plantuml template를 제공하고 있습니다. 자신이 원하는 다이어그램의 template을 선택해서 내용을 추가할 수 있습니다.

 

Use Case, Activity, Sequence, Object, Class, ER diagram등이 있습니다. 예를 들어 use case다이어그램을 선택하면 기본 코드가 아래와 같이 code 영역에 표시됩니다.

@startuml

actor A
actor B

A -up-> (up)
A -right-> (center)
A -down-> (down)
A -left-> (left)

B -up-> (up)
B -left-> (center)
B -right-> (right)
B -down-> (down)

@enduml

 

2.2. 코드 수정

- template

원하는 다이어그램을 작성하기 위한 template를 선택하였다면 수정을 위해 필요한 plantuml코드가 무엇인지 확인해야 합니다. Plantuml 사이트(plantuml.com/ko/)에서도 각 다이어 그램을 그리기 위해 필요한 코드를 설명해 주고 있습니다.

 

plantuml 사이트에서 코드를 확인할 수도 있지만 plantuml editor의 cheat sheet를 확인하면 각 다이어그램을 위해 필요한 코드를 정리해 두었습니다. 2개의 페이지를 왔다갔다 할 필요없이 코드를 작성할 수 있습니다. 작은 부분일 것 같지만 막상 다이어그램을 그리면 큰 도움이 되는 기능이었습니다.

 

- 코드자동완성

코드를 작성하다 보면 오타가 나거나 문법이 기억이 안나는 경우가 있습니다. 그래서 프로그램 개발을 위한 editor에서는 코드를 일부분만 써도 자동으로 완성해 주는데요. plantuml editor에서도 이 기능을 지원합니다! #_#

Preview를 보여주는 창 위에 있는 것처럼 ctrl + E 나 command + E를 누르면 코드를 완성시켜 줍니다.

 

2.3. Plantuml 다이어그램 저장

코드를 완성하고 나면 preview 창의 +버튼을 눌러서 이미지를 저장하여 원하는 위치에 저장하여 사용하면 됩니다.

수정이 필요할 수 있으니 파일형태로 저장해 두시구요. vscode로 작성 시 파일 확장사는 .puml로 저장됩니다. 

vscode로 사용할 계획이 있으시다면 .puml형식으로 파일을 저장해 두시면 좋을 것 같습니다. 

 

다시 수정이 필요하다면 해당 파일을 다시 붙여넣고 작업을 하시면 됩니다. 바로 로딩을 할 수 있다면 편할텐데 메뉴 상으로 지원하고 있는 것 같진 않습니다. 

 

혹시 방법이 있다면 댓글로 알려주세요 ㅎㅎ

 

 

 

 

 

※ plantuml : plantuml.com/ko/

간단한 텍스트를 이용하여 멋진 UML 다이어그램을 만들 수 있는 오픈소스 도구입니다.

※ plantuml editor : plantuml-editor.kkeisuke.com

PlantUML Editor