マーメイドMCPサーバー

MermaidダイアグラムをPNG画像に変換するModel Context Protocol（MCP）サーバー。このサーバーにより、AIアシスタントやその他のアプリケーションは、Mermaid Markdown構文を使用してテキスト記述から視覚的なダイアグラムを生成できます。

特徴

マーメイドダイアグラムコードをPNG画像に変換します
複数のダイアグラムテーマ（デフォルト、フォレスト、ダーク、ニュートラル）をサポート
カスタマイズ可能な背景色
高品質のヘッドレスブラウザレンダリングにPuppeteerを使用
AIアシスタントとのシームレスな統合を実現するMCPプロトコルを実装
柔軟な出力オプション: 画像を直接返すか、ディスクに保存する
詳細なエラーメッセージによるエラー処理

仕組み

サーバーはPuppeteerを使用してヘッドレスブラウザを起動し、MermaidダイアグラムをSVGにレンダリングし、レンダリングされたダイアグラムのスクリーンショットをキャプチャします。このプロセスは以下のとおりです。

ヘッドレスブラウザインスタンスの起動
Mermaid コードを使用した HTML テンプレートの作成
Mermaid.jsライブラリの読み込み
図をSVGにレンダリングする
レンダリングされたSVGのスクリーンショットをPNGとして撮る
画像を直接返すかディスクに保存するか

建てる

npx tsc

使用法

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のバンドルブラウザを使用しようとするようになりました
ブラウザ関連のエラーが発生した場合は、次の 2 つのオプションがあります。オプション 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 : (オプション) 図のテーマ。オプション: "default", "forest", "dark", "neutral"
  - backgroundColor : (オプション) 図の背景色。例: 'white'、'transparent'、'#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クライアントでマーメイドダイアグラムを作成しやすくなります。

カーソルを使用する場合、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）
- すべてのバージョンの変更を1つのコミットにまとめる
- 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_TOKENという名前の新しいリポジトリシークレットを作成し、その値として npm トークンを設定します。

バッジ

ライセンス

マサチューセッツ工科大学

mermaid-mcp-server

Integrations