ng-diagram MCP Server

Name: ng-diagram MCP Server
Author: synergycodes

@synergycodes

About ng-diagram MCP Server

MCP server that enables AI assistants to search ng-diagram documentation and public API. Provides intelligent documentation search and API symbol lookup for ng-diagram - an Angular library for building interactive diagrams. Connect it to AI assistants like Claude, Cursor, or any

#angular #diagram #documentation #ng-diagram

Basic information

Config

Add this server to your MCP-compatible client using the configuration below.

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

Tools

No tools detected

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

Overview

What is ng-diagram MCP Server?

It is an MCP server that enables AI assistants to search ng-diagram documentation and public API. ng-diagram is an Angular library for building interactive diagrams. This server connects to tools like Claude, Cursor, or any MCP-compatible client, allowing users to ask questions about ng-diagram usage, class signatures, and configuration options.

How to use ng-diagram MCP Server?

Add the server to your MCP client configuration using the provided JSON snippet. No installation or monorepo checkout is required—the server runs via npx with the @ng-diagram/mcp package. After adding the config, restart your AI assistant to start querying the documentation and API.

Key features of ng-diagram MCP Server

Search ng-diagram documentation sections with free‑text queries.
Retrieve full markdown content of any documentation page.
Search public API symbols (classes, functions, interfaces, etc.).
Get detailed API info including signature, jsDoc, and import path.
Bundled documentation and API data – no external fetching needed.
Works with Claude, Cursor, Windsurf, and other MCP clients.

Use cases of ng-diagram MCP Server

Ask “How do I create custom nodes in ng-diagram?” and get relevant documentation sections.
Query “What’s the signature of the DiagramComponent class?” and retrieve symbol details.
Search for “config options” across all documentation pages.
Look up specific symbols like “provideNg” or “Edge” with exact names.
Browse API symbols filtered by kind (class, function, interface, etc.).