Next AI Draw.io

Next AI Draw.io

Créez et modifiez des diagrammes draw.io avec l’IA en langage naturel.

Next AI Draw.io est un outil qui permet de créer des diagrammes draw.io avec l'IA. Vous pouvez lui demander de générer des organigrammes, des architectures système, des architectures cloud ou des flux produit, puis continuer à modifier le diagramme par chat.

Ce guide explique une seule chose : comment remplacer l'API IA de Next AI Draw.io par TokenMix. Après la configuration, les appels modèle de Next AI Draw.io passeront par TokenMix, avec une clé API TokenMix.

Next AI Draw.io fournit aussi un MCP Server. Après configuration, des outils agent compatibles MCP comme Claude Code, Cursor ou VS Code peuvent l'utiliser pour créer ou modifier des diagrammes draw.io. Pour la plupart des utilisateurs, commencez par connecter l'application web à TokenMix avec les étapes ci-dessous, puis configurez MCP plus tard si nécessaire.

Avant de commencer

Vous avez besoin de :

  1. Un compte TokenMix.
  2. Une clé API TokenMix.
  3. Un ID de modèle disponible sur TokenMix.

Si vous n'avez pas encore de clé API, connectez-vous à TokenMix, ouvrez la page API Key dans le tableau de bord, puis créez une nouvelle clé. Copiez la clé complète. Elle commence généralement par sk-tm-.

Pour le champ Model, utilisez l'ID affiché dans la liste des modèles TokenMix. Dans ce guide, <model-short-id> représente l'ID de modèle à remplacer.

Étape 1 : ouvrir Next AI Draw.io

Vous pouvez utiliser la version officielle en ligne ou votre propre version auto-hébergée.

Version en ligne :

https://next-ai-drawio.jiang.jp/

Après ouverture, vous verrez le panneau de chat et le canevas draw.io. Le réglage à modifier se trouve dans les paramètres du chat ou du modèle.

Étape 2 : ouvrir les paramètres du modèle

Trouvez le bouton de réglages dans le panneau de chat. Il se trouve généralement près du champ de saisie ou du sélecteur de modèle.

Dans les paramètres, cherchez AI Provider, API Key, Base URL et Model.

S'il y a beaucoup de providers, ne choisissez pas OpenRouter ni AWS Bedrock. Choisissez :

OpenAI

ou :

OpenAI Compatible

Le provider OpenAI de Next AI Draw.io accepte une Base URL personnalisée, ce qui permet d'utiliser l'API compatible OpenAI de TokenMix.

Étape 3 : saisir les paramètres TokenMix

Utilisez ces valeurs :

Provider: OpenAI ou OpenAI Compatible
Base URL: https://api.tokenmix.ai/v1
API Key: sk-tm-your-tokenmix-key
Model: <model-short-id>

Points importants :

  1. Utilisez https://api.tokenmix.ai/v1 comme Base URL. N'ajoutez pas /chat/completions.
  2. Vérifiez qu'il n'y a pas d'espace avant ou après la clé API.
  3. Model doit être un ID de modèle pris en charge par TokenMix.
  4. Les champs facultatifs comme Organization ou Project peuvent rester vides.

Enregistrez les paramètres.

Étape 4 : envoyer un prompt de test

Utilisez ce prompt en anglais :

Generate a classic frontend-backend separated architecture diagram. Include users, browser, frontend app, API gateway, backend services, database, Redis cache, object storage, and third-party APIs. Use arrows to show the request flow.

Si la configuration est correcte, Next AI Draw.io appellera le modèle et générera un diagramme sur le canevas. La première génération peut prendre un peu de temps, car le modèle doit produire du XML draw.io, plus long qu'une réponse de chat classique.

Étape 5 : vérifier que tout fonctionne

Vous devriez voir :

  1. Une réponse qui commence dans le panneau de chat.
  2. Un diagramme qui apparaît sur le canevas.
  3. Des noeuds comme utilisateurs, frontend, services API, base de données, cache, stockage objet et API tierces.
  4. Une requête correspondante dans les logs du tableau de bord TokenMix.

Si c'est le cas, Next AI Draw.io est connecté à TokenMix.

Choisir un modèle

Next AI Draw.io n'est pas une simple application de chat. Le modèle doit générer du XML draw.io valide, donc il doit être bon en sortie longue, en génération structurée et en suivi d'instructions.

Pour un test rapide, vous pouvez commencer avec un modèle moins coûteux. Pour des diagrammes d'architecture complexes, utilisez un modèle plus puissant.

Problèmes fréquents

401 ou échec d'authentification

La clé API est souvent incorrecte. Vérifiez qu'elle est complète, qu'elle commence par sk-tm-, qu'elle n'a pas d'espaces en trop et que votre compte TokenMix a assez de solde.

Modèle introuvable

La valeur Model est souvent incorrecte. Copiez un ID de modèle depuis la liste des modèles TokenMix.

Requête échouée ou aucune réponse

Vérifiez la Base URL. Valeur correcte :

https://api.tokenmix.ai/v1

N'utilisez pas :

https://api.tokenmix.ai
https://api.tokenmix.ai/v1/chat/completions
https://api.tokenmix.ai/api/v1

Le diagramme est incomplet

Ce problème vient souvent de la capacité du modèle ou de la longueur de sortie, pas de l'adresse API. Utilisez un modèle plus puissant ou divisez la demande en étapes plus petites.

Optionnel : auto-hébergement avec TokenMix

Si vous auto-hébergez Next AI Draw.io, vous pouvez configurer TokenMix avec des variables d'environnement :

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=<model-short-id> \
  -e OPENAI_API_KEY=sk-tm-your-tokenmix-key \
  -e OPENAI_BASE_URL=https://api.tokenmix.ai/v1 \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

Résumé

Dans Next AI Draw.io, choisissez OpenAI ou OpenAI Compatible, mettez Base URL sur https://api.tokenmix.ai/v1, entrez votre clé API TokenMix sk-tm-..., puis utilisez un ID de modèle TokenMix. Vous pourrez alors générer des diagrammes draw.io via TokenMix.