Next AI Draw.io

Next AI Draw.io

Crea y edita diagramas draw.io con IA usando lenguaje natural.

Next AI Draw.io es una herramienta para crear diagramas draw.io con IA. Puedes pedirle que genere flujogramas, diagramas de arquitectura de sistemas, arquitecturas cloud y flujos de producto, y luego seguir editando el diagrama mediante chat.

Esta guía explica una sola cosa: cómo cambiar la API de IA de Next AI Draw.io a TokenMix. Después de configurarlo, las llamadas de modelo de Next AI Draw.io pasarán por TokenMix y podrás usar una API Key de TokenMix para acceder a los modelos compatibles.

Next AI Draw.io también ofrece un MCP Server. Después de configurarlo, herramientas agent compatibles con MCP como Claude Code, Cursor o VS Code pueden usarlo para crear o modificar diagramas draw.io. Para la mayoría de usuarios, primero conviene conectar la app web a TokenMix con los pasos de abajo y configurar MCP más adelante si hace falta.

Antes de empezar

Necesitas:

  1. Una cuenta de TokenMix.
  2. Una API Key de TokenMix.
  3. Un ID de modelo disponible en TokenMix.

Si aún no tienes API Key, inicia sesión en TokenMix, abre la página API Key en el panel y crea una nueva clave. Copia la clave completa. Normalmente empieza por sk-tm-.

Para el campo Model, usa el ID que aparece en la lista de modelos de TokenMix. En esta guía, <model-short-id> representa el ID de modelo que debes reemplazar.

Paso 1: abrir Next AI Draw.io

Puedes usar la versión oficial en línea o una versión autoalojada.

Versión en línea:

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

Al abrir la página verás el panel de chat y el lienzo de draw.io. La configuración que vamos a cambiar está en el área de chat o del modelo.

Paso 2: abrir la configuración del modelo

Busca el botón de configuración en el panel de chat. Normalmente está cerca del cuadro de entrada o del selector de modelo.

En la configuración, busca AI Provider, API Key, Base URL y Model.

Si hay muchos providers, no elijas OpenRouter ni AWS Bedrock. Elige:

OpenAI

o:

OpenAI Compatible

El provider OpenAI de Next AI Draw.io permite una Base URL personalizada, así que puede conectarse a la API compatible con OpenAI de TokenMix.

Paso 3: introducir los valores de TokenMix

Usa estos valores:

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

Detalles importantes:

  1. Usa https://api.tokenmix.ai/v1 como Base URL. No añadas /chat/completions.
  2. Asegúrate de que la API Key no tenga espacios al inicio o al final.
  3. Model debe ser un ID de modelo compatible con TokenMix.
  4. Campos opcionales como Organization o Project pueden dejarse vacíos.

Guarda la configuración.

Paso 4: enviar un prompt de prueba

Usa este prompt en inglés:

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 configuración es correcta, Next AI Draw.io llamará al modelo y generará un diagrama en el lienzo. La primera generación puede tardar un poco, porque el modelo debe producir XML de draw.io, que es más largo que una respuesta normal de chat.

Paso 5: confirmar que funciona

Deberías ver:

  1. El panel de chat empieza a mostrar una respuesta.
  2. Aparece un diagrama en el lienzo.
  3. El diagrama incluye usuarios, frontend, servicios API, base de datos, caché, almacenamiento de objetos y APIs de terceros.
  4. La llamada aparece en los logs del panel de TokenMix.

Si ves esto, Next AI Draw.io ya está conectado a TokenMix.

Elegir modelo

Next AI Draw.io no es una app de chat normal. El modelo debe generar XML draw.io válido, así que conviene usar un modelo fuerte en salidas largas, generación estructurada y seguimiento de instrucciones.

Para una prueba rápida puedes empezar con un modelo más barato. Para diagramas de arquitectura complejos, usa un modelo más potente.

Problemas frecuentes

401 o error de autenticación

Normalmente la API Key está mal. Comprueba que esté completa, que empiece por sk-tm-, que no tenga espacios extra y que tu cuenta de TokenMix tenga saldo suficiente.

Modelo no encontrado

Normalmente el valor de Model está mal. Copia un ID de modelo desde la lista de modelos de TokenMix.

La solicitud falla o no hay respuesta

Comprueba la Base URL. Valor correcto:

https://api.tokenmix.ai/v1

No uses:

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

El diagrama queda incompleto

Suele deberse a la capacidad del modelo o a la longitud de salida, no a la URL de la API. Usa un modelo más fuerte o divide el diagrama en pasos más pequeños.

Opcional: autoalojar con TokenMix

Si autoalojas Next AI Draw.io, puedes configurar TokenMix con variables de entorno:

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

Resumen

En Next AI Draw.io, elige OpenAI u OpenAI Compatible, cambia Base URL a https://api.tokenmix.ai/v1, introduce tu API Key de TokenMix sk-tm-... y usa un ID de modelo de TokenMix. Así podrás generar diagramas draw.io a través de TokenMix.