[기타] 다이어그램 표현을 위한 Mermaid 문법

 

안녕하세요 데잇입니다. 데이터 업무를 하다보면 시각적으로 구조를 표현해야 하는 일이 종종 있습니다.

그럴때마다 PPT나 마인드맵 프로그램을 이용해도 좋지만, 복잡한 구조는 그리기 어려운 경우가 많습니다.

Mermaid는 복잡한 다이어그램과 플로우차트를 코드로 쉽게 작성하고 시각화할 수 있는 도구입니다.

세 가지 주요 고려사항(그래프의 진행 방향, 노드의 모양, 그리고 텍스트 입력 방법)을 토대로 Mermaid의 기본 문법을 배워봅시다.

1. 그래프 진행 방향

그래프의 진행 방향은 다이어그램의 흐름을 나타냅니다. Mermaid에서는 주로 두 가지 방향을 사용합니다:

• Top-Down (위에서 아래로): graph TD
• Left-Right (왼쪽에서 오른쪽으로): graph LR

2. 노드의 모양

노드의 모양은 다이어그램의 요소를 시각적으로 구분하는 데 사용됩니다. Mermaid는 다양한 형태의 노드를 지원합니다:

• 직사각형 노드: A[Text]
• 원형 또는 타원형 노드: B(Text)
• 마름모형 노드: C{Text}
• 경기장 모양 노드: D>Text]

3. 텍스트 입력 방법

텍스트는 주로 노드 내부나 엣지(화살표)의 라벨로 추가됩니다. 직접적인 텍스트 표현은 제한적이므로, 대부분 노드나 엣지에 설명을 추가하는 형태로 사용됩니다:

• 노드 내부 텍스트: 노드 정의 시 괄호 안에 텍스트를 넣습니다. 예: A[Node A]
• 엣지의 라벨: 화살표와 함께 라벨을 추가하여 텍스트를 표현합니다. 예: A -->|Text on edge| B

예시 다이어그램

다음은 Mermaid를 사용한 간단한 다이어그램 예시입니다:

graph TD
A[Rectangle Node] 
B(Rectangle Node) 
C{Rhombus Node} 
D>Stadium Node] 

A --> B
B --> C
C --> D
D -->|Text on edge| A

 

 

마무리

Mermaid를 사용하여 복잡한 관계와 프로세스를 시각화하는 것은 매우 효과적입니다. 그러나 Mermaid를 지원하는 환경은 제한적입니다. 제가 경험한 환경은 Notion과 Obsidian입니다.