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가지가 있다.
- 코드로 바로 작성하는 법
Visual Studio Code Extention인Markdown Preview Mermaid Support를 설치하면 바로 Preview를 통해 Markdown으로 그래프를 확인하며 바로 작성할 수 있다.
Preview 예시
- 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 --> newLinesPreview
1. 노드끼리 연결하기
-로 노드끼리 연결이 가능하다.
flowchart LR
A --- B- 여러 개를 연결하는 경우에는 아래처럼 활용할 수 있다.
flowchart LR
A--->|"화살표로 연결"|B
A---C
B--->D
D--->BPreview
- 노드에 문자를 넣을 경우에는 아래처럼 한 번만 입력해 주면 된다.
flowchart LR
A["큰 토끼🐰"]--->|"토끼가 좋아하는 것"|B
A---C("작은 토끼🐰")
B(["당근🥕"])--->D(["토끼풀☘️"])
D--->BPreview
2. 화살표 보내기
- flowchart 옆에
TD,TB를 사용하면 위에서 아래로,LR은 왼쪽에서 오른쪽으로 화살표를 보낸다.
위에서 아래
flowchart TD
Start --> Stop왼쪽에서 오른쪽
flowchart LR
Start --> StopPreview
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 & DPreview
2.2 플로우차트 화살표 방향 정리
TB- Top to bottomTD- Top-down/ same as top to bottomBT- Bottom to topRL- Right to leftLR- 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도 가능
