MCP Mermaid Validator

🚀 MCP サーバー：Mermaid バリデーター

モデルコンテキストプロトコル（Model Context Protocol）サーバーで、Mermaid チャートの検証とレンダリングを行います。このサーバーにより、大規模言語モデルが Mermaid チャートの検証とレンダリングを行うことが可能になります。

🚀 クイックスタート

MCP クライアントを Mermaid バリデーターを使用するように構成することで、mcp サーバーファイルに追加できます。

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

💻 使用例

基本的な使用法

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

📚 ドキュメント

全体アーキテクチャ

このプロジェクトは、シンプルな TypeScript Node.js アプリケーションで、以下のような構造になっています。

1. メインアプリケーション：Mermaid チャートを検証し、レンダリングされた SVG 出力を返す Node.js サービス
2. MCP 統合：モデルコンテキストプロトコル SDK を使用して、MCP 互換クライアントに機能を公開する
3. Mermaid CLI 統合：Mermaid CLI ツールを利用して、チャートの検証とレンダリングを実行する

コード構造

mcp-mermaid-validator/
├── dist/                   # コンパイル後の JavaScript 出力
│   └── main.js             # メインアプリケーションのエントリーファイル
├── src/                    # TypeScript ソースコード
│   └── main.ts             # メインアプリケーションのエントリーポイント
├── node_modules/           # 依存関係
├── package.json            # プロジェクトの依存関係とスクリプト
├── package-lock.json       # 依存関係のロックファイル
├── tsconfig.json           # TypeScript の設定
├── eslint.config.js        # ESLint の設定
├── .prettierrc             # Prettier の設定
└── README.md               # プロジェクトのドキュメント

MCP サーバー（核心コンポーネント）

主な機能は src/main.ts で実装されています。このコンポーネントは以下のことを行います。

1. MCP サーバーインスタンスを作成する
2. validateMermaid ツールを登録し、Mermaid チャートの構文を受け取る
3. Mermaid CLI を使用して、チャートの検証とレンダリングを実行する
4. 検証結果とレンダリングされた SVG（有効な場合）を返す
5. エラー状況を処理する

データフロー

1. 入力の受信：標準入力を通じて Mermaid チャートのコードを受け取る。
2. 解析と検証：Mermaid インタープリターを使用してコードを解析し、構文が正しいかを確認する。
3. レンダリング出力：有効な Mermaid コードを SVG 形式のグラフィックに変換する。
4. 結果の返却：生成された SVG を標準出力に出力する。

API 仕様

入力形式

{
  "code": "```mermaid\ngraph LR\n    A[開始] --> B{判断}\n    B -->|はい| C[処理]\n    C --> D[終了]\n    B -->|いいえ| E[終了]\n```\n"
}

出力形式

{
  "result": "<svg>...</svg>",
  "error": null
}

ビルドと実行

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

# 依存関係のインストール
npm install

# アプリケーションのビルド
npm run build

# ローカルでの実行（開発用）
npx @modelcontextprotocol/inspector node dist/main.js

# コードのフォーマット
npm run format

# コードのチェック
npm run lint

# 変更の監視（開発用）
npm run watch

このアプリケーションは MCP サーバーとして動作し、標準入出力を通じて通信し、MCP 互換クライアントとの統合に適しています。

リリース手順

新しいバージョンをリリースするには、以下の手順を実行してください。

• npm run build
• npm run bump
• npm run changelog
• npm publish --access public