Next AI Draw.io

Next AI Draw.io

Create and edit draw.io diagrams with AI using natural language.

Next AI Draw.io is an AI-powered draw.io diagram tool. You can ask it to create flowcharts, system architecture diagrams, cloud architecture diagrams, and product workflows, then keep editing the diagram through chat.

This guide shows one thing: how to change the AI API settings in Next AI Draw.io to TokenMix. After that, model requests from Next AI Draw.io will go through TokenMix, and you can use one TokenMix API key to call models supported by TokenMix.

Next AI Draw.io also provides an MCP Server. After setup, agent tools such as Claude Code, Cursor, and VS Code can call it to create or edit draw.io diagrams. For most users, first connect the web app to TokenMix with the steps below, then configure MCP later if needed.

Before You Start

You need:

  1. A TokenMix account.
  2. A TokenMix API key.
  3. A model ID supported by TokenMix.

If you do not have an API key yet, sign in to TokenMix, open the API Key page in the dashboard, and create a new key. Copy the full key. It usually starts with sk-tm-.

For the model value, use the model ID shown in the TokenMix model list. In this guide, <model-short-id> means the model ID you should replace.

Step 1: Open Next AI Draw.io

You can use the official online version or your own self-hosted version.

Online version:

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

After opening the page, you will see the chat panel and the draw.io canvas. The setting we need is in the chat or model settings area.

Step 2: Open Model Settings

Find the settings button in the chat panel. It is usually near the input box or the model selector.

In settings, look for AI Provider, API Key, Base URL, and Model.

If there are many providers, do not choose OpenRouter or AWS Bedrock. Choose:

OpenAI

or:

OpenAI Compatible

This works because the OpenAI provider in Next AI Draw.io supports a custom Base URL, which can point to TokenMix's OpenAI-compatible API.

Step 3: Enter TokenMix Settings

Use these values:

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

Important details:

  1. Use https://api.tokenmix.ai/v1 as the Base URL. Do not add /chat/completions.
  2. Make sure the API key has no extra spaces.
  3. Model must be a model ID supported by TokenMix.
  4. Optional fields such as Organization or Project can be left empty.

Save the settings.

Step 4: Send a Test Prompt

Use this prompt:

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.

If the setup is correct, Next AI Draw.io will call the model and generate a diagram on the canvas. The first result may take a little time because the model needs to output draw.io XML, which is longer than a normal chat answer.

Step 5: Check That It Worked

You should see:

  1. The chat panel starts streaming a response.
  2. A diagram appears on the canvas.
  3. The diagram includes users, frontend, API services, database, cache, object storage, and third-party APIs.
  4. The request appears in your TokenMix dashboard logs.

If you see these, Next AI Draw.io is connected to TokenMix.

Model Recommendation

Next AI Draw.io is not a simple chat app. It needs the model to generate valid draw.io XML, so the model should be good at long output, structured generation, and following instructions.

For quick testing, you can start with a cheaper model. For complex architecture diagrams, use a stronger model.

Troubleshooting

401 or Authentication Failed

The API key is usually wrong. Check that it is complete, starts with sk-tm-, has no extra spaces, and that your TokenMix account has enough balance.

Model Not Found

The Model value is usually wrong. Copy a model ID from the TokenMix model list.

Request Failed or No Response

Check the Base URL. Correct:

https://api.tokenmix.ai/v1

Do not use:

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

The Diagram Is Incomplete

This is usually caused by model capability or output length, not the API address. Use a stronger model or split the diagram into smaller steps.

Optional: Self-Hosting with TokenMix

If you self-host Next AI Draw.io, you can set TokenMix with environment variables:

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

Summary

Choose OpenAI or OpenAI Compatible in Next AI Draw.io, set Base URL to https://api.tokenmix.ai/v1, enter your TokenMix sk-tm-... API key, and use a TokenMix model ID. Then Next AI Draw.io can generate draw.io diagrams through TokenMix.