Diagram Bridge Mcp

Diagram Bridge MCP Server

LLM と図の作成をつなぐ、包括的な MCP サーバーです。強力で独立した 3 つのツール、インテリジェントな形式選択、形式に応じた指示の生成、プロフェッショナルな図のレンダリング（kroki サーバーを使用）を提供します。各ツールは単独で使うことも、適切な形式の選択から最終画像の生成まで、図作成ワークフロー全体を通じて順に組み合わせて使うこともできます。

対応形式：Mermaid、PlantUML、C4 Model、D2、GraphViz、BPMN、Structurizr、Excalidraw、Vega-Lite

クイックスタート

1. 前提条件：

   • Node.js 18.0 以降
   • Docker および Docker Compose

2. インストールとビルド：

git clone [email protected]:tohachan/diagram-bridge-mcp.git
cd diagram-bridge-mcp
npm install && npm run build

3. ポートを設定（任意）：

# Copy and edit environment file to customize ports
cp .env.example .env
# Edit .env to set PORT and KROKI_PORT as needed

# Or set environment variables directly:
export PORT=4000        # MCP Server port (default: 3000)
export KROKI_PORT=9000  # Kroki service port (default: 8000)

4. サービスを起動：

# Option 1: Interactive port configuration
./scripts/start-with-ports.sh

# Option 2: Default ports (3000 for MCP, 8000 for Kroki)
docker-compose up --build

# Option 3: Custom ports via environment variables
PORT=4000 KROKI_PORT=9000 docker-compose up --build

5. Cursor に追加（または任意の MCP クライアントに追加）：

ローカルで直接使用する場合（Docker を使用しない場合）：

{
  "mcpServers": {
    "diagram-bridge-mcp": {
      "command": "node",
      "args": ["/path/to/diagram-bridge-mcp/dist/index.js"],
      "enabled": true
    }
  }
}

Docker ベースでセットアップする場合（推奨）：

{
  "mcpServers": {
    "diagram-bridge-mcp": {
      "command": "docker",
      "args": [
        "exec", 
        "-i", 
        "diagram-bridge-mcp", 
        "node", 
        "dist/index.js"
      ],
      "enabled": true
    }
  }
}

注：MCP プロトコルは STDIO 通信を使用します。HTTP エンドポイント（:3000/health）は Docker の監視専用であり、MCP クライアントとの接続には使用しません。

5. 使用を開始：すぐに使える 3 つの MCP ツールをサーバーが提供します！

💡 使用例

ワークフロー全体を紹介する簡単なプロンプトを示します。

"Choose the best diagram format for visualizing a current project architecture, then generate the diagram code and render it to an image file. Save the result as 'architecture-diagram'."

この 1 つのプロンプトで、次の処理を実行します。

1. リクエストを分析し、最適な形式を推奨します
2. 図をその形式で作成するための具体的な指示を取得します
3. 最終的な図を作成してレンダリングし、PNG/SVG ファイルにします

🎨 使用例ギャラリー

どのような図を作成できるか、**使用例ギャラリー**をご覧ください。

🛠️ ツールの概要

help_choose_diagram

目的：要件に基づいたインテリジェントな形式選択

• AI を活用したヒューリスティックでリクエストを分析します
• 信頼度スコア付きの推奨を提示します
• 必要に応じて形式の制約に対応します
• LLM が最適な判断を行えるよう、構造化されたプロンプトを生成します

例：「データベースの関係を示したい」→ 詳細な理由とともに、Mermaid ER 図形式を推奨します

get_diagram_instructions

目的：形式に応じたコーディング指示の生成

• 対応する任意の図形式に合わせて、カスタマイズされたプロンプトを作成します
• 構文のガイドライン、ベストプラクティス、よくある落とし穴を含めます
• 動作するサンプルと出力仕様を提供します
• LLM が構文的に正しい図のコードを生成できるようにします

例：Mermaid 形式の場合 → サンプル付きの詳細な Mermaid 構文ガイド

render_diagram

目的：図のコードをプロフェッショナルな画像に変換

• 統合された Kroki サービスを通じて図をレンダリングします
• PNG および SVG の出力形式に対応します
• パフォーマンス向上のため、インテリジェントなキャッシュ機能を備えています
• 絶対パス付きでファイルを保存するため、簡単にアクセスできます

例：Mermaid コード → 高品質な PNG/SVG 画像ファイル

⚙️ 設定

基本設定

• デフォルトの保存先：{project-root}/generated-diagrams/
• デフォルトの Kroki：ローカルの Docker Kroki サービスを使用します
• デフォルトのポート：MCP サーバー（3000）、Kroki（8000）

ポート設定

サーバーは環境変数に基づいてポートを自動的に設定します。

• 外部ポート（PORT）：Docker コンテナが公開するポート（デフォルト：3000）
• Kroki ポート（KROKI_PORT）：Kroki サービス用のポート（デフォルト：8000）
• 内部通信：サービス間の通信には、固定のコンテナポートを使用します

# Interactive configuration (recommended)
./scripts/start-with-ports.sh

# Quick port change
PORT=4000 KROKI_PORT=9000 docker-compose up --build

# Check running services
curl http://localhost:4000/health  # Using your custom PORT

注：Docker で実行する場合、サーバーはヘルスモニタリング用の HTTP エンドポイントとして /health と /info を提供します。

高度な設定については、設定ガイドをご覧ください。

📚 ドキュメント

• クイックスタート：ポート設定 - ポートをすばやく設定するガイド
• インストールガイド - 詳細なセットアップ手順
• Docker デプロイ - コンテナのデプロイ方法
• API リファレンス - ツールとリソースに関する完全なドキュメント
• 設定ガイド - 環境変数と MCP クライアントの設定
• 開発ガイド - コントリビューションと開発環境のセットアップ
• アーキテクチャ - システムアーキテクチャと設計パターン
• パフォーマンスとセキュリティ - パフォーマンス指標とセキュリティ機能
• トラブルシューティング - よくある問題と解決方法

---

最適な対象：作成する図の形式や、プロフェッショナルな方法でのレンダリング方法が分からない LLM。

提供元：Kroki - あらゆる図をレンダリングするサービス

❤️を込めて作成