mermaid를 이용한 쉽고 빠른 다이어그램 만들기

어느날 개발 전, 시퀸스 다이어그램의 필요성에 대해 알고 첫 시퀸스 다이어그램 그리기(https://mincanit.tistory.com/16)에 도전했다.

학교 수업 과제로 그리고, 그 이후에는 그려본 적이 없는데 프로젝트에 적극 활용하기로 한 만큼 바로 그리려했지만,,,

 

기존의 툴들은 잘 나와있다고 하지만 나는 그조차도 귀찮았다.

툴은 말 그대로 단지 수단이기 때문에, 나는 쉽고 빠르게 사용할 수 있는 다이어그램 툴을 원했고 mermaid에 대해 알게 되었다!!

Mermaid

https://mermaid.js.org/는 마크다운을 통해 빠르게 다이어그램을 작성할 수 있다.

지원하는 다이어그램도 많고 Visual Studio에서는 Extension 설치를 지원하기 때문에 매우 간단하게 사용이 가능했다.

Mermaid 페이지(왼쪽), Visual Studio에서 사용하기(오른쪽)

인텔리제이에서 사용하기

또한 Jetbrains의 IDE에서도 지원을 하기 때문에 인텔리제이에서도 쉽게 사용할 수 있다.

Setting -> Languages & Frameworks -> Markdown -> Mermaid 체크 표시를 하면 사용이 바로 가능하다.

Setting -> Languages & Frameworks -> Markdown -> Mermaid

직접 사용하기

문법 또한 매우 간단하고 공식 홈페이지(https://mermaid.js.org/)에 매우 잘나와있기 때문에 따로 구글링보다는 공식 페이지 활용을 추천한다!

공식 페이지 - 시퀸스 다이어그램