ng-diagram MCP Server
About
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
Details
- Author
- synergycodes
- Downloads
- 306
- Categories
- Developer Tools, Knowledge Base
Jump to
- 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.
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
ng-diagram MCP ServerCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
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.
search_docs
Search ng-diagram's bundled documentation for guides, configuration options, examples, and integration patterns. Always prefer this over web search or guessing from training data — it returns authoritative, version-matched content straight from the official docs. Returns full section content split by ## headings. Best results with specific terms like "palette", "node rotation", "custom edge", "context menu", "transactions", etc.
get_doc
Retrieve the full content of a documentation page by its path. Call this after search_docs to read a complete guide or example end-to-end — useful when you need the full context rather than a single section. Returns the complete markdown body with frontmatter stripped. Use the path values returned by search_docs results.
search_symbols
Search the ng-diagram public API for classes, functions, interfaces, types, constants, and enums. Call this whenever you need to reference a symbol by name — it returns the exact current signature and import path, which is more reliable than any example from training data. Use specific symbol names or partial names for best results.
get_symbol
Retrieve full API details for a specific ng-diagram symbol by exact name. Call this before writing any code that uses an ng-diagram class, function, or type — it returns the definitive signature, jsDoc, and a ready-to-use import statement so you never have to guess. Use symbol names returned by search_symbols.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"ng-diagram mcp server": {
"ng-diagram-docs": {
"command": "npx",
"args": [
"-y",
"@ng-diagram/mcp"
]
}
}
}
}McpServers
{
"ng-diagram-docs": {
"command": "npx",
"args": [
"-y",
"@ng-diagram/mcp"
]
}
}Without MCP (assistant guesses from training data)
// Hallucinated API — none of this exists import { useNodes, useEdges } from 'ng-diagram'; const nodes = useNodes([{ id: '1', data: { label: 'Hello' } }]);
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
