AI Diagram Maker MCP Server

offiziell

MCP-Server für AI Diagram Maker — erstelle schöne Softwareentwicklungsdiagramme direkt in Cursor, Claude Desktop, Claude Code oder jedem MCP-kompatiblen KI-Agenten

GitHub

Dokumentation

AI Diagram Maker MCP Server

MCP-Server für AI Diagram Maker — erzeugen Sie ansprechende Software-Engineering-Diagramme direkt in Cursor, Claude Desktop, Claude Code oder jedem MCP-kompatiblen KI-Agenten.

ai-diagram-maker-mcp 🌐 ☁️ - Erstellen Sie professionelle Software-Diagramme aus einfachen englischen Beschreibungen.

Funktionen

5 Werkzeuge für jeden Eingabetyp: natürliche Sprache, Code, ASCII-Diagramm, Bilder und Mermaid
Inline-Darstellung — Diagramme erscheinen direkt im Chat über die MCP Apps UI, kein Download nötig
Diagramm-URL in den Antworten — öffnen Sie sie im Browser, um das Diagramm anzusehen und zu bearbeiten
5 Diagrammtypen: Flussdiagramm, Sequenzdiagramm, ERD, Systemarchitektur, UML
Unterstützt sowohl stdio (lokal) als auch HTTP/Streamable HTTP (remote) Transport

Voraussetzungen

Node.js 18+
Ein AI Diagram Maker-Konto und API-Schlüssel

Gehosteter MCP-Server

Der öffentliche MCP-Endpunkt ist https://mcp.aidiagrammaker.com/mcp (Streamable HTTP). Für diese Option ist keine Installation erforderlich.

Authentifizierung (HTTP)

Für entfernte HTTP-Clients senden Sie Ihren API-Schlüssel bei jeder Anfrage mit — nicht über Umgebungsvariablen:

X-ADM-API-Key: <your_api_key> (empfohlen), oder
Authorization: Bearer <your_api_key>

Verwenden Sie den API-Schlüssel aus Ihrem AI Diagram Maker-Konto (siehe Voraussetzungen).

JSON-Beispiel für entfernten Server

Fügen Sie dies in die MCP-Konfiguration Ihres Clients ein (ersetzen Sie den API-Schlüssel-Platzhalter):

