A
securityA
licenseA
qualityA Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images.
Last updated -
1
193
183
MIT License
MCP サーバー: Mermaid Validator
Mermaidダイアグラムを検証およびレンダリングするモデルコンテキストプロトコルサーバー。このサーバーにより、LLM は Mermaid ダイアグラムを検証およびレンダリングできるようになります。
使用法
クイックスタート
MCP クライアントが Mermaid Validator を使用するように設定するには、次のように mcp servers ファイルに追加します。
{
"mcpServers": {
"mermaid-validator": {
"command": "npx",
"args": [
"-y",
"@rtuin/mcp-mermaid-validator@latest"
]
}
}
}
建築
高レベルアーキテクチャ
このプロジェクトは、次のようなシンプルな TypeScript Node.js アプリケーションとして構成されています。
メインアプリケーション: Mermaid ダイアグラムを検証し、レンダリングされた PNG 出力を返す 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 を使用して図を検証およびレンダリングします
検証結果とレンダリングされたPNG（有効な場合）を返します
適切なエラーメッセージでエラーケースを処理する
データフロー
入力: マーメイドダイアグラム構文を文字列として
処理：
図はstdin経由でMermaid CLIに渡されます。
CLIは構文を検証し、有効であればPNGをレンダリングします。
出力とエラーはstdout/stderrからキャプチャされます
出力:
成功: テキスト確認 + 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) } ] }
技術的な決定
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 buildnpm run bumpnpm run changelognpm publish --access public
Related MCP Servers
- -securityFlicense-qualityEnables programmatic creation of Whimsical diagrams from Mermaid markup generated by AI models like Claude through the Model Context Protocol.Last updated -23
- -securityAlicense-qualityA server that implements the Model Context Protocol (MCP), providing an interface for LLM applications to generate mermaid.js visualizations and diagrams.Last updated -MIT License
- -securityAlicense-qualityAn MCP server that converts text inputs into visualized flowcharts, enabling AI clients to generate high-quality Mermaid diagrams directly from natural language descriptions or structured text.Last updated -7MIT License