AI Diagram Maker MCP

officiel

Serveur MCP pour AI Diagram Maker — générez de magnifiques diagrammes de génie logiciel directement dans Cursor, Claude Desktop, Claude Code ou tout agent IA compatible MCP.

GitHub

Documentation

Serveur MCP AI Diagram Maker

Serveur MCP pour AI Diagram Maker — générez de magnifiques diagrammes d'ingénierie logicielle directement dans Cursor, Claude Desktop, Claude Code ou tout agent IA compatible MCP.

ai-diagram-maker-mcp 🌐 ☁️ - Générez des diagrammes logiciels professionnels à partir de descriptions en langage naturel.

Fonctionnalités

5 outils couvrant tous les types d'entrée : texte en langage naturel, code, diagramme ASCII, images et Mermaid
Rendu en ligne — les diagrammes apparaissent directement dans le chat via l'interface utilisateur MCP Apps, sans téléchargement
URL du diagramme dans les réponses — ouvrez-la dans votre navigateur pour visualiser et modifier le diagramme
5 types de diagrammes : organigramme, séquence, ERD, architecture système, UML
Prend en charge les transports stdio (local) et HTTP/HTTP diffusable (distant)

Prérequis

Node.js 18+
Un compte AI Diagram Maker et une clé API

Serveur MCP hébergé

Le point de terminaison MCP public est https://mcp.aidiagrammaker.com/mcp (HTTP diffusable). Rien à installer pour cette option.

Authentification (HTTP)

Pour les clients HTTP distants, envoyez votre clé API à chaque requête — pas via les variables d'environnement :

X-ADM-API-Key: <your_api_key> (recommandé), ou
Authorization: Bearer <your_api_key>

Utilisez la clé API de votre compte AI Diagram Maker (voir Prérequis).

Exemple JSON pour serveur distant

Intégrez ceci dans la configuration MCP de votre client (remplacez l'espace réservé de la clé API) :

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

Installation

Option A — serveur hébergé (recommandé)

Utilisez l'exemple JSON pour serveur distant ci-dessus et connectez-le à votre client en utilisant la Configuration du client MCP. Aucune installation globale.

Option B — exécuter localement avec npx

Rien à installer de manière permanente — npx exécute le paquet à la demande. Le nom du paquet est ai-diagram-maker-mcp ; ajoutez @latest si vous voulez que chaque invocation résolve la version la plus récente (recommandé pour les exécutions ponctuelles et claude mcp add).

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

Configuration du client MCP

Cursor

Distant (recommandé)

Ajoutez à ~/.cursor/mcp.json ou Paramètres → MCP en utilisant l'exemple JSON pour serveur distant. Aucune variable d'environnement n'est requise pour cette configuration.

Local (stdio)

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

Optionnel : ajoutez "ADM_DEBUG": "1" à env pour la journalisation de débogage — voir Variables d'environnement.

Claude Desktop

Ajoutez à ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) ou %APPDATA%\Claude\claude_desktop_config.json (Windows) :

