텍스트로 UML 다이어그램을 그리는 방법. Mermaid란?

텍스트로 UML 다이어그램을 그리는 방법.  Mermaid란?

 

안녕하세요!

개발을 하다 보면 자연스럽게 문서화작업의 필요성을 느끼게 됩니다.

대부분 작업을 하다 보면 코드를 보고 이해할 수 있지만, 협업을 하고 프로젝트의 규모가 커지다 보면,

UML 다이어그램과 같은 시각적인 자료가 얼마나 유용한지 알게 됩니다.

또한 개발자뿐만 아니라 다른 직군의 동료들에게도 코드를 보여주는 것보다 다이어그램을 통해서 훨씬

손쉽게 설명하고 이해시킬 수 있습니다.

오늘은 텍스트를 이용하여 UML다이어그램을 그릴 수 있는 Mermaid에 관해서 알아보겠습니다.

 

1. UML 다이어그램이란?
2. Mermaid란?
3. 설치방법?
4. 사용방법?
5. 마치며.

 

1. UML 다이어그램이란?

UML 다이어그램이란 Unified Modeling Language로 통합 모델링 언어라고 해석할 수 있습니다.

통합이라는 말과 같이 UML은 하나가 아닌 여러 개발에서 사용되는 여러 다이어그램들의 모음입니다.

이는 OOP (Object-Oriented Programming)를 이용할 때 많이 사용되지만 꼭 OOP를 지원하는 언어를 사용하여

개발할 때만 UML을 이용할 수 있는 것은 아닙니다.

 

UML에는 크게 Structure Diagram과 Behavior Diagram 나뉘게 됩니다.

Structure Diagram은 말 그대로 구조적인 관계를 나타낼 때 사용하는 다이어그램입니다.

대표적인 예가 클래스 다이어그램으로 클래스가 포함하는 변수, 함수, 클래스 간의 관계, 인터페이스와의 관계 등등을 나타낼 수 있습니다.

Behavior Diagram은 말 그대로 행위를 나타낼 때 사용하는 다이어그램으로 대표적으로 순차 다이어그램을 말할 수 있을 것 같습니다.

순차 다이어그램은 말 그대로 순차적으로 행위가 어떻게 이루어지는지 나타내는 다이어그램입니다.

예를 들면 고객이 로그인할 때 어떤 행위들이 순차적으로 이루어지는 지에 관해서 나타낼 수 있을 것입니다.

 

예전에 제가 짧게 UML에 관해서 적어놓은 글이 있습니다.

혹시나 조금이라도 더 자세히 알고 싶으시다면 아래의 링크를 이용하실 수 있습니다.

https://ko-de-dev-green.tistory.com/26

 

2. Mermaid란?

오늘은 Mermaid에 관해서 알아보기로 했으니 UML은 잠시 옆에 두고 Mermaid에 관해서 이야기하겠습니다.

Mermaid란 쉽게 말해서 텍스트 혹은 코드를 이용하여 앞서 언급한 다이어그램들을 정의하고 그릴 수 있게 도와주는 도구라고 할 수 있습니다.

 

Mermaid는 자바스크립트를 기반으로 한 다이어그램을 그려주는 도구로 특정 텍스트 혹은 코드를 이용하여 쉽게 시각화된 다이어그램을 그려줍니다. Mermaid의 큰 장점이라고 한다면 Github이나 Gitlab에서도 시각화되어 표현된다는 것입니다.

이는 앞서 언급하였듯이, 전체적인 개요 혹은 프로세스를 쉽게 확인할 수 있고 개발자가 아니더라도 빠르게 이해할 수 있도록 도와줍니다.

 

그럼 설치 방법에 관해서 알아보겠습니다.

 

 

3. 설치방법?

설치방법은 아주 간단합니다. 이를 위해서는 기본으로 Node.js v16 이상을 요구합니다.

그 뒤 자신이 사용하는 Package Manager를 이용하시면 됩니다.

예를 들면 npm install mermaid, yarn add mermaid 혹은 pnpm add mermaid.

하지만 여러 Extention을 이용하여 별다른 설치 없이 Meraid를 이용하실 수도 있습니다.

 

저는 VSCode를 가장 빈번히 이용하는데 Extention을 확인해 보시면,

Markdown Preview Mermaid Support라는 Extention을 찾으실 수 있을 것입니다.

설치해 줍니다. 그 뒤 하나의. md파일을 생성해 줍니다. 예를 들면 README.md와 같은 파일을 생성합니다.

이제 VScode에서 파일을 선택하여 탭을 오픈하시면 자동으로 Preview탭 또한 같이 오픈될 것입니다.

아래의 사진과 같이 말입니다.

혹시 설치하시기 전 먼저 브라우저를 통해서 테스트해보고 싶으시다면

Mermaid에서 지원하는 에디터가 존재합니다.

아래의 링크를 이용하시면 됩니다.

https://mermaid.live/

 

왼쪽은. md파일의 탭이 그리고 오른쪽은 Preview탭이 열려있는 게 보입니다.

자 그럼 이번에는 간단하게 순차 다이어그램을 작성해 보겠습니다.

 

 

4. 사용방법?

사용방법은 너무 간단합니다.

아래의 예시를 먼저 복사해. md파일에 붙여 넣기 해보세요. 그리고 아래와 같이 시각화되어 보인다면 성공입니다.

```mermaid
sequenceDiagram
    Frontend->>Backend: send vlaues 
    Backend->>DB: search data from db
    DB-->>Backend: return results 
    Backend-->>Frontend: sent results
```

 처음 mermaid를 이용할 것을 선언해 줍니다.

그다음 sequenceDiagram 즉 순차 다이어그램을 사용할 것을 알려줍니다.

그 뒤 Frontend, Backend 그리고 DB를 정의한 뒤 그 사이에 어떻게 순차적으로 작동하는지 나타냅니다.

문제없이 작동한다면 아래의 사진과 같이 순차 다이어그램이 보일 것입니다.

각자의 다이어그램마다 문법이 조금씩은 비슷하지만 다른 문법들이 많이 있습니다.

그렇기에 Mermaid를 이용하여 다이어그램을 그리신다면 공식 홈페이지에서 문법을 참조하시는 게 좋습니다.

 

https://mermaid.js.org/syntax/flowchart.html

 

 

5. 마치며.

오늘은 Mermaid에 관해서 알아보았습니다.

Mermaid가 불편하시다면 꼭 이를 이용할 필요는 없습니다.

직접 그릴 수 있는 프로그램이나 서비스들이 많이 존재하기 때문입니다.

하지만 Mermaid의 장점으로 앞서 언급하였듯이 Github이나 Gitlab에서도 다이어그램을 바로 볼 수 있다는 것입니다.

그리고 수정이 필요한 경우 따로 제3의 서비스를 이용하여 다이어그램을 수정 후 파일이나 사진으로 저장한 뒤 프로젝트에 저장하는 수고를 덜 수 있습니다. 왜냐하면 그냥 프로젝트에서. md파일을 쉽게 수정할 수 있기 때문입니다.

 

사용하지 않으면 불편한지 모르지만, 알고 나면 얼마나 편한지 알게 되는 것 같습니다.

아직도 우리가 모르는 모듈들이 넘치고 있습니다.

저도 여러분에게 유용하거나 좋은 모듈, 패키지, 도구들 등등을 찾아내면 알려드리고 공유할 수 있도록 해보겠습니다.

오늘 하루도 고생하셨고, 내일도 힘내시기 바랍니다!

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.