인어 MCP 서버
Mermaid 다이어그램을 PNG 이미지로 변환하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버를 통해 AI 어시스턴트 및 기타 애플리케이션은 Mermaid 마크다운 구문을 사용하여 텍스트 설명에서 시각적 다이어그램을 생성할 수 있습니다.
특징
- 인어 다이어그램 코드를 PNG 이미지로 변환합니다.
- 다양한 다이어그램 테마(기본, 숲, 어둡고, 중립)를 지원합니다.
- 사용자 정의 가능한 배경색
- 고품질 헤드리스 브라우저 렌더링을 위해 Puppeteer를 사용합니다.
- AI 어시스턴트와의 원활한 통합을 위해 MCP 프로토콜을 구현합니다.
- 유연한 출력 옵션: 이미지를 직접 반환하거나 디스크에 저장
- 자세한 오류 메시지를 통한 오류 처리
작동 원리
서버는 Puppeteer를 사용하여 헤드리스 브라우저를 실행하고, 인어 다이어그램을 SVG로 렌더링하고, 렌더링된 다이어그램의 스크린샷을 캡처합니다. 이 과정은 다음과 같습니다.
- 헤드리스 브라우저 인스턴스 시작
- Mermaid 코드를 사용하여 HTML 템플릿 만들기
- Mermaid.js 라이브러리 로딩
- 다이어그램을 SVG로 렌더링
- 렌더링된 SVG의 스크린샷을 PNG로 찍기
- 이미지를 직접 반환하거나 디스크에 저장합니다.
짓다
지엑스피1
용법
Claude 데스크톱과 함께 사용하세요
"mcpServers": {
"mermaid": {
"command": "npx",
"args": [
npx @peng-shawn/mermaid-mcp-server
]
}
}
커서 및 클라인과 함께 사용
env CONTENT_IMAGE_SUPPORTED=false npx @peng-shawn/mermaid-mcp-server
./diagrams 에서 인어 다이어그램 목록을 찾을 수 있습니다. 이 다이어그램은 "인어 다이어그램을 생성하고 renderMermaidPng의 작동 방식을 설명하는 별도의 다이어그램 폴더에 저장합니다"라는 프롬프트가 있는 커서 에이전트를 사용하여 생성됩니다.
검사관과 함께 실행
테스트 및 디버깅을 위해 검사기로 서버를 실행합니다.
npx @modelcontextprotocol/inspector node dist/index.js
서버가 시작되어 stdio에서 MCP 프로토콜 메시지를 수신합니다.
여기에서 검사관에 대해 자세히 알아보세요.
Smithery를 통해 설치
Smithery를 통해 Claude Desktop용 Mermaid Diagram Generator를 자동으로 설치하려면:
npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude
Docker 및 Smithery 환경
Docker 컨테이너에서 실행할 때(Smithery를 통한 실행 포함) Chrome 종속성을 처리해야 할 수 있습니다.
- 이제 서버는 기본적으로 Puppeteer의 번들 브라우저를 사용하려고 시도합니다.
- 브라우저 관련 오류가 발생하는 경우 두 가지 옵션이 있습니다.옵션 1: Docker 이미지 빌드 중:
- Puppeteer를 설치할 때
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true 설정하세요. - Docker 컨테이너에 Chrome/Chromium을 설치하세요
- 런타임에
PUPPETEER_EXECUTABLE_PATH Chrome 설치를 가리키도록 설정합니다.
옵션 2: Puppeteer의 기본 제공 Chrome을 사용하세요.
- Docker 컨테이너에 Chrome에 필요한 종속성이 있는지 확인하세요.
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD 를 설정할 필요가 없습니다.- 코드는 자동으로 번들된 브라우저를 사용합니다.
Smithery 사용자의 경우 추가 구성 없이 최신 버전을 사용할 수 있습니다.
API
서버는 단일 도구를 제공합니다.
generate : 인어 다이어그램 코드를 PNG 이미지로 변환합니다.- 매개변수:
code : 렌더링할 인어 다이어그램 코드theme : (선택 사항) 다이어그램의 테마입니다. 옵션: "기본", "숲", "어두움", "중립"backgroundColor : (선택 사항) 다이어그램의 배경색, 예: '흰색', '투명', '#F0F0F0'name : 생성된 파일의 이름(CONTENT_IMAGE_SUPPORTED=false인 경우 필수)folder : 이미지를 저장할 절대 경로(CONTENT_IMAGE_SUPPORTED=false인 경우 필수)
generate 도구의 동작은 CONTENT_IMAGE_SUPPORTED 환경 변수에 따라 달라집니다.
CONTENT_IMAGE_SUPPORTED=true (기본값)인 경우: 도구는 응답에서 이미지를 직접 반환합니다.CONTENT_IMAGE_SUPPORTED=false 경우: 도구는 이미지를 지정된 폴더에 저장하고 파일 경로를 반환합니다.
환경 변수
CONTENT_IMAGE_SUPPORTED : 이미지가 응답에서 직접 반환되는지 아니면 디스크에 저장되는지 제어합니다.true (기본값): 이미지가 응답에서 직접 반환됩니다.false : 이미지가 디스크에 저장되며 name 과 folder 매개변수가 필요합니다.
예시
기본 사용법
// Generate a flowchart with default settings
{
"code": "flowchart TD\n A[Start] --> B{Is it?}\n B -->|Yes| C[OK]\n B -->|No| D[End]"
}
테마 및 배경색 포함
// Generate a sequence diagram with forest theme and light gray background
{
"code": "sequenceDiagram\n Alice->>John: Hello John, how are you?\n John-->>Alice: Great!",
"theme": "forest",
"backgroundColor": "#F0F0F0"
}
디스크에 저장(CONTENT_IMAGE_SUPPORTED=false인 경우)
// Generate a class diagram and save it to disk
{
"code": "classDiagram\n Class01 <|-- AveryLongClass\n Class03 *-- Class04\n Class05 o-- Class06",
"theme": "dark",
"name": "class_diagram",
"folder": "/path/to/diagrams"
}
자주 묻는 질문
Claude 데스크톱은 이미 캔버스를 통해 인어를 지원하지 않나요?
네, 하지만 theme 와 backgroundColor 옵션은 지원하지 않습니다. 게다가 전용 서버를 사용하면 다양한 MCP 클라이언트로 인어 다이어그램을 더 쉽게 만들 수 있습니다.
Cursor와 함께 사용할 때 CONTENT_IMAGE_SUPPORTED=false를 지정해야 하는 이유는 무엇입니까?
커서는 아직 응답에서 인라인 이미지를 지원하지 않습니다.
출판
이 프로젝트에서는 GitHub Actions를 사용하여 npm에 게시하는 과정을 자동화합니다.
방법 1: 릴리스 스크립트 사용(권장)
- 모든 변경 사항이 커밋되고 푸시되었는지 확인하세요.
- 특정 버전 번호나 의미적 버전 증가를 사용하여 릴리스 스크립트를 실행합니다.
# Using a specific version number
npm run release 0.1.4
# Using semantic version increments
npm run release patch # Increments the patch version (e.g., 0.1.3 → 0.1.4)
npm run release minor # Increments the minor version (e.g., 0.1.3 → 0.2.0)
npm run release major # Increments the major version (e.g., 0.1.3 → 1.0.0)
- 스크립트는 다음을 수행합니다.
- 버전 형식 또는 의미 증가를 검증합니다.
- 메인 브랜치에 있는지 확인하세요
- 파일 간 버전 불일치를 감지하고 경고합니다.
- 모든 버전 참조를 일관되게 업데이트합니다(package.json, package-lock.json 및 index.ts)
- 모든 버전 변경 사항을 포함하는 단일 커밋을 만듭니다.
- git 태그를 생성하고 푸시합니다.
- 그러면 GitHub 워크플로가 자동으로 빌드되어 npm에 게시됩니다.
방법 2: 수동 프로세스
- 코드를 업데이트하고 변경 사항을 커밋하세요.
- 버전 번호로 새 태그를 만들고 푸시합니다.
git tag v0.1.4 # Use the appropriate version number
git push origin v0.1.4
- GitHub 워크플로는 자동으로 다음을 수행합니다.
- 프로젝트를 빌드하세요
- 태그의 버전으로 npm에 게시
참고: GitHub 저장소 설정에서 NPM_TOKEN 비밀번호를 설정해야 합니다. 방법은 다음과 같습니다.
- 게시 권한이 있는 npm 액세스 토큰 생성
- GitHub 저장소로 이동 → 설정 → 비밀 및 변수 → 작업
- npm 토큰을 값으로 사용하여
NPM_TOKEN 이라는 새 저장소 비밀을 만듭니다.
배지
특허
MIT