hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Integrations

Converts Mermaid diagram code to PNG images, supporting multiple diagram themes (default, forest, dark, neutral) and customizable background colors.
Uses Puppeteer for high-quality headless browser rendering to generate the Mermaid diagrams as PNG images.

인어 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

You must be authenticated.

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

Tools

generate

인어 다이어그램을 PNG 이미지로 변환하는 모델 컨텍스트 프로토콜(MCP) 서버입니다.

Related Resources

Reddit Discussion about this server