ToDiagram

MCP Integration

Create ToDiagram diagrams from Claude, Cursor, VS Code and other AI assistants with the Model Context Protocol

The ToDiagram MCP server lets AI assistants create diagrams in your ToDiagram account. Ask Claude, Cursor, VS Code, Codex or any other MCP client for an architecture overview, a component diagram, a Mermaid chart, or a diagram of your JSON, YAML, CSV or XML data, and you get back a link that opens it in the editor.

What is MCP?

Model Context Protocol (MCP) is an open protocol that standardizes how AI applications connect to external tools and data. The ToDiagram MCP server gives AI assistants tools to:

  • Create architecture and system overviews with icons and groups
  • Create component diagrams with key-value rows
  • Turn JSON, YAML, CSV or XML data into diagrams
  • Create Mermaid flowcharts, ER diagrams and sequence diagrams

Requirements

  • A ToDiagram account
  • Node.js 18 or later (includes npx)
  • An MCP client, such as Claude Code, Claude Desktop, Cursor, VS Code, Codex, Windsurf or Cline

Quick Start

Get Your API Key

  1. Sign in to ToDiagram and open the editor
  2. Click the account icon at the top right, choose Settings and open the API & MCP tab
  3. Click Create API Key

Keep your API key private and never commit it to version control.

Add the Server to Your MCP Client

Your MCP client starts the server for you with npx, so there's nothing to install or host.

Cursor or VS Code: in the same API & MCP tab, click Connect to Cursor or Connect to VS Code. Your editor opens and offers to install the server with your most recent API key filled in.

Claude Code: run

claude mcp add --scope user todiagram -e TODIAGRAM_API_KEY=your-api-key -- npx -y @todiagram/todiagram-mcp@latest

Leave out --scope user to add it to the current project only.

Other clients: most MCP clients keep their servers in a JSON file in this format. Copy MCP Config in the API & MCP tab copies the todiagram entry with your most recent key filled in.

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

Replace your-api-key with the API key from step 1. VS Code's mcp.json names the top-level key servers instead of mcpServers.

Try It

Restart your MCP client if the tools don't show up, then ask for a diagram:

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

The assistant creates a private document in your account and returns a link that opens it in the editor.

Tools

ToolWhat it does
generateSystemDiagramArchitecture, platform and repository overviews with grouped, icon-first nodes
generateCodeDiagramDetailed components with key-value rows, icons and nested groups
generateDataDiagramTurns JSON, YAML, CSV or XML data into a diagram
generateMermaidDiagramMermaid flowchart (or graph), erDiagram and sequenceDiagram
searchIconsFinds Iconify icon names to use on nodes

Each create tool saves a new private document in your account and returns a link that opens it in the editor. If a diagram has duplicate node ids, or edges that point at ids that don't exist, the tool returns a numbered list of problems and saves nothing, so the assistant can fix them and try again.

The server also offers an architecture-diagram prompt that guides the assistant through an architecture diagram. Clients that support MCP prompts, such as Claude Code, list it as a slash command.

Agent Skills

For AI coding agents that support skills, you can install the ToDiagram diagramming skill:

npx skills add todiagram/skills --skill diagram

This adds specialized diagramming capabilities to your agent, enabling it to generate and visualize diagrams directly within your development workflow.

Privacy

The server talks only to todiagram.com, to save your diagrams, and to the public Iconify API, to search for icons. Your API key is sent only to todiagram.com.

Troubleshooting

Additional Resources

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

Documents API

Create, read and update your documents programmatically

Managing Your Subscription

View plans, download invoices, update payment details, change billing cycle, and cancel or resume your ToDiagram subscription.

On this page

What is MCP?RequirementsQuick StartGet Your API KeyAdd the Server to Your MCP ClientTry ItToolsAgent SkillsPrivacyTroubleshootingAdditional ResourcesNext Steps