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
  • Costruire mappe mentali — descrivi un argomento e ottieni una mappa mentale strutturata
  • 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
  • Replicare un aspetto da un'immagine — fornisci all'AI un'immagine di riferimento e costruisce un modello personalizzato e uno stile corrispondenti
  • 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)

Non è necessario alcun Node.js, npx o mcp-remote — Diagrammix include un helper nativo per i client che lo richiedono.

Configurazione

1. Abilitare il Server MCP

  1. Apri Diagrammix
  2. Vai su Diagrammix > Impostazioni (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 si connette tramite stdio. Diagrammix include un helper stdio nativo all'interno del bundle dell'app, quindi non è richiesto alcun Node.js, npx o mcp-remote.

  1. Fai clic su Copy Config nelle Impostazioni di Diagrammix — questo inserisce il percorso esatto dell'helper incluso per la tua installazione
  2. Apri il file di configurazione di Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
  3. Incolla la configurazione. Ha questo aspetto — il percorso command punta all'helper all'interno della posizione in cui è installato Diagrammix.app:
{
  "mcpServers": {
    "diagrammix": {
      "command": "/Applications/Diagrammix.app/Contents/MacOS/diagrammix-mcp-stdio",
      "args": ["--url", "http://localhost:8420/mcp"]
    }
  }
}

Nota: Usa Copy Config invece di digitare il percorso manualmente — punta all'helper all'interno del bundle effettivo della tua app, che Diagrammix mantiene firmato e aggiornato.

  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

Codex (app, CLI ed estensione IDE condividono un'unica configurazione MCP) si connette tramite Streamable HTTP. Configuralo in uno dei due modi:

Opzione A — config.toml. Fai clic su Copy Config nella sezione Codex delle Impostazioni di Diagrammix e incolla in ~/.codex/config.toml:

[mcp_servers.diagrammix]
url = "http://localhost:8420/mcp"
enabled = true
default_tools_approval_mode = "prompt"
startup_timeout_sec = 20
tool_timeout_sec = 60

Opzione B — CLI. Fai clic su Copy Command nelle Impostazioni di Diagrammix, oppure esegui:

codex mcp add diagrammix --url http://localhost:8420/mcp

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.

Replicare un Aspetto da un'Immagine

"Ecco uno screenshot dello stile dei diagrammi del nostro brand. Ricrea queste forme e colori come modello e stile personalizzati che posso riutilizzare."

Fornisci all'assistente un'immagine di riferimento e può generare forme e punte di freccia SVG corrispondenti, assemblarle in un modello personalizzato e definire uno stile personalizzato corrispondente. Usa strumenti come create_custom_template, add_custom_shape, add_custom_arrowhead e create_style, così il risultato è un pacchetto riutilizzabile — non un disegno una tantum.

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