Integrazione AI (Server MCP)

Diagrammix include un server MCP (Model Context Protocol) integrato che consente agli assistenti AI come Claude e Codex di leggere e modificare i tuoi diagrammi direttamente. Descrivi ciò di cui hai bisogno in linguaggio naturale e l'AI posiziona simboli, connettori e layout sulla tela per te.

Cosa Può Fare l'AI?

  • Creare diagrammi da una descrizione — chiedi un diagramma di flusso, una topologia di rete o un organigramma e lo otterrai sulla tela all'istante
  • Leggere il tuo documento — l'AI vede le tue forme, connettori, livelli e stili attuali
  • Modificare elementi esistenti — aggiorna testo, colori, posizioni o instradamento dei connettori
  • Operazioni in blocco — crea interi diagrammi con simboli e connettori in un unico passaggio
  • Layout automatico e allineamento — organizza gli elementi con comandi in linguaggio naturale
  • Esportazione — genera output SVG su richiesta

Requisiti

  • Diagrammix PRO (acquisto una tantum)
  • Diagrammix deve essere in esecuzione con il server MCP abilitato
  • Almeno un documento diagramma deve essere aperto
  • Il client AI e Diagrammix devono essere sulla stessa macchina (localhost)
  • Node.js 18+ richiesto per Claude Desktop (per il bridge mcp-remote)

Configurazione

1. Abilitare il server MCP

  1. Apri Diagrammix
  2. Vai su Diagrammix > Settings (o premi Cmd+,)
  3. Passa alla scheda AI Integration
  4. Attiva Enable AI Integration (MCP Server)

Il server si avvia su http://localhost:8420/mcp.

2. Configurare Claude Desktop

Claude Desktop utilizza il trasporto stdio, quindi richiede il bridge mcp-remote (Node.js 18+).

  1. Fai clic su Copy Config nelle Impostazioni di Diagrammix per copiare la configurazione negli appunti
  2. Apri il file di configurazione di Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
  3. Incolla la configurazione, oppure aggiungi manualmente:
{
  "mcpServers": {
    "diagrammix": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://localhost:8420/mcp"]
    }
  }
}

Nota: Se usi nvm, il pulsante Copy Config rileva la tua installazione di Node.js e genera una configurazione con il percorso completo a npx e la variabile d'ambiente PATH corretta.

  1. Riavvia Claude Desktop. Gli strumenti di Diagrammix appariranno nella chat.

3. Configurare Claude Code (CLI)

Aggiungi al file .mcp.json del tuo progetto o globalmente in ~/.claude/mcp.json:

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

Claude Code supporta Streamable HTTP nativamente — nessun bridge necessario.

4. Configurare Codex

  1. Apri le impostazioni di Codex > MCP servers
  2. Fai clic su Connect to a custom MCP
  3. Imposta Name su Diagrammix
  4. Seleziona la scheda Streamable HTTP
  5. Inserisci l'URL: http://localhost:8420/mcp
  6. Fai clic su Save

5. Altri client MCP

Qualsiasi client compatibile con MCP può connettersi usando:

  • Trasporto: Streamable HTTP
  • Endpoint: http://localhost:8420/mcp
  • Protocollo: JSON-RPC 2.0 su HTTP POST

Nota: ChatGPT Desktop richiede HTTPS e non supporta direttamente le connessioni localhost.

Esempi di Utilizzo

Creare un diagramma di flusso

"Crea un diagramma di flusso con Inizio, Decisione, Processo A, Processo B e Fine. Collega Inizio a Decisione, Decisione a Processo A (Sì) e Processo B (No), e entrambi i processi a Fine."

L'AI utilizzerà batch_create per posizionare tutti i simboli e i connettori in un unico passaggio annullabile.

Modificare un diagramma esistente

"Cambia il colore di riempimento di tutti i rettangoli in blu e rendi il testo in grassetto."

L'AI legge i tuoi elementi con get_elements, poi aggiorna ciascuno con update_element.

Layout automatico

"Applica un layout dall'alto verso il basso con 60px di spaziatura tra le righe."

L'AI chiama apply_layout con la direzione e la spaziatura preferite.

Suggerimenti

  • Inizia con una descrizione — più sei specifico, migliore sarà il risultato
  • Itera — chiedi all'AI di regolare colori, etichette o layout dopo la creazione iniziale
  • Annulla liberamente — tutte le modifiche dell'AI supportano l'annullamento con Cmd+Z
  • Usa i simboli di notazione — chiedi all'AI di usare pacchetti di notazione specifici per uno stile coerente
  • Il blocco è meglio — per i nuovi diagrammi, l'AI crea tutto in un unico passaggio così l'annullamento ripristina l'intero insieme