머메이드 다이어그램을 PNG 이미지나 SVG 파일로 변환하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버는 AI 어시스턴트 및 기타 애플리케이션이 머메이드 마크다운 문법을 사용하여 텍스트 설명을 통해 시각적 다이어그램을 생성할 수 있도록 합니다.

특징

• 머메이드 다이어그램 코드를 PNG 이미지 또는 SVG 파일로 변환
• 여러 다이어그램 테마(기본, 숲, 어두움, 중립) 지원
• 배경색 사용자 지정 가능
• 고품질의 헤드리스 브라우저 렌더링을 위해 Puppeteer 사용
• AI 어시스턴트와의 원활한 통합을 위한 MCP 프로토콜 구현
• 유연한 출력 옵션: 이미지/SVG 직접 반환 또는 디스크에 저장
• 상세한 오류 메시지 처리와 함께 오류 처리

작동 원리

서버는 Puppeteer를 사용해 헤드리스 브라우저를 실행하고, 인어 다이어그램을 SVG로 렌더링하며, 선택적으로 렌더링된 다이어그램의 스크린샷을 캡처합니다. 과정은 다음과 같습니다:

1. 헤드리스 브라우저 인스턴스 실행
2. 인어 코드로 HTML 템플릿 만들기
3. Mermaid.js 라이브러리 로딩
4. 다이어그램을 SVG로 렌더링하기
5. SVG를 직접 저장하거나 PNG로 스크린샷을 찍는 방법
6. 이미지/SVG를 직접 반환하거나 디스크에 저장하는 방법

건설

사용

클로드 데스크톱과 함께 사용하기

Mermaid MCP Server

A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images or SVG files. This server allows AI assistants and other applications to generate visual diagrams from textual descriptions using the Mermaid markdown syntax.

Features

• Converts Mermaid diagram code to PNG images or SVG files
• Supports multiple diagram themes (default, forest, dark, neutral)
• Customizable background colors
• Uses Puppeteer for high-quality headless browser rendering
• Implements the MCP protocol for seamless integration with AI assistants
• Flexible output options: return images/SVG directly or save to disk
• Error handling with detailed error messages

How It Works

The server uses Puppeteer to launch a headless browser, render the Mermaid diagram to SVG, and optionally capture a screenshot of the rendered diagram. The process involves:

1. Launching a headless browser instance
2. Creating an HTML template with the Mermaid code
3. Loading the Mermaid.js library
4. Rendering the diagram to SVG
5. Either saving the SVG directly or taking a screenshot as PNG
6. Either returning the image/SVG directly or saving it to disk

Requirements

• Node.js 22.12.0 or later

Security notice: versions before 0.3.0 depend on Puppeteer and Mermaid releases with known vulnerabilities. Please upgrade to 0.3.0 or later. The configurations below use @latest so npx picks up new releases.

Build

npx tsc

Usage

Use with Claude desktop

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "@peng-shawn/mermaid-mcp-server@latest"]
    }
  }
}

Use with Cursor and Cline

env CONTENT_IMAGE_SUPPORTED=false npx -y @peng-shawn/mermaid-mcp-server@latest

You can find a list of mermaid diagrams under ./diagrams, they are created using Cursor agent with prompt: “generate mermaid diagrams and save them in a separate diagrams folder explaining how renderMermaidPng work”

Run with inspector

Run the server with inspector for testing and debugging:

npx @modelcontextprotocol/inspector node dist/index.js

The server will start and listen on stdio for MCP protocol messages.

Learn more about inspector here.

Installing via Smithery

To install Mermaid Diagram Generator for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude

Docker and Smithery Environments

When running in Docker containers (including via Smithery), you may need to handle Chrome dependencies:

1. The server now attempts to use Puppeteer’s bundled browser by default

2. If you encounter browser-related errors, you have two options:

   Option 1: During Docker image build:

   • Set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true when installing Puppeteer