다이어그램을 텍스트로 작성하는 Mermaid 알아보기

스웨덴 S/W 아키텍트 Knut Sveidqvist(어떻게 발음해야할지 모르겠다 😅)가

Visio를 사용하다가 문제를 겪고선 Markdown 문서와 잘 어울리는 텍스트 기반 다이어그램 작성기를 2014년 11월에 만들었다.

 

Mermaid라는 이름은 당시에 그의 아이들이 보고 있던 디즈니 애니메이션에서 영감을 받았다고 한다.

실제 만든 제품과 전혀 연관성이 없는 이름이라니 ... ㅋㅋㅋ 🤣

 

 

Mermaid는 여러 사이트를 보유하고 있다.

 

① 공식 홈페이지

  - https://mermaid.js.org/

  - URL 주소에서도 보이지만, 기반은 Javascript이다.

  - 2019년도에는 JavaScript Open Source Award 수상도 했다(The Most Exciting Use of Technology).

 

 

  - 앞으로 오픈소스 공식 홈페이지는 아래로 오라고 한다.

    . https://mermaid.ai/open-source/

 

 

 

② Advanced Editor (Create with AI)

  - https://mermaid.ai/

  - 최근 트랜드에 맞춰 Mermaid도 AI 열차에 올라탔다.

 

 

  - Free 등급도 급한대로 쓸만하지만, 돈을 들여야 한다.

 

 

 

③ Live Editor

  - https://mermaid.live/

  - 웹에서 바로 결과를 확인해볼 수 있는 에디터도 있다.

  - 예전엔 여기가 메인이었지만, `② mermaid.ai` 사이트를 최근에 밀어주고 있다.

 

 

 

④ GitHub

  - https://github.com/mermaid-js/mermaid

  - 개인적으로 정보는 GitHub이 제일 많고 좋은 것 같다 !!!

 

 

 

사이트들은 충분히 살펴봤고,

이제는 실제 어떻게 작성하는지 알아보자.

 

 

⒜ Flowchart

  - GitHub README 파일에 너무나 잘 나와 있어서 해당 내용으로 대체 하겠다.

  - `flowchart LR`에 있는 `LR`은 left-right를 의미한다.

    . `LR` 말고 top-down으로 그리고 싶을 때에는 `TD`를 사용할 수 있다.

  - 연결선도 다양하게 표현할 수 있다.

    . --> : 화살표
    . --- : 실선
    . -.-> : 점선 화살표
    . ==> : 굵은 화살표

 

 

 

⒝ Sequence diagram

  - `loop` 같은 것이나 `Note`까지도 너무나 예쁘게 잘 지원해준다.

 

 

 

⒞ State diagram

  - Renderer가 한 번 업그레이드가 되어 `stateDiagram-v2`라고 명명해야 한다.

    . 그런데, 간단한 것만 사용해봐서 그런지 `stateDiagram`이라고 해도 차이를 잘 모르겠다.

 

 

그외에 Pie chart, Gant chart, Bar chart, Class Diagram 등은 물론

심지어 `User Journet diagram`도 있고, `Git graph`도 실험 버전으로 제공되고 있다.

 

GitHub Markdown에서 Mermaid 문법을 지원해주면서 Mermaid의 인기가 더 올라갔지만,

최근 AI에서 도식화를 시킬 때 Mermaid 문법으로 만들어 달라고 하면

너무나 예쁘게 잘 만들어주면서 더더욱 인기가 급상승하고 있다.

 

AI를 이용해서 문서화를 할 때에 Mermaid를 이용해 다양한 다이어그램과 차트를 그려주게 되면

구성원들 간에 오해를 줄일 수 있는 너무나 멋진 소통의 창구가 될 수 있다.

 

 

아! 참고로 GitHub에서 Mermaid를 표시하려면 아래와 같이 묶어 주면 된다.

 

```mermaid graph TD;     A-->B;     A-->C;     B-->D;     C-->D; ```

 

그런데, 조금 이상하지 않은가?

뒤에 `;`를 붙였는데, 본래는 붙이지 않는 것이 표준이지만 줄바꿈을 명확히 하기 위해 붙이기도 한다.

 

여기까지 간단히 살펴봤다.