MCP サーバー: Mermaid Validator

Mermaidダイアグラムを検証およびレンダリングするモデルコンテキストプロトコルサーバー。このサーバーにより、LLM は Mermaid ダイアグラムを検証およびレンダリングできるようになります。

使用法

クイックスタート

MCP クライアントが Mermaid Validator を使用するように設定するには、次のように mcp servers ファイルに追加します。

{
  "mcpServers": {
    "mermaid-validator": {
      "command": "npx",
      "args": [
        "-y",
        "@rtuin/mcp-mermaid-validator@latest"
      ]
    }
  }
}

Related MCP server: Whimsical MCP Server

建築

高レベルアーキテクチャ

このプロジェクトは、次のようなシンプルな TypeScript Node.js アプリケーションとして構成されています。

1. メインアプリケーション: Mermaid ダイアグラムを検証し、レンダリングされた PNG 出力を返す Node.js サービス

2. MCP 統合: モデル コンテキスト プロトコル SDK を使用して、MCP 互換クライアントに機能を公開します。

3. Mermaid CLI統合: Mermaid CLIツールを活用してダイアグラムの検証とレンダリングを実行します。

コード構造

mcp-mermaid-validator/
├── dist/                   # Compiled JavaScript output
│   └── main.js             # Compiled main application
├── src/                    # TypeScript source code
│   └── main.ts             # Main application entry point
├── node_modules/           # Dependencies
├── package.json            # Project dependencies and scripts
├── package-lock.json       # Dependency lock file
├── tsconfig.json           # TypeScript configuration
├── eslint.config.js        # ESLint configuration
├── .prettierrc             # Prettier configuration
└── README.md               # Project documentation

コンポーネントの機能

MCP サーバー (メイン コンポーネント)

コア機能はsrc/main.tsに実装されています。このコンポーネントは次の処理を行います。

1. MCPサーバーインスタンスを作成する

2. Mermaidダイアグラム構文を受け入れるvalidateMermaidツールを登録します

3. Mermaid CLI を使用して図を検証およびレンダリングします

4. 検証結果とレンダリングされたPNG（有効な場合）を返します

5. 適切なエラーメッセージでエラーケースを処理する

データフロー

1. 入力: マーメイドダイアグラム構文を文字列として

2. 処理：

   • 図はstdin経由でMermaid CLIに渡されます。

   • CLIは構文を検証し、有効であればPNGをレンダリングします。

   • 出力とエラーはstdout/stderrからキャプチャされます

3. 出力:

   • 成功: テキスト確認 + PNG を base64 エンコードされた画像としてレンダリング

   • 失敗: 検証失敗の詳細を含むエラーメッセージ

依存関係

外部ライブラリ

• @modelcontextprotocol/sdk : モデルコンテキストプロトコルを実装するためのSDK

• @mermaid-js/mermaid-cli : Mermaid ダイアグラムを検証およびレンダリングするための CLI ツール

• zod : TypeScript のスキーマ検証ライブラリ

開発依存関係

• typescript : TypeScript コンパイラ

• eslint : リンティングユーティリティ

• prettier : コードのフォーマット

API仕様

検証マーメイドツール

目的: マーメイドダイアグラムを検証し、有効な場合はレンダリングされたPNGを返します。

パラメータ:

• diagram (文字列): 検証するMermaidダイアグラム構文

戻り値:

• 成功：

  {
    content: [
      { 
        type: "text", 
        text: "Mermaid diagram is valid" 
      },
      {
        type: "image", 
        data: string, // Base64-encoded PNG
        mimeType: "image/png"
      }
    ]
  }

• 失敗：

  {
    content: [
      { 
        type: "text", 
        text: "Mermaid diagram is invalid" 
      },
      {
        type: "text",
        text: string // Error message
      },
      {
        type: "text",
        text: string // Detailed error output (if available)
      }
    ]
  }

技術的な決定

1. MCP 統合: このプロジェクトでは、モデル コンテキスト プロトコルを使用して AI ツールのインターフェースを標準化し、互換性のあるクライアントとのシームレスな統合を可能にします。

2. PNG 出力形式: 実装では、ほとんどの MCP クライアント (特に SVG をサポートしていない Cursor) との互換性を高めるために、デフォルトの出力形式として PNG を使用します。

3. 子プロセス アプローチ: 実装では、Node.js の子プロセスを使用して Mermaid CLI と対話し、次の機能を提供します。

   • メインアプリケーションとレンダリングプロセスの分離

   • 詳細なエラー情報を取得する機能

   • レンダリングパイプラインの適切な処理

4. エラー処理戦略: 実装では、ネストされた try-catch 構造を使用して次の処理を行います。

   • 検証エラー（無効なダイアグラム構文）とシステムエラーを区別する

   • ユーザーが図を修正できるように詳細なエラー情報を提供する

   • 無効な入力を処理する場合でもサービスが安定していることを確認する

5. シンプルなプロジェクト構造: このプロジェクトでは、次のような簡単な TypeScript プロジェクト構造を使用します。

   • メンテナンスと理解が容易

   • 直接的な依存関係管理

   • 簡素化されたビルドプロセス

ビルドと実行

アプリケーションは npm スクリプトを使用してビルドおよび実行できます。

# Install dependencies
npm install

# Build the application
npm run build

# Run locally (for development)
npx @modelcontextprotocol/inspector node dist/main.js

# Format code
npm run format

# Lint code
npm run lint

# Watch for changes (development)
npm run watch

アプリケーションは標準入出力を介して通信する MCP サーバーとして実行されるため、MCP 互換クライアントとの統合に適しています。

リリース

新しいバージョンをリリースするには、次の手順に従います。

• npm run build

• npm run bump

• npm run changelog

• npm publish --access public