KI-Integration (MCP-Server)

Diagrammix enthält einen integrierten MCP-Server (Model Context Protocol), der KI-Assistenten wie Claude und Codex ermöglicht, Ihre Diagramme direkt zu lesen und zu bearbeiten. Beschreiben Sie in natürlicher Sprache, was Sie benötigen, und die KI platziert Symbole, Verbindungslinien und Layouts auf dem Canvas für Sie.

Was kann die KI?

  • Diagramme aus einer Beschreibung erstellen — fragen Sie nach einem Flussdiagramm, einer Netzwerktopologie oder einem Organigramm und erhalten Sie es sofort auf dem Canvas
  • Ihr Dokument lesen — die KI sieht Ihre aktuellen Formen, Verbindungslinien, Ebenen und Stile
  • Vorhandene Elemente ändern — Text, Farben, Positionen oder Verbindungslinienrouting aktualisieren
  • Stapeloperationen — ganze Diagramme mit Symbolen und Verbindungslinien in einem Schritt erstellen
  • Auto-Layout und Ausrichtung — Elemente mit natürlichsprachlichen Befehlen organisieren
  • Exportieren — SVG-Ausgabe auf Abruf erzeugen

Voraussetzungen

  • Diagrammix PRO (Einmalkauf)
  • Diagrammix muss mit aktiviertem MCP-Server laufen
  • Mindestens ein Diagrammdokument muss geöffnet sein
  • KI-Client und Diagrammix müssen auf demselben Rechner sein (localhost)
  • Node.js 18+ erforderlich für Claude Desktop (für die mcp-remote-Brücke)

Einrichtung

1. MCP-Server aktivieren

  1. Öffnen Sie Diagrammix
  2. Gehen Sie zu Diagrammix → Einstellungen (oder drücken Sie Cmd+,)
  3. Wechseln Sie zum Tab KI-Integration
  4. Schalten Sie KI-Integration aktivieren (MCP-Server) ein

Der Server startet unter http://localhost:8420/mcp.

2. Claude Desktop konfigurieren

Claude Desktop verwendet stdio-Transport und benötigt daher die mcp-remote-Brücke (Node.js 18+).

  1. Klicken Sie auf Konfiguration kopieren in den Diagrammix-Einstellungen, um die Konfiguration in die Zwischenablage zu kopieren
  2. Öffnen Sie die Claude Desktop-Konfigurationsdatei: ~/Library/Application Support/Claude/claude_desktop_config.json
  3. Fügen Sie die Konfiguration ein, oder fügen Sie manuell hinzu:
{
  "mcpServers": {
    "diagrammix": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://localhost:8420/mcp"]
    }
  }
}

Hinweis: Wenn Sie nvm verwenden, erkennt die Schaltfläche Konfiguration kopieren Ihre Node.js-Installation und generiert eine Konfiguration mit dem vollständigen Pfad zu npx und der korrekten PATH-Umgebungsvariable.

  1. Starten Sie Claude Desktop neu. Diagrammix-Werkzeuge erscheinen im Chat.

3. Claude Code (CLI) konfigurieren

Fügen Sie zur .mcp.json Ihres Projekts oder global in ~/.claude/mcp.json hinzu:

{
  "mcpServers": {
    "diagrammix": {
      "type": "url",
      "url": "http://localhost:8420/mcp"
    }
  }
}

Claude Code unterstützt Streamable HTTP nativ — keine Brücke erforderlich.

4. Codex konfigurieren

  1. Öffnen Sie Codex-Einstellungen → MCP-Server
  2. Klicken Sie auf Mit benutzerdefiniertem MCP verbinden
  3. Setzen Sie Name auf Diagrammix
  4. Wählen Sie den Tab Streamable HTTP
  5. Geben Sie die URL ein: http://localhost:8420/mcp
  6. Klicken Sie auf Speichern

5. Andere MCP-Clients

Jeder MCP-kompatible Client kann sich verbinden über:

  • Transport: Streamable HTTP
  • Endpunkt: http://localhost:8420/mcp
  • Protokoll: JSON-RPC 2.0 über HTTP POST

Hinweis: ChatGPT Desktop erfordert HTTPS und unterstützt keine direkten localhost-Verbindungen.

Anwendungsbeispiele

Ein Flussdiagramm erstellen

„Erstelle ein Flussdiagramm mit Start, Entscheidung, Prozess A, Prozess B und Ende. Verbinde Start mit Entscheidung, Entscheidung mit Prozess A (Ja) und Prozess B (Nein), und beide Prozesse mit Ende."

Die KI verwendet batch_create, um alle Symbole und Verbindungslinien in einem einzigen Rückgängig-Schritt zu platzieren.

Vorhandenes Diagramm ändern

„Ändere die Füllfarbe aller Rechtecke zu Blau und mache den Text fett."

Die KI liest Ihre Elemente mit get_elements und aktualisiert dann jedes mit update_element.

Auto-Layout

„Wende ein Layout von oben nach unten mit 60px Abstand zwischen den Zeilen an."

Die KI ruft apply_layout mit Ihrer bevorzugten Richtung und Abstand auf.

Tipps

  • Beginnen Sie mit einer Beschreibung — je genauer Sie sind, desto besser das Ergebnis
  • Iterieren Sie — bitten Sie die KI, Farben, Beschriftungen oder das Layout nach der ersten Erstellung anzupassen
  • Rückgängig machen — alle KI-Änderungen unterstützen Cmd+Z
  • Notationssymbole verwenden — bitten Sie die KI, bestimmte Notationspakete für einheitliche Gestaltung zu verwenden
  • Stapelverarbeitung ist besser — für neue Diagramme erstellt die KI alles in einem Schritt, sodass Rückgängig das Gesamte zurücksetzt