Mermaid MCP App

English | 繁體中文

Mermaid 다이어그램을 패닝, 확대/축소 및 내장 소스 편집기를 갖춘 대화형 뷰어에서 렌더링하는 MCP 앱입니다. 분할 뷰 편집기에서 다이어그램을 직접 편집하고 업데이트된 소스를 LLM으로 다시 보내 변경 사항을 반영하여 대화를 계속할 수 있습니다. Claude Desktop, VS Code 및 MCP-App 호환 호스트에서 작동합니다.

사용 방법

구성 후 LLM에게 다이어그램을 그리도록 요청하세요:

"Draw a flowchart showing user authentication flow"

"Create a sequence diagram for an API request lifecycle"

"Render this mermaid diagram: `graph TD; A-->B; B-->C`"

테마를 명시적으로 지정할 수도 있습니다:

"라이트 테마로 클래스 다이어그램을 그려줘"

Related MCP server: Excalidraw MCP App Server

기능

AI와의 상호작용

분할 뷰 편집기에서 다이어그램 소스를 직접 편집한 다음 LLM으로 다시 보내 변경 사항을 반영하여 대화를 계속하세요.

• AI로 보내기 — 편집된 다이어그램 소스를 LLM으로 다시 보내 응답을 트리거합니다

• 자동 컨텍스트 동기화 — 입력하는 동안 LLM 컨텍스트가 자동으로 업데이트됩니다(디바운스 적용). LLM은 다음 메시지에서 항상 최신 소스를 확인합니다

다이어그램 유형 (13가지 지원)

플로차트

flowchart — 범용 방향 그래프. 상하 및 좌우 레이아웃, 서브그래프, 다양한 노드 모양을 지원합니다.

시퀀스 다이어그램

sequenceDiagram — 시간에 따른 참가자 간의 상호작용. 메시지, 루프 및 대체 흐름을 표시합니다.

클래스 다이어그램

classDiagram — 속성, 메서드 및 관계(상속, 합성 등)가 있는 객체 지향 클래스 구조.

상태 다이어그램

stateDiagram-v2 — 전이, 복합 상태 및 동시성을 갖춘 유한 상태 머신.

ER 다이어그램

erDiagram — 카디널리티 주석이 있는 데이터 모델링을 위한 엔터티-관계 다이어그램.

간트 차트

gantt — 작업, 마일스톤, 종속성 및 중요 경로가 포함된 프로젝트 타임라인.

파이 차트

pie — 백분율 레이블이 있는 파이 조각으로 표시되는 비례 데이터.

Git 그래프

gitGraph — 병합 및 체리픽 흐름이 포함된 Git 브랜치 및 커밋 기록 시각화.

마인드맵

mindmap — 중앙 루트 노드에서 방사형으로 뻗어 나가는 아이디어의 계층적 트리.

타임라인

timeline — 시간대별로 그룹화된 연대순 이벤트.

사용자 여정

journey — 섹션과 행위자에 걸쳐 만족도 수준으로 평가된 사용자 경험 흐름.

요구사항 다이어그램

requirementDiagram — 유형, 위험 및 검증 방법이 포함되고 설계 요소에 연결된 시스템 요구사항.

쿼드런트 차트

quadrantChart — 우선순위 및 포지셔닝 분석을 위한 4분면 산점도.

UI

• 패닝 및 확대/축소 — 마우스 드래그로 패닝, 휠로 확대/축소, 터치 시 핀치 투 줌

• 컨테이너에 맞춤 — 렌더링 시 다이어그램 자동 맞춤; 재설정 버튼으로 맞춤 복원

• SVG 복사 — 렌더링된 SVG를 클립보드에 복사

• 분할 뷰 소스 편집기 — 실시간 재렌더링(400ms 디바운스)이 있는 항상 표시되는 편집기 패널

• 최소화 가능한 편집기 — 컴팩트한 하단 바에 접기; 한 번의 클릭으로 확장

• 세로/가로 레이아웃 전환 — 소스를 아래(세로) 또는 오른쪽(가로)에 배치; 최소화 상태는 항상 하단에 고정

• 테마 지원 — dark (시스템 기본 설정에서 자동 감지) 및 light

설치

Claude Desktop — 확장 프로그램 (권장)

GitHub Releases에서 최신 .mcpb를 다운로드하고 더블클릭하여 설치하세요. 터미널이나 구성이 필요 없습니다.

Claude Desktop — 수동

~/Library/Application Support/Claude/claude_desktop_config.json에 추가하세요:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-mcp-app", "--stdio"]
    }
  }
}

VS Code

.vscode/mcp.json 또는 사용자 설정에 추가하세요:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-mcp-app", "--stdio"]
    }
  }
}

개발

# Install dependencies
npm install

# Build (view + server)
npm run build

# Watch mode (view only)
npm run dev

# Start server
npm start