mcp-server-diagramai MCP Server

About

# mcp-server-diagramai An MCP server implementation for DiagramAI integration, enabling AI agents to create, read, edit, and delete diagrams in real-time. [![npm version](https://badge.fury.io/js/mcp-server-diagramai.svg)](https://badge.fury.io/js/mcp-server-diagramai) [![License…

Details

License: MIT license

Explore

- Exposes diagram list and project structure as resources.
- Real-time diagram state access and project-based organization.
- Tools for full CRUD on diagrams and projects.
- Node and edge operations for dynamic diagram editing.
- Supports reactflow and mermaid diagram types.
- Environment‑variable configuration and debug logging.

Paths to Claude Desktop config file:
- MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "diagramai": {
      "command": "npx",
      "args": [
        "mcp-server-diagramai",
        "--api-url", "${DIAGRAMAI_API_URL}",
        "--api-key", "${DIAGRAMAI_API_KEY}"
      ]
    }
  }
}

{
  "mcpServers": {
    "diagramai": {
      "command": "/PATH/TO/node",
      "args": [
        "/PATH/TO/mcp-server-diagramai/dist/index.js"
      ],
      "env": {
        "DIAGRAMAI_API_URL": "http://localhost:3000",
        "DIAGRAMAI_API_KEY": "your-api-key-here"
      }
    }
  }
}

Create a .env file or set environment variables:

DIAGRAMAI_API_URL=http://localhost:3000 DIAGRAMAI_API_KEY=your-api-key-here 1. Access DiagramAI Settings: Navigate to your DiagramAI instance settings 2. Generate API Key: Create a new API key with appropriate permissions 3. Configure MCP: Add the API key to your Claude Desktop configuration

bash
npm run dev
```

- create_diagram: Create new diagrams with specified content
- get_diagram: Retrieve diagram by ID
- update_diagram: Modify existing diagrams
- delete_diagram: Remove diagrams
- add_node: Add nodes to diagrams
- add_edge: Add connections between nodes
- list_diagrams: Get all accessible diagrams
- get_diagram_status: Check diagram state and metadata

An MCP server implementation for DiagramAI integration, enabling AI agents to create, read, edit, and delete diagrams in real-time.

Features

Resources

- Expose diagram list and project structure - Real-time diagram state access - Project-based organization

Tools

- create_diagram: Create new diagrams with specified content - get_diagram: Retrieve diagram by ID - update_diagram: Modify existing diagrams - delete_diagram: Remove diagrams - add_node: Add nodes to diagrams - add_edge: Add connections between nodes - list_diagrams: Get all accessible diagrams - get_diagram_status: Check diagram state and metadata

Installation

From npm (Recommended)

npm install -g mcp-server-diagramai

From source

git clone https://github.com/PadsterH2012/mcp-server-diagramai.git
cd mcp-server-diagramai
npm install
npm run build

Usage with Claude Desktop

Configuration File

Paths to Claude Desktop config file:
- MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json

Published Package Configuration

{
  "mcpServers": {
    "diagramai": {
      "command": "npx",
      "args": [
        "mcp-server-diagramai",
        "--api-url", "${DIAGRAMAI_API_URL}",
        "--api-key", "${DIAGRAMAI_API_KEY}"
      ]
    }
  }
}

Development Configuration

{
  "mcpServers": {
    "diagramai": {
      "command": "/PATH/TO/node",
      "args": [
        "/PATH/TO/mcp-server-diagramai/dist/index.js"
      ],
      "env": {
        "DIAGRAMAI_API_URL": "http://localhost:3000",
        "DIAGRAMAI_API_KEY": "your-api-key-here"
      }
    }
  }
}

Environment Variables

Create a .env file or set environment variables:

```env

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.