Mermaid

Mermaid

Mermaid는 텍스트 기반 다이어그램 도구입니다. 간단한 마크다운 형식의 코드로 시퀀스 다이어그램, 플로우차트, 간트 차트, 클래스 다이어그램, 상태도 등을 시각화할 수 있게 해줍니다.

Mermaid란?

• 텍스트 기반으로 다이어그램을 그릴 수 있는 언어
• Markdown 또는 HTML 문서 내에 삽입 가능
• GitHub, GitLab, Obsidian, Typora, VS Code 등에서 직접 렌더링 가능
• 브라우저에서도 동작 (mermaid.js)

기본 사용 예

1. 플로우차트

graph TD
    A[웹 서버] --> B[Network Firewall]
    B --> C[NAT Gateway]
    C --> D[인터넷]

2. 시퀀스 다이어그램

sequenceDiagram
    participant User
    participant Bastion
    participant PrivateEC2

    User->>Bastion: SSH 접속
    Bastion->>PrivateEC2: SSH 접속

3. 상태도

stateDiagram
    [*] --> Init
    Init --> Running
    Running --> Terminated

Mermaid 사용 방법

1. 웹에서 사용

• Mermaid Live Editor 에서 작성하고 확인 가능
• Mermaid Playground

2. HTML + mermaid.js로 직접

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

<div class="mermaid">
graph TD
    A --> B
</div>

VS Code에서 Mermaid 사용

1. 파일 확장자: .mmd, .md

2. 확장기능 설치

• Markdown Preview Mermaid Support
• 또는 Mermaid Markdown Syntax Highlighting

Mermaid로 AWS 아키텍처는 간단하게 표현할 수 있지만, 복잡한 다이어그램은 draw.io, Lucidchart와 함께 사용하는 게 더 명확할 수 있습니다.