Next AI Draw.io

自然言語で draw.io 図を生成・編集できる AI 作図ツール。

Next AI Draw.io は、AI で draw.io 図を作成できるツールです。自然言語でフローチャート、システム構成図、クラウド構成図、プロダクトフローを生成し、その後もチャットで図を修正できます。

このガイドでは、Next AI Draw.io の AI API 設定を TokenMix に変更する方法だけを説明します。設定後、Next AI Draw.io のモデル呼び出しは TokenMix 経由になり、TokenMix API Key で TokenMix が対応するモデルを利用できます。

Next AI Draw.io は MCP Server も提供しています。設定すると、Claude Code、Cursor、VS Code など MCP 対応の Agent ツールから draw.io 図を作成・編集できます。まずは以下の手順で Web アプリを TokenMix に接続し、必要になったら MCP を設定してください。

事前準備

必要なもの：

TokenMix アカウント。
TokenMix API Key。
TokenMix で利用できるモデル ID。

API Key がない場合は、TokenMix にログインし、ダッシュボードの API Key ページで新しい Key を作成します。Key は完全にコピーしてください。通常は sk-tm- で始まります。

Model には、TokenMix のモデル一覧に表示されているモデル ID を使ってください。このガイドでは <model-short-id> を置き換え用のモデル ID として使います。

Step 1: Next AI Draw.io を開く

公式オンライン版、または自分でデプロイした版を使えます。

オンライン版：

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

ページを開くと、チャット欄と draw.io キャンバスが表示されます。変更するのはチャット側のモデル設定です。

Step 2: モデル設定を開く

チャットパネル内の設定ボタンを探します。通常は入力欄の近く、またはモデル選択の近くにあります。

設定画面で AI Provider、API Key、Base URL、Model を探してください。

Provider がたくさんある場合、OpenRouter や AWS Bedrock は選ばないでください。ここでは次を選びます：

OpenAI

または：

OpenAI Compatible

Next AI Draw.io の OpenAI Provider はカスタム Base URL に対応しているため、TokenMix の OpenAI 互換 API に接続できます。

Step 3: TokenMix の値を入力する

次のように入力します：

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

注意点：

Base URL は https://api.tokenmix.ai/v1 と入力し、末尾に /chat/completions を追加しないでください。
API Key の前後に空白を入れないでください。
Model には TokenMix が対応するモデル ID を入力してください。
Organization や Project などの任意項目は空欄で構いません。

入力後、設定を保存します。

Step 4: テストプロンプトを送る

次の英語プロンプトを入力します：

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.

設定が正しければ、Next AI Draw.io がモデルを呼び出し、キャンバスに図を生成します。draw.io XML を出力するため、通常のチャットより少し時間がかかることがあります。

Step 5: 成功を確認する

成功すると次の状態になります：

チャット欄で応答が始まる。
キャンバスに図が表示される。
ユーザー、フロントエンド、API サービス、データベース、キャッシュ、オブジェクトストレージ、外部 API などのノードが表示される。
TokenMix のダッシュボードのリクエストログに呼び出しが表示される。

これらが確認できれば、Next AI Draw.io は TokenMix に接続されています。

モデル選び

Next AI Draw.io は通常のチャットアプリではありません。正しい draw.io XML を生成する必要があるため、長文出力、構造化出力、指示追従が得意なモデルを選ぶのがおすすめです。

テストだけなら低コストのモデルでも構いません。複雑な構成図を作る場合は、より強いモデルを使ってください。

よくある問題

401 または認証エラー

API Key が間違っている可能性があります。Key が完全か、sk-tm- で始まるか、余分な空白がないか、TokenMix 残高があるかを確認してください。

モデルが見つからない

Model の値が間違っている可能性があります。TokenMix のモデル一覧からモデル ID をコピーしてください。

リクエスト失敗または応答なし

Base URL を確認してください。正しい値：

https://api.tokenmix.ai/v1

次のようには書かないでください：

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

図が途中で終わる

API アドレスではなく、モデル性能や出力長の問題であることが多いです。より強いモデルを使うか、図の要件を小さく分けてください。

オプション：セルフホストで TokenMix を使う

自分で Next AI Draw.io をデプロイする場合は、環境変数で TokenMix を指定できます。

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

まとめ

Next AI Draw.io で OpenAI または OpenAI Compatible を選び、Base URL を https://api.tokenmix.ai/v1 に変更し、TokenMix の sk-tm-... API Key と TokenMix のモデル ID を入力すれば、TokenMix 経由で draw.io 図を生成できます。