Mermaid 다이어그램

Mermaid란?

Mermaid는 텍스트 기반 다이어그램 언어입니다. 시각적 도구에서 모양을 드래그하는 대신 다이어그램에 대한 간단한 설명을 작성하면 Mermaid가 시각적 그래픽으로 렌더링합니다. 코드와 함께 존재하도록 설계되었습니다 — Markdown 파일, 위키 또는 문서 내부 — 따라서 다이어그램이 버전 관리되고 업데이트하기 쉽습니다.

Mermaid는 많은 유형의 다이어그램을 지원합니다:

• 플로우차트 — 의사 결정 트리 및 프로세스 흐름
• 시퀀스 다이어그램 — 시스템 또는 서비스가 시간에 따라 서로를 호출하는 방식
• 개체-관계 (ER) 다이어그램 — 데이터베이스 스키마
• 아키텍처 다이어그램 — 구성 요소 및 관계
• 간트 차트 — 타임라인 및 프로젝트 일정

실시간 다이어그램 렌더링

IDE Strip에서 Mermaid 코드 블록이 포함된 .md 파일을 엽니다. Mermaid 블록은 다음과 같습니다:

```mermaid graph TD A[User] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] D --> E[(Database)] ```

IDE Strip이 Mermaid 블록을 감지하면 소스와 함께 시각적 다이어그램 패널을 렌더링합니다. 둘을 동시에 볼 수 있습니다: 왼쪽에 텍스트 설명, 오른쪽에 렌더링된 다이어그램. 텍스트를 편집하면 다이어그램이 즉시 업데이트됩니다 — 저장-재로드 단계가 필요 없습니다.

대화형 편집

이것이 1DevTool의 Mermaid 지원이 표준 렌더러를 넘어가는 곳입니다. 시각적 다이어그램에서 노드를 드래그할 수 있으며 소스 코드가 새 레이아웃을 반영하여 자동으로 업데이트됩니다. 양방향으로 작동합니다:

• 텍스트 편집 → 다이어그램 업데이트 — 소스에서 레이블을 변경하거나 새 연결을 추가하고 다이어그램이 다시 그려지는 것을 확인합니다.
• 노드 드래그 → 소스 업데이트 — 시각적 다이어그램에서 노드를 이동하면 소스 코드의 해당 위치 데이터가 일치하도록 조정됩니다.

노드의 크기를 조정하고 한 노드의 가장자리에서 다른 노드로 드래그하여 가장자리를 다시 연결할 수도 있습니다. 소스는 전체적으로 동기화됩니다.

이것은 Mermaid 다이어그램을 "쓰고 기대하기" 경험보다 훨씬 덜 느끼게 만듭니다. 텍스트에서 구조를 대략 올바르게 만든 다음 시각적으로 레이아웃을 미세 조정할 수 있습니다.

AI Agent와 함께 사용하기

1DevTool에서 가장 강력한 조합 중 하나는 AI Agent에게 Mermaid 다이어그램을 생성하도록 한 다음 결과를 시각적으로 재배치하는 것입니다. 예를 들어 Claude Code 터미널을 열고 요청합니다:

"이 코드베이스의 주요 구성 요소가 서로 상호 작용하는 방식을 보여주는 Mermaid 다이어그램을 생성하세요."

Agent가 코드베이스를 읽고 Mermaid 다이어그램이 포함된 .md 파일을 작성합니다. IDE Strip에서 파일을 열면 다이어그램이 시각적으로 렌더링됩니다. 레이아웃을 읽기 어렵다면 노드를 더 명확한 배열로 드래그합니다. 소스가 자동으로 업데이트되므로 개선된 다이어그램을 커밋할 수 있습니다.

데이터베이스 스키마, API 호출 시퀀스, 배포 아키텍처 다이어그램에도 잘 작동합니다.

팁: Claude Code에게 요청: "이 리포의 구성 요소가 상호 작용하는 방식을 보여주는 Mermaid 다이어그램을 그리세요." 그런 다음 생성된 .md 파일을 열어 다이어그램을 시각적으로 보고 재배치하세요.