MCP Integration
Integrate ToDiagram with AI assistants and tools using the Model Context Protocol
The ToDiagram MCP (Model Context Protocol) server enables you to generate interactive diagrams from code, AI assistants, internal tools, and developer workflows. Visualize JSON, YAML, XML, and CSV data as editable diagrams directly from your AI copilots like Claude, Cline, or custom agents.
What is MCP?
Model Context Protocol (MCP) is an open protocol that standardizes how AI applications connect to external data sources and tools. It allows AI assistants to interact with various services through a unified interface.
ToDiagram's MCP server provides tools that AI assistants can use to:
- Generate diagrams from various data formats
- Create custom node-and-edge diagrams
- Generate Mermaid diagrams
- Visualize data structures on demand
Requirements
Prerequisites:
- ToDiagram account
- Node.js 16+ or npx installed
- MCP-compatible client (Claude Desktop, Cline, etc.)
Quick Start
Get Your API Key
- Sign in to your ToDiagram account
- Go to Account Settings → API Keys
- Click Create API Key
- Copy and save your key securely
API keys are only shown once. Store them securely and never commit them to version control.
Install the MCP Server
The MCP server is available as an npm package. You can run it without installation using npx:
npx @todiagram/todiagram-mcp@latestOr install globally:
npm install -g @todiagram/todiagram-mcpConfigure Your MCP Client
Add the ToDiagram MCP server to your MCP client configuration.
{
"mcpServers": {
"todiagram": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@todiagram/todiagram-mcp@latest"
],
"env": {
"TODIAGRAM_API_KEY": "your-api-key-here"
}
}
}
}Replace your-api-key-here with your actual API key.
Test the Integration
Restart your MCP client and try generating a diagram:
Example prompt to Claude:
Using ToDiagram, create a diagram showing a web application
architecture with load balancer, web servers, and database.The AI will use the MCP tools to generate and return a shareable diagram URL.
Troubleshooting
Additional Resources
- NPM Package: npmjs.com/package/@todiagram/todiagram-mcp
- MCP Documentation: modelcontextprotocol.io
- Claude Desktop Setup: docs.anthropic.com/claude/docs/mcp
- API Documentation: See REST API section
- Support: Contact support via todiagram.com
Next Steps
- Generate your first diagram with AI assistance
- Explore Data Formats to understand visualization options
- Learn about Custom Diagrams for advanced use cases
- Check REST API for programmatic access