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 客户端配置中——无需安装或检出 monorepo：

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

本地开发（monorepo）

如果你正在 ng-diagram monorepo 中工作：

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 项目的一部分

---

初始 PoC 由 Pawel Kubiak 编写

由 Synergy Codes 团队倾力打造并完成 ❤️