Dayuan Jiang
458d8050cc
Every fact about a provider lives in one record in lib/providers.ts (SDK kind, credential kind, env var prefix, default URL, picker group, four-language notes, and a short model list for the six providers that cannot list models). The thirteen tables keyed by provider name are gone. resolveEndpoint decides whose key a call uses and where it goes; usesServerCredentials reads its answer instead of mirroring getAIModel's branches; serverCredentialError holds the server credential check once. The UI, the connection test and the routes read the record's credential and sdk fields instead of comparing provider names (44 such checks before, 6 after, in the admin panel's fixed-variable branches). Intended behavior changes: providers that can list their models have no hand-written list; the settings dialog fetches the live list in the background once credentials are entered for a provider without models and offers it behind "Browse models". Azure has no placeholder default URL (old entries that hold it still count as unset); the base URL field of Azure and of the new "custom" OpenAI-compatible preset (CUSTOM_API_KEY, CUSTOM_BASE_URL) is labelled required. The connection test answers 400 for an unknown provider name; prototype names are refused everywhere. Provider lists in error messages and the admin "add provider" dropdown follow the picker's order. Also fixed, from before the refactor: the redirect guard drops x-access-code on cross-origin redirects, and edgeOneEndpoint accepts the Origin header only when it matches Host or X-Forwarded-Host. Verification: a behavior snapshot of getAIModel's SDK factory calls and the quota functions over 25 providers, 22 client override shapes and 9 server environments (5843 rows), recorded on the old code and unchanged apart from the intended changes; 752 unit tests, 65 provider e2e tests, tsc, biome, next build. Reviewed by five models from one brief; their findings and the resulting fixes are recorded in docs/plans/2026-10-provider-refactor.md.
11 KiB
Next AI Draw.io
AI とチャットしながら draw.io のダイアグラムを描き、直す。
https://github.com/user-attachments/assets/66b9f12f-219f-4d62-acc0-0725e6850eec
欲しいダイアグラムを一文で伝えると、AI が本物の draw.io キャンバスに描きます。普通の draw.io ファイルと同じように手で直すことも、図形をいくつか選んで AI に変更を頼むこともできます。AI の変更はすべてバージョンとして残り、比較・復元・取り消しができます。結果は .drawio、.png、.svg で書き出せます。
Web アプリ、Windows / macOS / Linux 向けデスクトップアプリ、そして Claude Code、Cursor、VS Code などの AI エージェントから呼び出せる MCP サーバーとして使えます。
特長
描く
- アーキテクチャ図、フローチャート、シーケンス図などを一文から生成。AWS、Azure、GCP、Kubernetes のアイコンライブラリを内蔵
- コネクタに流れるアニメーションを付けられる
- スクリーンショットや手描きの図をアップロードすると AI が描き直す。PDF、Markdown、コードなどのテキストファイルからも内容を図にできる
直す
- チャットで修正：変更はストリーミングでキャンバスに反映され、AI が変更した図形はハイライト表示
- 選択して頼む：キャンバスで図形を選ぶと、AI はその図形だけを変更
- バージョンと取り消し：AI の変更ごとにサムネイル付きのバージョンカードが残り、キャンバスと比較・復元・取り消しができる。キャンバス上の Ctrl+Z でも AI の変更を一度で戻せる
- ただの draw.io ダイアグラム：ダブルクリックで名前を変え、ドラッグし、スタイルを変え、複数ページを使い、いつでも
.drawio、.png、.svg、.drawio.svgに書き出せる
使う
- 24 のモデルプロバイダーに対応。自分の API キーをブラウザに入力でき、キーは端末内にだけ保存される
- 推論するモデルは思考過程を表示
- ダークモード。UI は英語、簡体字中国語、繁体字中国語、日本語に対応
例
|
アニメーションコネクタ付き Transformer アーキテクチャ Prompt: Give me a animated connector diagram of transformer's architecture. 
|
|
|
RAG アーキテクチャ Prompt: Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion 
|
React と AWS による認証フロー Prompt: Generate authentication process using React with AWS. Use Serverless architecture. 
|
|
オープンイノベーションモデル Prompt: Create visualization of Henry Chesbrough's Open Innovation model. 
|
猫のスケッチ Prompt: Draw a cute cat for me. 
|
使い方
オンラインデモ
next-ai-drawio.jiang.jp を開けばすぐ使えます。インストールは不要です。デモサイトには利用上限があります。チャットパネルの設定アイコンから自分のプロバイダーと API キーを入力すると上限なしで使えます。キーはブラウザ内にだけ保存され、サーバーには送られません。
デスクトップアプリ
Releases ページ から Windows、macOS、Linux 向けのインストーラーをダウンロードしてください。
AI エージェントから使う（MCP）
https://github.com/user-attachments/assets/6f53a67b-ab21-4113-9fee-7fb32f9de678
MCP（Model Context Protocol、AI エージェントが外部ツールを呼び出すためのプロトコル）を通して、Claude Desktop、Cursor、VS Code などから直接 draw.io のダイアグラムを描けます。クライアントの MCP 設定に次を追加します。
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
Claude Code ならコマンド一つです。
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
あとは AI に「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを描いて」と頼めば、描かれていく様子がブラウザに表示されます。MCP サーバーには Web アプリの作図機能のほとんどが入っています。
- 同じ作図ルールとアイコンライブラリ（AWS、Azure、GCP、Kubernetes など）
- プレビューは Web アプリと同じキャンバス。AI の変更には印が付き、Ctrl+Z 一回で元に戻せ、選択中の図形を AI が読み取れる
- draw.io エディターはパッケージに同梱されているので、インストール後はオフラインでもプレビューが動く（外部の draw.io を使うなら
DRAWIO_BASE_URLを設定する） - スクリーンショットツール。AI が描いた結果を確認して自分で直せる
- バージョン履歴、複数ページのダイアグラム、
.drawio、.png、.svg、.drawio.svgでのダウンロード ~/.next-ai-drawio/への自動保存。再起動後も続きから描ける- AI に元に戻す操作を頼める。独自の作図ルールは
~/.next-ai-drawio/instructions.mdに書ける
VS Code、Cursor などの設定は MCP サーバーの README を参照してください。
自分でホストする
ローカルで動かす
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local # プロバイダーと API キーを記入。下の「モデルとプロバイダー」を参照
npm run dev
http://localhost:6002 を開きます。
ワンクリックデプロイ
| プラットフォーム | 方法 |
|---|---|
| Tencent EdgeOne Pages |  デプロイすると DeepSeek モデルの毎日の無料クォータ も付きます |
| Vercel | .env.local と同じ環境変数を Vercel のダッシュボードで設定してください |
| Cloudflare Workers | Cloudflare デプロイガイド |
| Docker | Docker ガイド |
| オフラインまたは社内ネットワーク | オフラインデプロイ |
モデルとプロバイダー
AWS Bedrock（既定）、OpenAI、Anthropic、Google AI、Google Vertex AI、Azure OpenAI、Ollama、OpenRouter、AIHubMix、DeepSeek、SiliconFlow、SGLang、Vercel AI Gateway、Tencent EdgeOne、ByteDance Doubao、ModelScope、Zhipu GLM、Qwen、Qiniu、Kimi、MiniMax、Novita、Xiaomi MiMo、Atlas Cloud、および任意の URL を使える OpenAI 互換プリセット（vLLM、LM Studio、ゲートウェイ）の 25 プロバイダーに対応しています。各プロバイダーの環境変数と注意点はプロバイダー設定ガイドにあります。
どのモデルを選ぶか：厳密な形式の長いテキスト（draw.io の XML）を生成するタスクなので、能力の高いモデルを選んでください。小さなモデルは壊れた図を出しがちです。
複数モデルと管理パネル：AI_MODEL にモデル ID をカンマ区切りで並べるか、AI_MODELS_CONFIG 環境変数または ai-models.json ファイルで複数プロバイダーのモデルを設定すると、全ユーザーが自分のキーなしで使えます。ADMIN_PASSWORD を設定して /admin を開くと、モデル、アクセスコード、機能の切り替え、オブザーバビリティ、クォータを Web 画面から管理できます。管理パネルガイドを参照してください。
サポート
- 質問や提案：GitHub Issue を立てるか、me[at]jiang.jp までメールしてください
- よくある問題：FAQ
- このプロジェクトが役に立ったら、デモサイトの運営のためにスポンサーをご検討ください