Skip to content
NgDiagram

MCP Server

The ng-diagram MCP server connects AI assistants to ng-diagram’s documentation and public API. Instead of switching to a browser to look things up, you can ask your AI assistant directly:

  • “How do I create custom nodes?”
  • “What’s the signature of DiagramComponent?”
  • “Show me the palette guide”

The AI searches the docs and API reference behind the scenes and answers with actual documentation content.

What is MCP?

Section titled “What is MCP?”

MCP is an open standard that lets AI assistants access external data sources. The ng-diagram MCP server exposes four tools:

  • search_docs - search documentation sections by keyword
  • get_doc - retrieve a full documentation page
  • search_symbols - search public API symbols (classes, interfaces, functions, types)
  • get_symbol - get full details for a specific API symbol

Setup

Section titled “Setup”

Add the server to your MCP client config - no installation required:

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

Restart your AI assistant after updating the config, then verify by asking i.e.: “Search the ng-diagram docs for palette”.

Config file locations

Section titled “Config file locations”
ClientConfig file
Claude Code.mcp.json in project root (project) or ~/.claude.json (user)
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 in project root (project) or ~/.cursor/mcp.json (global)
Windsurf~/.codeium/windsurf/mcp_config.json

How It Works

Section titled “How It Works”

The AI assistant uses a two-step pattern - search, then retrieve:

  1. AI calls search_docs("palette") or search_symbols("Component") to find matches
  2. AI calls get_doc("guides/palette.mdx") or get_symbol("NgDiagramComponent") to get full content
  3. AI synthesizes the answer for you

All documentation and API data is bundled into the npm package - no network calls are made at query time.

Learn More

Section titled “Learn More”