ng-diagram MCP Server

ng-diagram MCP サーバー

AI アシスタントが ng-diagram の API をでっち上げないようにしましょう。本物のドキュメントを提供します。

AI アシスタントは ng-diagram を知りません。名前の似た React ライブラリをもとに推測し、正しそうに見えてもコンパイルできないコードを生成します。この MCP サーバーはその問題を解決します。最新の ng-diagram ドキュメントと公開 API にアシスタントが直接アクセスできるようにするため、初回から正しいコードを記述できます。

MCP なし（アシスタントが学習データから推測）

// Hallucinated API — none of this exists
import { useNodes, useEdges } from 'ng-diagram';

const nodes = useNodes([{ id: '1', data: { label: 'Hello' } }]);

MCP あり（アシスタントが本物の API を参照）

// Correct — verified against the actual public API
import { initializeModel, NgDiagramComponent, provideNgDiagram } from 'ng-diagram';

model = initializeModel({
  nodes: [{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Hello' } }],
});

Claude、Cursor、Windsurf、またはMCP互換の任意のツールに接続できます。サーバーにはすべてのドキュメントと API データが同梱されているため、ネットワークへのアクセスは不要で、キャッシュが古くなることもなく、常にバージョンが一致します。

仕組み

                    1. search_docs / search_symbols
  +--------------+ ---------------------------------> +-----------+
  | AI Assistant | <--------------------------------- | MCP Server|
  |              |        2. Returns matches          |           |
  |              | ---------------------------------> |           |
  |              |     3. get_doc / get_symbol        |           |
  |              | <--------------------------------- |           |
  +--------------+     4. Returns full content        +-----------+
        |
        | 5. Answers with context
        v
     +------+
     | User |
     +------+

クイックスタート

インストールやモノレポのチェックアウトは不要です。MCP クライアントの設定にサーバーを追加してください。

macOS / Linux：

{
  "mcpServers": {
    "ng-diagram-docs": {
      "command": "npx",
      "args": ["-y", "@ng-diagram/mcp"]
    }
  }
}

Windows：

{
  "mcpServers": {
    "ng-diagram-docs": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@ng-diagram/mcp"]
    }
  }
}

パッケージにはすべてのドキュメントと API データが同梱されています。設定を更新した後、AI アシスタントを再起動し、_「ng-diagram のドキュメントで palette を検索して」_のように尋ねて動作を確認してください。

MCP クライアント設定ファイルの場所

クライアント	設定ファイル
Claude Code	プロジェクトルートの .mcp.json（プロジェクト）または ~/.claude.json（ユーザー）
Claude Desktop	~/Library/Application Support/Claude/claude_desktop_config.json（macOS）、%APPDATA%\Roaming\Claude\claude_desktop_config.json（Windows）、~/.config/claude-desktop/claude_desktop_config.json（Linux）
Cursor	プロジェクトルートの .cursor/mcp.json（プロジェクト）または ~/.cursor/mcp.json（グローバル）
Windsurf	~/.codeium/windsurf/mcp_config.json

ローカル開発（モノレポ）

ng-diagram のモノレポ内で作業している場合：

cd tools/mcp-server
pnpm install
pnpm build

次に、ローカルパスを指定して設定します。

{
  "mcpServers": {
    "ng-diagram-docs": {
      "command": "node",
      "args": ["/absolute/path/to/ng-diagram/tools/mcp-server/dist/index.js"]
    }
  }
}

API リファレンス

ツール：search_docs

ng-diagram に同梱されているドキュメントを検索し、ガイド、設定オプション、例、統合パターンを見つけます。ウェブ検索や学習データからの推測より、常にこのツールを優先してください。信頼でき、バージョンが一致したコンテンツが返されます。

パラメーター：

• query（文字列、必須）：検索クエリ。"palette"、"context menu"、"transactions" など、具体的な用語を使用してください。
• limit（数値、任意）：返す結果の最大数（デフォルト：10）

ツール：get_doc

パスを指定して、ドキュメントページの全文を取得します。search_docs の後に呼び出すと、ガイドや例を最初から最後まで読めます。

パラメーター：

• path（文字列、必須）：ドキュメントルートからの相対パス（例："guides/palette.mdx"）。search_docs の検索結果にあるパスを使用してください。

ツール：search_symbols

ng-diagram の公開 API から、クラス、関数、インターフェース、型、定数、列挙型を検索します。現在の正確なシグネチャとインポートパスが返されるため、学習データに含まれるどの例よりも信頼できます。

パラメーター：

• query（文字列、必須）：シンボル名または名前の一部（例："Diagram"、"provideNg"、"Edge"）
• kind（文字列、任意）：シンボルの種類で絞り込みます（class、function、interface、type、const、enum）
• limit（数値、任意）：返す結果の最大数（デフォルト：10）

ツール：get_symbol

正確な名前を指定して、特定の ng-diagram シンボルの API 詳細を取得します。ng-diagram の型を使うコードを書く前に呼び出してください。正式なシグネチャ、jsDoc、そのまま使えるインポート文が返されます。

パラメーター：

• name（文字列、必須）：シンボルの正確な名前（大文字と小文字を区別します）。search_symbols の結果にある名前を使用してください。

開発

コマンド

# Development
pnpm dev              # Run with auto-reload (uses monorepo paths)

# Testing
pnpm test             # Run all tests
pnpm test:watch       # Run in watch mode

# Building
pnpm build            # Compile TypeScript + bundle docs & API report into dist/data/

アーキテクチャと適応方法の詳細については、GUIDE.md をご覧ください。

ライセンス

Apache-2.0 - ng-diagram プロジェクトの一部です

---

Pawel Kubiak による初期 PoC

Synergy Codes チームによって完成・構築されました ❤️