remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Integrations

Validates and renders Mermaid diagrams, returning validation results and rendered SVG/PNG output when valid, enabling LLMs to create and verify diagram syntax.

MCP サーバー: Mermaid Validator

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

使用法

クイックスタート

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

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

建築

高レベルアーキテクチャ

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

メインアプリケーション: Mermaid ダイアグラムを検証し、レンダリングされた SVG 出力を返す Node.js サービス
MCP 統合: モデルコンテキストプロトコル SDK を使用して、MCP 互換クライアントに機能を公開します。
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に実装されています。このコンポーネントは次の処理を行います。

MCPサーバーインスタンスを作成する
Mermaid ダイアグラム構文を受け入れるvalidateMermaidツールを登録します
Mermaid CLI を使用して図を検証およびレンダリングします
検証結果とレンダリングされたSVG（有効な場合）を返します
適切なエラーメッセージでエラーケースを処理する

データフロー

入力: マーメイドダイアグラム構文を文字列として
処理：
- 図はstdin経由でMermaid CLIに渡されます。
- CLIは構文を検証し、有効であればSVGをレンダリングします。
- 出力とエラーはstdout/stderrからキャプチャされます
出力:
- 成功: テキスト確認 + SVG を base64 エンコードされた画像としてレンダリング
- 失敗: 検証失敗の詳細を含むエラーメッセージ

依存関係

外部ライブラリ

@modelcontextprotocol/sdk : モデルコンテキストプロトコルを実装するためのSDK
@mermaid-js/mermaid-cli : Mermaid ダイアグラムを検証およびレンダリングするための CLI ツール
zod : TypeScript のスキーマ検証ライブラリ

開発依存関係

typescript : TypeScript コンパイラ
eslint : リンティングユーティリティ
prettier : コードのフォーマット

API仕様

検証マーメイドツール

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

パラメータ:

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) } ] }

技術的な決定

MCP 統合: このプロジェクトでは、モデルコンテキストプロトコルを使用して AI ツールのインターフェースを標準化し、互換性のあるクライアントとのシームレスな統合を可能にします。
PNG 出力形式: 実装では、ほとんどの MCP クライアント (特に SVG をサポートしていない Cursor) との互換性を高めるために、デフォルトの出力形式として PNG を使用します。
子プロセスアプローチ: 実装では、Node.js の子プロセスを使用して Mermaid CLI と対話し、次の機能を提供します。
- メインアプリケーションとレンダリングプロセスの分離
- 詳細なエラー情報を取得する機能
- レンダリングパイプラインの適切な処理
エラー処理戦略: 実装では、ネストされた try-catch 構造を使用して次の処理を行います。
- 検証エラー（無効なダイアグラム構文）とシステムエラーを区別する
- ユーザーが図を修正できるように詳細なエラー情報を提供する
- 無効な入力を処理する場合でもサービスが安定していることを確認する
シンプルなプロジェクト構造: このプロジェクトでは、次のような簡単な 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

You must be authenticated.

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

Tools

validateMermaid

Mermaid ダイアグラムを検証およびレンダリングするモデルコンテキストプロトコルサーバー。

Related Resources

Reddit Discussion about this server