Markdown문법으로 Flowchart나 Erd와 같은 그래프를 그릴 수 있다는 사실!
요즘 Gitlab을 사용하면서 Gitlab Docs에 자주 들락거리는데, 마크다운으로 차트를 그릴 수 있는 Mermaid 라이브러리를 알게되었다.

이때까지 그래프는 DB diagram에서 작성한 것을 캡쳐해서 넣거나 피그마로 그려서 이용해야한다 생각했는데 이런 게 있었다니.. 까먹기 전에 호딱 정리해 보려 한다.

• 자세한 설명은 Gitlab Docs 참고

마크다운으로 그래프 그리기

• Gitlab에는 Mermaid, PlantUML, Kroki를 이용해 다양한 다이어그램을 그릴 수 있다고 소개 되어 있다.
  지금 작성하면서 보니 Kroki가 더 예쁜 거 같기도..?

Mermaid란?

• Mermaid는 마크다운에서 영감을 받아 코드로 다이어그램을 생성 및 수정할 수 있게 만든 JavaScript기반의 툴이다.

✔️Mermaid를 선택한 이유

자바스크립트 기반으로 만들어졌다는 점. 딱히 자바스크립트 문법이 들어간 것은 아니다. 그래도 Gitlab Docs에서 소개하는 그래프 툴들 중에 가장 친숙했다.

🧩장점

• 러닝커브가 적다.
  한 10분~20분 정도만 투자하면 호딱 만들기 가능!
• 적은 용량으로 문서화용 그래프를 정리할 수 있다.
• 코드로 바로 표현할 수 있다는 점이 너무 매력적!
• 문서 내에서 바로 수정 할 수 있다는 점

🧩단점

• 간단한 그래프는 금방 만들 수 있지만 예쁘게 만들고 싶은 욕심을 가지면 조금 시간이 걸린다는 점이다.
  또 어떤 단점이 있는지는 사용하면서 추후 추가할 예정

Mermaid로 그래프 그리는 방법

• Mermaid.js로 그래프 그리는 방법은 2가지가 있다.

1. 코드로 바로 작성하는 법
   Visual Studio Code Extention인 Markdown Preview Mermaid Support를 설치하면 바로 Preview를 통해 Markdown으로 그래프를 확인하며 바로 작성할 수 있다.
   
   Preview 예시
   

2. Mermaid에서 제공하는 Live editor 를 이용하는 방법
   바로 코드로 작성 어렵다면 Live Editor를 통해 작성해 보자.
   

• Live Editor 튜토리얼은 Youtube 강의를 참고하기.

✔️WEB에서 Mermaid 사용하는 법

• node -v 16이상부터 사용 가능하다.
• 아래 명령어로 간단하게 dependency로 설치 가능하다.

# NPM
npm install mermaid

# Yarn
yarn add mermaid

# PNPM
pnpm add mermaid

• 작성법은 여기 참고!

Mermaid 기본 문법 정리

• 다이어그램 유형별 작성 방법
  해당 글에서는 FlowChart 작성을 위한 간단한 문법만 다룰 예정이다. 아래 추가적인 다이어그램이 궁금하다면 위 링크를 통해 학습할 수 있다.

✔️다이어그램 종류

• Flowchart
• Sequence Diagram
• Gantt Diagram
• Class Diagram
• Git Graph
• Entity Relationship Diagram (ER Diagram)
• User Journet Diagram
• Quadrant Chart

✔️플로우차트(Flowchart)

• 선언은 flowchart 대신에 graph로도 사용할 수 있다.
• 아래에 id는 한 노드(=박스)를 뜻한다. 보통 A, B, C로 많이 사용한다.

작성 방법

// mermaid.js

// 선언 1
flowchart LR
	id
    
// 선언 2
graph LR
	id

• 노드 안에 내용을 넣으려면 대괄호[] 또는 소괄호() 를 활용해준다. 문자열을 넣을 경우 ""를 사용한다.
• 대괄호를 사용하면 직사각형, 소괄호를 사용하면 둥그런 사각형이 만들어진다.
• 더 다양한 노드 모양을 확인하려면 아래 노드 모양 잡기에서 확인할 수 있다.

