Intégration IA (Serveur MCP)

Diagrammix inclut un serveur MCP (Model Context Protocol) intégré qui permet aux assistants IA comme Claude et Codex de lire et modifier vos diagrammes directement. Décrivez ce dont vous avez besoin en langage naturel, et l'IA place les symboles, les connecteurs et les mises en page sur le canevas pour vous.

Que peut faire l'IA ?

  • Créer des diagrammes à partir d'une description — demandez un diagramme de flux, une topologie réseau ou un organigramme et obtenez-le instantanément sur le canevas
  • Créer des cartes mentales — décrivez un sujet et obtenez une carte mentale structurée
  • Lire votre document — l'IA voit vos formes, connecteurs, calques et styles actuels
  • Modifier les éléments existants — mettez à jour le texte, les couleurs, les positions ou le routage des connecteurs
  • Opérations par lot — créez des diagrammes complets avec symboles et connecteurs en une seule étape
  • Mise en page automatique et alignement — organisez les éléments avec des commandes en langage naturel
  • Reproduire un style depuis une image — transmettez à l'IA une image de référence et elle crée un modèle personnalisé et un style correspondants
  • Export — générez une sortie SVG à la demande

Prérequis

  • Diagrammix PRO (achat unique)
  • Diagrammix doit être en cours d'exécution avec le serveur MCP activé
  • Au moins un document de diagramme doit être ouvert
  • Le client IA et Diagrammix doivent être sur la même machine (localhost)

Aucun Node.js, npx ou mcp-remote n'est nécessaire — Diagrammix intègre un assistant natif pour les clients qui en ont besoin.

Configuration

1. Activer le serveur MCP

  1. Ouvrez Diagrammix
  2. Allez dans Diagrammix > Réglages (ou appuyez sur Cmd+,)
  3. Passez à l'onglet Intégration IA
  4. Activez Activer l'intégration IA (Serveur MCP)

Le serveur démarre sur http://localhost:8420/mcp.

2. Configurer Claude Desktop

Claude Desktop se connecte via stdio. Diagrammix fournit un assistant stdio natif intégré au bundle de l'application, donc aucun Node.js, npx ou mcp-remote n'est requis.

  1. Cliquez sur Copier la configuration dans les Réglages de Diagrammix — cela renseigne le chemin exact vers l'assistant intégré pour votre installation
  2. Ouvrez le fichier de configuration de Claude Desktop : ~/Library/Application Support/Claude/claude_desktop_config.json
  3. Collez la configuration. Elle ressemble à ceci — le chemin command pointe vers l'assistant à l'intérieur de l'emplacement où Diagrammix.app est installé :
{
  "mcpServers": {
    "diagrammix": {
      "command": "/Applications/Diagrammix.app/Contents/MacOS/diagrammix-mcp-stdio",
      "args": ["--url", "http://localhost:8420/mcp"]
    }
  }
}

Remarque : Utilisez Copier la configuration plutôt que de saisir le chemin à la main — il pointe vers l'assistant à l'intérieur de votre bundle d'application réel, que Diagrammix maintient signé et à jour.

  1. Redémarrez Claude Desktop. Les outils Diagrammix apparaîtront dans le chat.

3. Configurer Claude Code (CLI)

Ajoutez au fichier .mcp.json de votre projet ou globalement dans ~/.claude/mcp.json :

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

Claude Code prend en charge le HTTP Streamable nativement — aucun pont n'est nécessaire.

4. Configurer Codex

Codex (l'application, la CLI et l'extension IDE partagent une seule configuration MCP) se connecte via Streamable HTTP. Configurez-le de l'une ou l'autre manière :

Option A — config.toml. Cliquez sur Copier la configuration dans la section Codex des Réglages de Diagrammix et collez dans ~/.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

Option B — CLI. Cliquez sur Copier la commande dans les Réglages de Diagrammix, ou exécutez :

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

5. Autres clients MCP

Tout client compatible MCP peut se connecter en utilisant :

  • Transport : Streamable HTTP
  • Point de terminaison : http://localhost:8420/mcp
  • Protocole : JSON-RPC 2.0 sur HTTP POST

Remarque : ChatGPT Desktop nécessite HTTPS et ne prend pas en charge les connexions localhost directement.

Exemples d'utilisation

Créer un diagramme de flux

« Créez un diagramme de flux avec Début, Décision, Processus A, Processus B et Fin. Connectez Début à Décision, Décision à Processus A (Oui) et Processus B (Non), et les deux processus à Fin. »

L'IA utilisera batch_create pour placer tous les symboles et connecteurs en une seule étape annulable.

Modifier un diagramme existant

« Changez la couleur de remplissage de tous les rectangles en bleu et mettez le texte en gras. »

L'IA lit vos éléments avec get_elements, puis met à jour chacun d'eux avec update_element.

Mise en page automatique

« Appliquez une mise en page de haut en bas avec un espacement de 60px entre les lignes. »

L'IA appelle apply_layout avec la direction et l'espacement que vous préférez.

Reproduire un style depuis une image

« Voici une capture d'écran du style de diagramme de notre marque. Recréez ces formes et ces couleurs sous forme de modèle personnalisé et de style que je peux réutiliser. »

Transmettez à l'assistant une image de référence et il peut générer des formes SVG et des têtes de flèches correspondantes, les assembler en un modèle personnalisé et définir un style personnalisé correspondant. Il utilise des outils tels que create_custom_template, add_custom_shape, add_custom_arrowhead et create_style, de sorte que le résultat est un pack réutilisable — pas un dessin ponctuel.

Conseils

  • Commencez par une description — plus vous êtes précis, meilleur sera le résultat
  • Itérez — demandez à l'IA d'ajuster les couleurs, les étiquettes ou la mise en page après la création initiale
  • Annulez librement — toutes les modifications de l'IA supportent l'annulation par Cmd+Z
  • Utilisez les symboles de notation — demandez à l'IA d'utiliser des packs de notation spécifiques pour un style cohérent
  • Le lot est préférable — pour les nouveaux diagrammes, l'IA crée tout en une seule étape pour que l'annulation revienne sur l'ensemble