MCP Integration

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 flowcharts
• Visualize data structures on demand

Requirements

Prerequisites:

• ToDiagram Pro subscription
• Node.js 16+ or npx installed
• MCP-compatible client (Claude Desktop, Cline, etc.)

Quick Start

npx @todiagram/todiagram-mcp@latest

npm install -g @todiagram/todiagram-mcp

{
  "mcpServers": {
    "todiagram": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@todiagram/todiagram-mcp@latest"
      ],
      "env": {
        "TODIAGRAM_API_KEY": "your-api-key-here"
      }
    }
  }
}

Using ToDiagram, create a diagram showing a web application 
architecture with load balancer, web servers, and database.

Configuration

Claude Desktop

Edit claude_desktop_config.json (location varies by OS):

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

Linux: ~/.config/Claude/claude_desktop_config.json

Cline (VS Code Extension)

Edit MCP settings in VS Code:

1. Open VS Code Settings
2. Search for "MCP"
3. Add ToDiagram MCP configuration to Cline settings
4. Restart VS Code

Custom MCP Clients

For custom integrations, connect to the MCP server using the stdio transport:

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';

const transport = new StdioClientTransport({
  command: 'npx',
  args: ['-y', '@todiagram/todiagram-mcp@latest'],
  env: {
    TODIAGRAM_API_KEY: process.env.TODIAGRAM_API_KEY
  }
});

const client = new Client({ name: 'my-app', version: '1.0.0' }, {
  capabilities: {}
});

await client.connect(transport);

Use Cases

1. AI-Assisted Architecture Design

Use AI assistants to quickly generate system architecture diagrams:

Create a microservices architecture with:
- API Gateway
- User Service
- Order Service
- Payment Service
- PostgreSQL database
- Redis cache
Show connections between services

2. Configuration Visualization

Visualize complex configuration files:

Visualize this Kubernetes deployment YAML as a diagram:
[paste YAML content]

3. API Response Exploration

Explore API responses interactively:

Show this API response as a diagram so I can understand its structure:
[paste JSON response]

4. Documentation Generation

Generate diagrams for technical documentation:

Create a flowchart showing the CI/CD pipeline:
code commit → tests → build → staging → production

5. Code to Diagram

Convert code structures to visual diagrams:

Create a diagram from this data structure:
[paste code snippet]

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