// mermaid.js

// 대괄호
flowchart LR
	id["Hello"]

// 소괄호
flowchart LR
	id("Hello")

Preview

✔️박스안에서 마크다운 사용하기

• 박스 안에서 마크다운을 사용하려면 따옴표 안에 백틱을 사용해 주면 된다.
• "``" 요런 형태!
• 아래 %%{init: {"flowchart": {"htmlLabels": false}} }%% 코드는 차트 형태를 변하게 해 주는 코드이므로 지금 단계에서는 신경 안 써도 된다. 그래도 궁금하면 여기 들어가서 한 번 읽고 오기
  아마도 노드에 패딩값(?) 없애주는 느낌?

// mermaid.js

%%{init: {"flowchart": {"htmlLabels": false}} }%%

flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

Preview

1. 노드끼리 연결하기

• -로 노드끼리 연결이 가능하다.

flowchart LR
    A --- B

• 여러 개를 연결하는 경우에는 아래처럼 활용할 수 있다.

flowchart LR
    A--->|"화살표로 연결"|B
    A---C
    B--->D
    D--->B

Preview

• 노드에 문자를 넣을 경우에는 아래처럼 한 번만 입력해 주면 된다.

flowchart LR
    A["큰 토끼🐰"]--->|"토끼가 좋아하는 것"|B
    A---C("작은 토끼🐰")
    B(["당근🥕"])--->D(["토끼풀☘️"])
    D--->B

Preview

2. 화살표 보내기

• flowchart 옆에 TD, TB를 사용하면 위에서 아래로, LR은 왼쪽에서 오른쪽으로 화살표를 보낸다.

위에서 아래

flowchart TD
    Start --> Stop

왼쪽에서 오른쪽

flowchart LR
    Start --> Stop

Preview

2.1 화살표에 내용 넣기

• 파이프| 기호로 텍스트를 넣을 수 있다.

flowchart LR
    A--->|This is the text|B

그 외 점선으로 보내기, 선 굵게하기 등 아래 문법 설명은 해당 링크 참고

// 점선으로 화살표 보내기
flowchart LR
   A-.->B;

// 점선에 문자 넣기
flowchart LR
   A-. text .-> B

// 굵은 화살표 보내기
flowchart LR
   A == text ==> B
   
// 체이닝 화살표
flowchart LR
   A -- text --> B -- text2 --> C
   
// 여러개 연결하기1
flowchart LR
   a --> b & c--> d

// 여러개 연결하기2
flowchart TB
    A & B--> C & D

Preview

2.2 플로우차트 화살표 방향 정리

• TB - Top to bottom
• TD - Top-down/ same as top to bottom
• BT - Bottom to top
• RL - Right to left
• LR - Left to right

3. 노드 모양 잡기

• 아래는 노드 모양별로 입력해 둔 코드이다.
• 참고자료 : 더 많은 Node shapes 확인 가능

flowchart LR
    id1("A node with round edges")
    id2(["A stadium-shaped node"])
    id3[["A node in a subroutine shape"]]
    id4[("Database")]

Preview id1부터 id4

4. 서브 그래프 활용하기

서브 그래프 참고자료

• 여기서 주의사항은 end를 사용할 때 전체 소문자로 사용해야한다. End 또는 END 사용 시 에러발생!

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    End
    subgraph two
    b1-->b2
    End
    subgraph three
    c1-->c2
    End

• 해당 코드로 아래와 같이 표현할 수 있다.
  

5. 로딩바 설정

• 해당 기능은 mermaid 9.4버전 이상부터 사용 가능하다.
• 단, 테스트 버전임

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

그 외

• 그 외로 Node에 링크를 걸거나 Node 색상 변화 및 스타일, fontawesome 적용하는 법 등등 Mermaid Docs를 통해 확인 가능하다.
• 요런 Pie Chart도 가능