Next AI Draw.io では、AI とチャットしながら draw.io の図を描いて編集できます。描きたい図を伝えると AI が本物の draw.io キャンバスに描き、そのあとは手で直したり、変更を頼んだりして作業を続けられます。AI の変更はすべて枠で示され、復元できるバージョンとして保存されます。

ダイアグラムを説明するか、ファイルをアップロード...

3 つの使い方

使う場所	内容	始め方
ブラウザで	next-ai-drawio.jiang.jp のエディタです。インストールは不要で、自分の API キーを追加するとデモの 1 日の上限がなくなります	エディタを開く
デスクトップで	同じアプリを Windows、macOS、Linux で使えます	最新リリース
AI エージェントから	MCP サーバーです。Claude Code、Cursor、Codex、VS Code が、プロジェクトのファイルをもとに、ブラウザの同じキャンバスに描きます	Claude Code から使う

できること

生成：描きたい図を言葉で伝えるか、スクリーンショット、ホワイトボードの写真、PDF、Web ページから始めます。
手で編集：キャンバスは draw.io エディタです。draw.io と同じように図形を移動したり、スタイルを変えたり、追加したりできます。
AI で編集：図形を選んでその図形だけの変更を頼むことも、図全体の変更を頼むこともできます。AI は先に手での編集を読み取ります。
元に戻す：AI の変更はすべてチャット内のバージョンカードになります。最新の変更を取り消したり、バージョンをキャンバスと比較したり、古いバージョンを復元したりできます。
エクスポート：draw.io で編集を続けるなら .drawio ファイルとして保存し、PNG や SVG にもエクスポートできます。

仕組み

図の実体は draw.io の XML です。アプリはリクエストと現在の図を、選んだ AI モデルに送ります。モデルは新しい XML か変更した XML を返し、キャンバスは届いた部分から順に表示します。draw.io エディタはアプリに同梱されているので、アプリはエディタを直接操作し、手での編集を読み取れます。

アプリは次の技術で作られています。

Next.js：ページと API
Vercel AI SDK（ai と @ai-sdk/*）：多くの AI プロバイダーからの回答のストリーミング
draw.io：エディタ

AI プロバイダー

デモサイトには 1 日の利用上限があります。設定で別のプロバイダーを選び、自分のキーを入力できます。キーはブラウザに保存され、サーバーには保存されません。アプリを自分でホストする場合は、環境変数でプロバイダーを設定します。詳しくは AI プロバイダーを参照してください。

概要

3 つの使い方

できること

仕組み

AI プロバイダー

次のステップ