Mermaid 설치 및 사용 방법과 Packet Diagram 작성 가이드

다이어그램은 복잡한 시스템이나 프로세스를 시각적으로 표현하는 데 매우 유용합니다.

 

 

특히 개발자나 기술 문서 작성자에게는 필수적인 도구입니다. 오늘은 코드로 다이어그램을 쉽게 생성할 수 있는 Mermaid와 그 중에서도 네트워크 패킷 구조를 시각화하는 Packet Diagram에 대해 알아보겠습니다.

목차

1. Mermaid란?
2. Mermaid 설치 방법
3. Mermaid 기본 사용법
4. Packet Diagram 소개
5. Packet Diagram 작성 가이드
6. 실전 예제
7. 활용 팁

1. Mermaid란?

Mermaid는 마크다운 기반의 텍스트로 다양한 다이어그램을 생성할 수 있는 JavaScript 라이브러리입니다. 복잡한 다이어그램 도구 없이 코드만으로 다양한 시각화를 할 수 있어 개발자들 사이에서 인기가 높습니다.

Mermaid의 주요 특징:

• 마크다운과 유사한 간단한 문법
• 다양한 다이어그램 지원 (플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 패킷 다이어그램 등)
• GitHub, Notion, VS Code 등 다양한 플랫폼과의 통합
• 웹 기반으로 별도의 설치 없이 사용 가능한 Live Editor 제공

2. Mermaid 설치 방법

Mermaid는 여러 방법으로 설치하고 사용할 수 있습니다.

2.1 CDN을 통한 사용

가장 간단한 방법은 CDN을 통해 Mermaid를 웹 페이지에 포함시키는 것입니다.

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
    mermaid.initialize({ startOnLoad: true });
</script>

2.2 npm을 통한 설치

프로젝트에 Mermaid를 추가하려면 npm을 사용할 수 있습니다.

# NPM 사용
npm install mermaid

# Yarn 사용
yarn add mermaid

# PNPM 사용
pnpm add mermaid

2.3 Mermaid CLI 설치

명령줄에서 Mermaid 다이어그램을 생성하려면 Mermaid CLI를 설치할 수 있습니다.

npm install -g @mermaid-js/mermaid-cli

설치 후 mmdc 명령을 사용하여 다이어그램을 생성할 수 있습니다.

mmdc -i input.mmd -o output.svg

2.4 VS Code에서 사용하기

VS Code에서 Mermaid를 사용하려면 다음 확장 프로그램을 설치하면 됩니다:

• "Markdown Preview Mermaid Support"
• "Mermaid Markdown Syntax Highlighting"

설치 후 마크다운 파일에서 Mermaid 코드 블록을 작성하고 미리보기를 통해 다이어그램을 확인할 수 있습니다.

3. Mermaid 기본 사용법

Mermaid는 다양한 다이어그램을 지원하며, 각 다이어그램 유형마다 고유한 문법이 있습니다. 여기서는 가장 기본적인 플로우차트 작성법을 알아보겠습니다.

3.1 플로우차트 기본 문법

flowchart TD
    A[시작] --> B{조건 확인}
    B -->|Yes| C[작업 1]
    B -->|No| D[작업 2]
    C --> E[종료]
    D --> E

위 코드는 다음과 같은 다이어그램을 생성합니다:

• TD는 Top to Down의 약자로, 위에서 아래로 흐르는 다이어그램을 의미합니다.
• A, B, C, D, E는 노드의 ID입니다.
• []는 사각형, {}는 마름모, ()는 원형 노드를 나타냅니다.
• -->는 화살표를 나타내며, |텍스트|를 추가하여 라벨을 붙일 수 있습니다.

3.2 방향 설정

플로우차트의 방향은 다음과 같이 설정할 수 있습니다:

• TD 또는 TB: Top to Bottom (위에서 아래)
• BT: Bottom to Top (아래에서 위)
• RL: Right to Left (오른쪽에서 왼쪽)
• LR: Left to Right (왼쪽에서 오른쪽)

3.3 노드 스타일 지정

노드의 모양과 스타일을 다양하게 지정할 수 있습니다:

flowchart LR
    A[사각형] --> B(둥근 사각형)
    B --> C{마름모}
    C --> D((원))
    D --> E[\평행사변형\]
    E --> F[/평행사변형/]
    F --> G{{육각형}}

4. Packet Diagram 소개

