mermaid 플로우 차트를 이용한 시각화

플로우 차트는 시각적으로 표현하는 도구로써 사용할 수 있는데 MERMAID라는 오픈 소스 도구를 이용해 할 수 있습니다. 저는 주로 노션에서 이걸 많이 쓰는데 프로젝트 기획할 때 굉장히 유용합니다.

MERMAID란?

MERMAID는 MARKDOWN을 사용하여 다이어그램을 만들 수 있는 JavaScript 기반의 라이브러리입니다. 그래서 다이어그램을 만드는 용도로서 사용합니다. 글로 기록하는 것도 중요하지만 한눈에 보여지게 하면 아이디어 확장하는데 더 좋고 교정할 부분이 바로 볼 수 있다는 점에서 중요한 것 같습니다.

코드처럼 쓰면 output이 수도코드형식으로 나오게 됩니다.

저는 주로 노션을 통해서 하지만 다른 곳에서 쓰고 싶다면 Node.js를 설치해서 진행할 수 있습니다.
Node.js가 설치되어 있다면 터미널에서 mermaid를 설치해줍니다.

npm install -g mermaid

vscode에서는 확장 프로그램을 설치하면 됩니다.

 

다이어그램

mermaid로 그릴 수 있는 다이어그램은 다양한데 사실 이렇게 구체적으로 쓰진 않고 플로우 차트만 쓰게 되는 것 같습니다. 사실 초안이나 전체개관을 한눈에 보기 위해 만들기 때문에 고퀄리티로 나올 이유는 없어보입니다. mermaid로 다섯가지 버전을 그릴 수 있습니다.

• 플로우 차트
• 시퀀스 다이어그램
• 간트 차트
• 클래스 다이어그램
• User journey Diagrma

이중 플로우 차트를 예로 시각화를 해보도록 하겠습니다.

플로우 차트 만들기

mermaid는 굉장히 간단합니다. 직관적이어서 금방 따라할 수 있습니다. Graph의 진행방향만 정해주고 화살표와 정의를 이용해 꾸려나갑니다.
mermaid의 진행방향을 위아래로 할것인지 좌우로 할것인지 정해주어야 합니다. 참고로 디폴트는 위아래로 되어 있습니다. 반대방향도 가능합니다.
즉, 4가지 방향을 선언할 수 있습니다.

• TB : 위에서 아래로
• BT : 아래에서 위로
• RL : 오른쪽에서 왼쪽으로
• LR : 왼쪽에서 오른쪽으로

flowchart LR

이제 노드(node) 정의해서 화살표와 연결해야합니다.
노드를 정의하는 방법은 다음과 같습니다.

flowchart LR
    id[A]   # id = A

노드가 하나 생성되었습니다. 이제 id만 써도 자동으로 A가 나옵니다.이 노드의 모양을 바꿀수도 있는데 원기둥과 마름모 모양으로 할 수 있습니다.

flowchart LR
    data[(B)]

flowchart LR
    center{C}

개인적으로는 원형으로 된 모양을 많이 씁니다.(stadium-shaped)

flowchart LR
    cir([ABCD])

이밖에도 다양한 모양이 많습니다. 아래 튜토리얼에서 확인하시기 바랍니다.
https://mermaid.js.org/syntax/flowchart.html#node-shapes

Flowcharts Syntax | Mermaid

이제 간선(Edge) 즉, 화살표를 선언해서 명확한 그림이 되도록 합니다.

간단합니다. 그냥 직관적으로 화살표를 그리면 됩니다.

flowchart LR
id[A] 
id2[B]

id --> id2

화살표를 없애고 싶다면 선만 그리면 됩니다.
방향이 없는 간선이 가능합니다.
선은 3번 그려주어야 간선으로 인지합니다.

id[A]
id2[B]
id --- id2

점선으로 하고 싶으면 점으로 구분짓습니다.

id[A]
id2[B]
id -.-> id2

화살표를 여러개한다면 정의에다 화살표를 붙여주면 됩니다.

id[A]
id2[B]
id3[C]
id --> id2
id --> id3

이런식으로 해서 시각화를 해주면 됩니다. 어떤 문장이던 괄호 안에 알맞게 들어가면 만들어집니다.

화살표 중간에 글씨를 넣고 싶을 수 있는데 벽을 세워서 표시합니다.

 A -->|C|B

이 밖에도 기능이 많지만 이정도면 플로우 차트를 만드는데 큰 무리는 없을 겁니다. 좀 더 괜찮게 만들고 싶다면 공식가이드를 참고해주시기 바랍니다.

https://mermaid.js.org/syntax/flowchart.html#node-shapes

Flowcharts Syntax | Mermaid