{
  "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

Transport HTTP (local ou auto-hébergé)

Pour exécuter vous-même un serveur HTTP (même authentification par en-tête que Authentification (HTTP)) :

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

Le serveur écoute sur $PORT ou 3001. Pointez les clients vers /mcp et envoyez la clé API à chaque requête en utilisant les en-têtes ci-dessus.

Variables d'environnement

Variable	Requise	Valeur par défaut	Description
`ADM_API_KEY`	Oui (stdio uniquement)	—	Votre clé API AI Diagram Maker (transport stdio uniquement ; les clients HTTP distants utilisent les en-têtes — voir Authentification (HTTP))
`ADM_BASE_URL`	Non	`https://app.aidiagrammaker.com`	Remplacement pour l'API locale/staging ; également utilisé comme base pour les URL de diagrammes dans les réponses des outils
`ADM_DEBUG`	Non	—	Définir sur `1`, `true` ou `yes` pour journaliser les paramètres de requête de l'agent IA et la charge utile envoyée à l'API AI Diagram Maker. Les journaux vont vers stderr. Dans Cursor, ouvrez Sortie, choisissez le canal MCP ou ai-diagram-maker pour lire les journaux du serveur.

Outils

`generate_diagram_from_text`

Générer un diagramme à partir d'une description en langage naturel.

Paramètre	Type	Requis	Description
`content`	string	Oui	Description en langage naturel du diagramme
`diagramType`	enum	Non	flowchart, sequence, erd, system_architecture, uml
`prompt`	string	Non	Instruction supplémentaire de style/disposition

Exemples de prompts :

"Créez une architecture de microservices avec passerelle API, service d'authentification, service utilisateur et base de données PostgreSQL"
"Dessinez un diagramme de séquence pour le flux de connexion utilisateur avec génération de jeton JWT"
"adm montrez le pipeline CI/CD pour une application Next.js déployée sur Vercel"

`generate_diagram_from_json`

Convertir une structure JSON en diagramme (idéal pour les réponses API, schémas de base de données, fichiers de configuration).

Paramètre	Type	Requis	Description
`content`	string	Oui	Chaîne JSON à visualiser
`prompt`	string	Non	Comment interpréter le JSON
`diagramType`	enum	Non	Type de diagramme préféré

`generate_diagram_from_ascii`

Convertir de l'art ASCII en un diagramme soigné.

Paramètre	Type	Requis	Description
`content`	string	Oui	Diagramme brut en art ASCII
`prompt`	string	Non	Instructions de rendu
`diagramType`	enum	Non	Type de diagramme préféré

`generate_diagram_from_image`

Convertir une photo de tableau blanc, une capture d'écran ou toute image en un diagramme propre.

Paramètre	Type	Requis	Description
`content`	string	Oui	URL d'image publique ou URI de données base64
`prompt`	string	Non	Ce qu'il faut extraire ou comment effectuer le rendu
`diagramType`	enum	Non	Type de diagramme de sortie préféré

`generate_diagram_from_mermaid`

Convertir une définition de diagramme Mermaid en D2 et retourner une image PNG.

Paramètre	Type	Requis	Description
`content`	string	Oui	Source du diagramme Mermaid (ex. flowchart, sequenceDiagram, erDiagram)
`prompt`	string	Non	Instruction optionnelle de disposition ou de style
`diagramType`	enum	Non	Type de diagramme préféré pour la sortie convertie

Mots-clés déclencheurs

L'agent IA sélectionnera automatiquement le bon outil lorsque vous utilisez des expressions comme :

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

Configuration développeur local

Utilisez ces étapes pour cloner le dépôt, construire localement et exécuter le serveur MCP avec Node.

1. Cloner le dépôt

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

2. Installer les dépendances

npm install

3. (Optionnel) Régénérer le client API

Si vous modifiez la spécification OpenAPI ou la configuration d'AI Diagram Maker, régénérez le client :

npm run generate

4. Construire

npm run build

Ceci compile TypeScript et construit l'interface utilisateur MCP App dans dist/. Le point d'entrée du serveur est dist/index.js.

5. Exécuter le serveur MCP local

stdio (par défaut) — pour une utilisation avec Cursor, Claude Desktop, etc. :

ADM_API_KEY=your_api_key node dist/index.js

Ou utilisez le script npm :

ADM_API_KEY=your_api_key npm start

Transport HTTP — pour les clients distants ou les tests (mêmes en-têtes que Authentification (HTTP)) :

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

Ou :

ADM_API_KEY=your_api_key npm run start:http

Le serveur HTTP écoute sur $PORT (par défaut 3001).

6. Utiliser le serveur local dans Cursor

Pointez Cursor vers votre serveur construit via Paramètres → MCP (ou ~/.cursor/mcp.json) :

{
  "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"
      }
    }
  }
}

Remplacez /absolute/path/to/ai-diagram-maker-mcp par le chemin réel vers votre dépôt cloné. Après avoir modifié la configuration, redémarrez Cursor ou rechargez les serveurs MCP.

Pour la journalisation de débogage, ajoutez "ADM_DEBUG": "1" à env — voir Variables d'environnement.

Licence

MIT