Packet Diagram은 Mermaid v11.0.0부터 추가된 기능으로, 네트워크 패킷의 구조와 내용을 시각적으로 표현하는 데 사용됩니다. 네트워크 패킷은 데이터 통신에서 기본 단위로, 패킷 다이어그램을 통해 헤더와 페이로드 구조를 명확하게 표현할 수 있습니다.

Packet Diagram의 주요 용도:

• 네트워크 프로토콜 구조 시각화
• 데이터 패킷 형식 문서화
• 바이너리 데이터 구조 표현
• 메모리 레이아웃 설명

5. Packet Diagram 작성 가이드

Packet Diagram은 비트 단위의 블록을 시각적으로 표현하는 데 특화되어 있습니다.

5.1 기본 문법

Packet Diagram의 기본 문법은 다음과 같습니다:

packet-beta
    # 단일 비트 블록
    start: "블록 이름"
    
    # 다중 비트 블록
    start-end: "블록 이름"

여기서:

• packet-beta는 패킷 다이어그램 시작을 나타냅니다.
• start는 단일 비트 위치를 나타냅니다.
• start-end는 비트 범위를 나타냅니다.
• "블록 이름"은 해당 블록의 레이블입니다.

5.2 예제

간단한 IPv4 헤더 구조를 표현하는 패킷 다이어그램 예제:

packet-beta
    0-3: "Version"
    4-7: "IHL"
    8-15: "Type of Service"
    16-31: "Total Length"
    32-47: "Identification"
    48-50: "Flags"
    51-63: "Fragment Offset"
    64-71: "Time to Live"
    72-79: "Protocol"
    80-95: "Header Checksum"
    96-127: "Source IP Address"
    128-159: "Destination IP Address"

이 코드는 IPv4 헤더의 각 필드를 비트 위치에 따라 시각적으로 표현합니다.

 

그림 :

6. 실전 예제

6.1 TCP 헤더 다이어그램

packet-beta
    0-15: "Source Port"
    16-31: "Destination Port"
    32-63: "Sequence Number"
    64-95: "Acknowledgment Number"
    96-99: "Data Offset"
    100-105: "Reserved"
    106: "URG"
    107: "ACK"
    108: "PSH"
    109: "RST"
    110: "SYN"
    111: "FIN"
    112-127: "Window Size"
    128-143: "Checksum"
    144-159: "Urgent Pointer"
    160-191: "Options (if Data Offset > 5)"

6.2 이더넷 프레임 다이어그램

packet-beta
    0-47: "Destination MAC Address"
    48-95: "Source MAC Address"
    96-111: "EtherType/Length"
    112-X: "Payload"
    X-(X+31): "Frame Check Sequence"

7. 활용 팁

7.1 Mermaid Live Editor 활용하기

Mermaid는 온라인에서 바로 다이어그램을 작성하고 확인할 수 있는 Live Editor를 제공합니다. 이를 통해 다이어그램을 실시간으로 확인하고 수정할 수 있습니다.

7.2 GitHub에서 Mermaid 사용하기

GitHub의 마크다운 파일에서 Mermaid를 사용할 수 있습니다. 다음과 같이 코드 블록을 작성하면 됩니다:

```mermaid
flowchart LR
    A[시작] --> B{조건}
    B -->|Yes| C[성공]
    B -->|No| D[실패]
```

7.3 다양한 다이어그램 활용하기

Mermaid는 패킷 다이어그램 외에도 다양한 다이어그램을 지원합니다:

• 시퀀스 다이어그램: 객체 간 상호작용 표현
• 클래스 다이어그램: 클래스 구조와 관계 표현
• ER 다이어그램: 데이터베이스 구조 표현
• 간트 차트: 프로젝트 일정 관리
• 파이 차트: 데이터 비율 시각화

각 다이어그램 유형에 맞는 문법을 사용하여 필요한 시각화를 구현할 수 있습니다.

결론

Mermaid는 코드만으로 다양한 다이어그램을 쉽게 생성할 수 있는 강력한 도구입니다.

특히 Packet Diagram 기능을 통해 네트워크 프로토콜이나 데이터 구조를 명확하게 시각화할 수 있어 개발자와 네트워크 엔지니어에게 매우 유용합니다.

 

간단한 문법으로 복잡한 다이어그램을 생성할 수 있고, 다양한 플랫폼과의 통합이 가능하기 때문에 기술 문서 작성이나 프로젝트 설명에 Mermaid를 활용해보시기 바랍니다.