マーメイドMCPサーバー

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

特徴

• マーメイドダイアグラムコードをPNG画像に変換します

• 複数のダイアグラムテーマ（デフォルト、フォレスト、ダーク、ニュートラル）をサポート

• カスタマイズ可能な背景色

• 高品質のヘッドレスブラウザレンダリングにPuppeteerを使用

• AIアシスタントとのシームレスな統合を実現するMCPプロトコルを実装

• 柔軟な出力オプション: 画像を直接返すか、ディスクに保存する

• 詳細なエラーメッセージによるエラー処理

Related MCP server: mcp-mermaid-validator

仕組み

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

1. ヘッドレスブラウザインスタンスの起動

2. Mermaid コードを使用した HTML テンプレートの作成

3. Mermaid.jsライブラリの読み込み

4. 図をSVGにレンダリングする

5. レンダリングされたSVGのスクリーンショットをPNGとして撮る

6. 画像を直接返すかディスクに保存するか

建てる

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 の依存関係を処理する必要がある場合があります。

1. サーバーはデフォルトでPuppeteerのバンドルブラウザを使用しようとするようになりました

2. ブラウザ関連のエラーが発生した場合は、次の 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: リリース スクリプトを使用する (推奨)

1. すべての変更がコミットされプッシュされていることを確認してください

2. 特定のバージョン番号またはセマンティック バージョン増分を使用してリリース スクリプトを実行します。

   # 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)

3. スクリプトは次のようになります。

   • バージョン形式またはセマンティック増分を検証する

   • メインブランチにいるか確認する

   • ファイル間のバージョンの不一致を検出して警告する

   • すべてのバージョン参照を一貫して更新する（package.json、package-lock.json、index.ts）

   • すべてのバージョンの変更を1つのコミットにまとめる

   • Gitタグを作成してプッシュする

   • GitHubワークフローは自動的にビルドし、npmに公開します。

方法2：手動プロセス

1. コードを更新し、変更をコミットします

2. バージョン番号を含む新しいタグを作成してプッシュします。

   git tag v0.1.4  # Use the appropriate version number
   git push origin v0.1.4

3. GitHub ワークフローは自動的に次の処理を実行します。

   • プロジェクトを構築する

   • タグのバージョンでnpmに公開する

注: GitHubリポジトリの設定でNPM_TOKENシークレットを設定する必要があります。設定手順は以下のとおりです。

1. 公開権限を持つnpmアクセストークンを生成する

2. GitHubリポジトリに移動→設定→シークレットと変数→アクション

3. NPM_TOKENという名前の新しいリポジトリシークレットを作成し、その値として npm トークンを設定します。

バッジ

ライセンス

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