[markdown] mermaid를 이용해서 UML 그리기 - 플로우차트

안녕하세요. 오늘은 mermaid에 대해서 알아보는 시간을 가져보도록 하겠습니다.

mermaid란 markdown 문법으로 diagram을 그려주는 라이브러리입니다.

mermaid 란 ?

mermaid는 markdown으로 UML을 그릴 수 있는 언어입니다.

이 mermaid를 이용하면 쉽고 직관적으로 UML을 그릴 수 있습니다.

수도 코드를 통해서 작성하기 때문에 다이어그램 뿐만 아니라 수도 코드를 통해서도 흐름을 이해할 수 있다는 것도 장점이라고 여겨집니다.

그렇다면 실제로 mermaid를 사용하는 방법에 대해서 알아보도록 하겠습니다.

plugin

mermaid를 사용하기 위해서는 markdown에 plugin이 필요합니다.

editor 별 plugin 리스트를 참조해서 본인이 사용하시는 editor에 플러그인을 먼저 설치해주시면 바로 확인이 가능하십니다.

저 같은 경우에는 visual studio code를 이용해서 plugin을 받아 mermaid를 사용하고 있습니다.

다이어그램

mermaid로 그릴 수 있는 다이어그램의 안정된 버전은 아래와 같습니다.

• 플로우 차트 (Flowchart)
• 시퀀스 다이어그램 (Sequence Diagram)
• 간트 차트 (Gantt Chart)
• 클래스 다이어그램 (Class Diagram)
• User Journey Diagram

그리고 아래는 공식 문서 상으로 그릴 수는 있지만 아직 실험중이라고 합니다.

• Git graph
• Entity Relationship Diagram

이번 시간에는 플로우 차트를 한번 그려보도록하겠습니다. 이어지는 시간에 시퀀스 다이어그램, 간트 차트, 그리고 클래스 다이어그램을 그려보도록 하겠습니다.

플로우 차트(Flowcharts)

모든 플로우 차트는 각 상태를 나타내는 Node와 Node를 방향이 있는 선 또는 방향이 없는 선으로 이어주는 간선(Edge)으로 구성됩니다. 우리는 mermaid를 이용하면 플로우 차트를 마우스 없이 만들어 낼 수 있습니다.

mermaid를 이용하면 다양한 화살표, 간선 타입 그리고 서브 그래프까지 그려낼 수 있습니다. 아래 그래프는 제가 mermaid를 이용해서 플로우 차트를 작성해본 것입니다.

flowchart LR
    A[구매] --> B;
    B[유저, 파라미터, \n 어뷰징 검증] --> C;
    C{client가 안드로이드} -->|Yes| E;
    C -->|No| G;
    E[안드로이드 Proxy 처리] --> G;
    G[DB 저장] --> I;
    I[응답 반환];

어떻게 이렇게 그리는지 구성에 대해서 하나씩 알아보도록 하겠습니다.

플로우차트 선언

먼저 mermaid 문법은 그리고자 하는 다이어그램을 선언합니다. 그리고 플로우차트 일 경우 그려질 방향을 선언합니다. 예제 코드는 아래와 같습니다. 아래 코드는 플로우차트를 그리고 그 방향은 왼쪽에서 오른쪽으로 향한다는 선언입니다.

flowchart LR

선언할 수 있는 방향은 아래와 같습니다.

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

노드(Node) 선언

노드를 선언해보도록 하겠습니다. 플로우차트의 노드를 선언하게 되면 그래프로 해당 노드가 기본적으로 그려지게됩니다. 아래 코드는 플로우차트 선언 아래 노드를 하나 선언한 것입니다. id는 해당 노드를 가리키는 값이며 [] 사이에 있는 값은 해당 노드에 표시될 값입니다. 해당 값이 없으면 id가 노출됩니다.

flowchart LR
    id[구매]

위의 코드를 작성하게되면 아래와 같은 노드하나가 그려지게됩니다.

이 노드는 직사각형의 모습을 하고 있지만 어떻게 선언하냐에 따라서 다양한 형태의 노드를 선언할 수 있습니다. 그 중에서 몇개를 보여드리자면 데이터베이스를 표현할때 많이 사용하는 실린더의 형태와 조건 분기에 많이 사용하는 마름모의 형태입니다.

flowchart LR
    id[(Database)]

flowchart LR
    id{조건}

더 다양한 모양을 확인해보고 싶으신 분들은 링크를 확인해주세요 !

간선(Edge) 선언

노드와 노드를 이어주는 간선을 선언해보도록 하겠습니다. 간선은 기본적으로 -->를 통해서 선언할 수 있습니다. 이렇게 선언하면 그래프로써 화살표가 있는 간선이 그려지게 됩니다. 아래 코드는 Service라는 이름을가진 A 노드에서 Database라는 이름을 가지고 있는 B 노드로의 화살표 간선이 생기는 플로우차트입니다. 그리고 B와 C 사이에는 방향이 없는 간선을 하나 두었습니다.

flowchart LR
    A[Service]
    B[(Database_1)]
    C[(Database_2)]
    A --> B --- C

이런 간선 또한 여러 옵션들을 통해서 변환될 수 있습니다. 그중 몇가지만 알아보도록 하겠습니다. 먼저 아래 코드는 C와 id2사이에 간선을 점선 화살표의 형태로 가져가겠다라는 의미입니다.

flowchart LR
    C -.-> id2{box}

그리고 간선에 텍스트를 추가하는 것도 가능합니다. 간선에 텍스트는 아래의 문법으로 추가할 수 있습니다.

flowchart LR
    A-->|의존|B

그리고 한 노드에서 여러개의 노드와 연결하는 것도 가능합니다. 아래는 A 노드를 B와 C에 연결하는 방법입니다. A,B,C를 각각 선언 한 후 아래에 A가 B를 바라본다는 것을 1개, 그리고 A가 C를 바라본다는 것을 1개 하여 추가할 수 있습니다.

flowchart LR
    A[Service]
    B[(Database_1)]
    C[(Database_2)]
    A-->B
    A-->C

이외에도 좀 더 다양한 노드간의 연결방법을 알아보고 싶으신 분들은 링크를 참고해주시기 바랍니다. 또한 이 외에도 중요하게 한번 보면 좋을 부분은 subGraph로 보여집니다. subGraph란 플로우차트안에 또 다른 플로우차트를 두는 것을 말합니다. 이 또한 공식문서에 자세하게 나와있습니다. 이용할 계획이 있으신 분들은 링크를 이용하시면 됩니다.

마무리

원래 오늘 시퀀스 다이어그램 정리까지 함께 하려고 하였으나 분량이 너무 길어질 것 같습니다.

다음시간에 mermaid를 통해서 시퀀스 다이어그램을 그리는 법을 알아보도록 하겠습니다.

감사합니다.

참조

https://mermaid-js.github.io/mermaid/#/