{
  "mcpServers": {
    "ai-diagram-maker": {
      "url": "https://mcp.aidiagrammaker.com/mcp",
      "headers": {
        "X-ADM-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Installation

Option A — Gehosteter Server (empfohlen)

Verwenden Sie das obige JSON-Beispiel für entfernten Server und binden Sie es mithilfe der MCP-Client-Konfiguration in Ihren Client ein. Keine globale Installation.

Option B — Lokal mit npx ausführen

Nichts dauerhaft installieren — npx führt das Paket bei Bedarf aus. Der Paketname ist ai-diagram-maker-mcp; hängen Sie @latest an, wenn bei jedem Aufruf die neueste Version aufgelöst werden soll (empfohlen für einmalige Ausführungen und claude mcp add).

ADM_API_KEY=your_api_key npx ai-diagram-maker-mcp@latest

MCP-Client-Konfiguration

Cursor

Remote (empfohlen)

Fügen Sie zu ~/.cursor/mcp.json oder Einstellungen → MCP das JSON-Beispiel für entfernten Server hinzu. Für dieses Setup sind keine Umgebungsvariablen erforderlich.

Lokal (stdio)

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "npx",
      "args": ["-y", "ai-diagram-maker-mcp@latest"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

Optional: Fügen Sie "ADM_DEBUG": "1" zu env für Debug-Protokollierung hinzu — siehe Umgebungsvariablen.

Claude Desktop

Fügen Sie zu ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) oder %APPDATA%\Claude\claude_desktop_config.json (Windows) hinzu:

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "npx",
      "args": ["-y", "ai-diagram-maker-mcp@latest"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

Claude Code

macOS

claude mcp add ai-diagram-maker -t stdio -e ADM_API_KEY=<api_key> -- npx -y ai-diagram-maker-mcp@latest

Windows

claude mcp add ai-diagram-maker \
  --command "npx" \
  --args "-y,ai-diagram-maker-mcp@latest" \
  --env ADM_API_KEY=your_api_key_here

HTTP-Transport (lokal oder selbst gehostet)

Um selbst einen HTTP-Server auszuführen (gleiche header-basierte Authentifizierung wie Authentifizierung (HTTP)):

npx ai-diagram-maker-mcp@latest --transport http

Der Server lauscht auf $PORT oder 3001. Richten Sie Clients auf /mcp und senden Sie den API-Schlüssel bei jeder Anfrage mit den obigen Headern mit.

Umgebungsvariablen

Variable	Erforderlich	Standard	Beschreibung
`ADM_API_KEY`	Ja (nur stdio)	—	Ihr AI Diagram Maker API-Schlüssel (nur stdio-Transport; entfernte HTTP-Clients verwenden Header — siehe Authentifizierung (HTTP))
`ADM_BASE_URL`	Nein	`https://app.aidiagrammaker.com`	Überschreibung für lokale/Staging-API; wird auch als Basis für Diagramm-URLs in Werkzeugantworten verwendet
`ADM_DEBUG`	Nein	—	Auf `1`, `true` oder `yes` setzen, um Anfrageparameter des KI-Agenten und die an die AI Diagram Maker API gesendete Nutzlast zu protokollieren. Protokolle gehen nach stderr. Öffnen Sie in Cursor die Ausgabe und wählen Sie den Kanal MCP oder ai-diagram-maker, um die Serverprotokolle zu lesen.

Werkzeuge

`generate_diagram_from_text`

Erzeugt ein Diagramm aus einer natürlichsprachlichen Beschreibung.

Parameter	Typ	Erforderlich	Beschreibung
`content`	string	Ja	Natürlichsprachliche Beschreibung des Diagramms
`diagramType`	enum	Nein	flowchart, sequence, erd, system_architecture, uml
`prompt`	string	Nein	Zusätzliche Stil-/Layout-Anweisung

Beispiel-Prompts:

"Erstelle eine Microservices-Architektur mit API-Gateway, Auth-Service, User-Service und PostgreSQL-Datenbank"
"Zeichne ein Sequenzdiagramm für den Benutzer-Login-Flow mit JWT-Token-Generierung"
"adm zeige die CI/CD-Pipeline für eine Next.js-App, die auf Vercel deployed wird"

`generate_diagram_from_json`

Wandelt eine JSON-Struktur in ein Diagramm um (ideal für API-Antworten, Datenbankschemata, Konfigurationsdateien).

Parameter	Typ	Erforderlich	Beschreibung
`content`	string	Ja	Zu visualisierender JSON-String
`prompt`	string	Nein	Wie das JSON interpretiert werden soll
`diagramType`	enum	Nein	Bevorzugter Diagrammtyp

`generate_diagram_from_ascii`

Wandelt ASCII-Art in ein aufpoliertes Diagramm um.

Parameter	Typ	Erforderlich	Beschreibung
`content`	string	Ja	Rohes ASCII-Art-Diagramm
`prompt`	string	Nein	Rendering-Anweisungen
`diagramType`	enum	Nein	Bevorzugter Diagrammtyp

`generate_diagram_from_image`

Wandelt ein Whiteboard-Foto, einen Screenshot oder ein beliebiges Bild in ein sauberes Diagramm um.

Parameter	Typ	Erforderlich	Beschreibung
`content`	string	Ja	Öffentliche Bild-URL oder base64-Daten-URI
`prompt`	string	Nein	Was extrahiert oder wie gerendert werden soll
`diagramType`	enum	Nein	Bevorzugter Ausgabe-Diagrammtyp

`generate_diagram_from_mermaid`

Wandelt eine Mermaid-Diagrammdefinition in D2 um und gibt ein PNG-Bild zurück.

Parameter	Typ	Erforderlich	Beschreibung
`content`	string	Ja	Mermaid-Diagrammquelle (z. B. flowchart, sequenceDiagram, erDiagram)
`prompt`	string	Nein	Optionale Layout- oder Stilanweisung
`diagramType`	enum	Nein	Bevorzugter Diagrammtyp für die konvertierte Ausgabe

Trigger-Schlüsselwörter

Der KI-Agent wählt automatisch das richtige Werkzeug aus, wenn Sie Formulierungen verwenden wie:

adm ...
ai diagram maker ...
create a diagram of ...
show me a flowchart / sequence diagram / ERD / architecture ...
visualise / draw / diagram ...

Lokale Entwickler-Einrichtung

Verwenden Sie diese Schritte, um das Repository zu klonen, lokal zu bauen und den MCP-Server mit Node auszuführen.

1. Repository klonen

git clone https://github.com/erajasekar/ai-diagram-maker-mcp.git
cd ai-diagram-maker-mcp

2. Abhängigkeiten installieren

npm install

3. (Optional) API-Client neu generieren

Wenn Sie die AI Diagram Maker OpenAPI-Spezifikation oder Konfiguration ändern, generieren Sie den Client neu:

npm run generate

4. Bauen

npm run build

Dies kompiliert TypeScript und baut die MCP-App-UI in dist/. Der Server-Einstiegspunkt ist dist/index.js.

5. Lokalen MCP-Server ausführen

stdio (Standard) — zur Verwendung mit Cursor, Claude Desktop usw.:

ADM_API_KEY=your_api_key node dist/index.js

Oder verwenden Sie das npm-Skript:

ADM_API_KEY=your_api_key npm start

HTTP-Transport — für entfernte Clients oder Tests (gleiche Header wie Authentifizierung (HTTP)):

ADM_API_KEY=your_api_key node dist/index.js --transport http

Oder:

ADM_API_KEY=your_api_key npm run start:http

Der HTTP-Server lauscht auf $PORT (Standard 3001).

6. Lokalen Server in Cursor verwenden

Richten Sie Cursor über Einstellungen → MCP (oder ~/.cursor/mcp.json) auf Ihren gebauten Server:

{
  "mcpServers": {
    "ai-diagram-maker": {
      "command": "node",
      "args": ["/absolute/path/to/ai-diagram-maker-mcp/dist/index.js"],
      "env": {
        "ADM_API_KEY": "your_api_key_here"
      }
    }
  }
}

Ersetzen Sie /absolute/path/to/ai-diagram-maker-mcp durch den tatsächlichen Pfad zu Ihrem geklonten Repository. Starten Sie Cursor nach der Konfigurationsänderung neu oder laden Sie die MCP-Server neu.

Für Debug-Protokollierung fügen Sie "ADM_DEBUG": "1" zu env hinzu — siehe Umgebungsvariablen.

Lizenz

MIT