Next AI Draw.io（DayuanJiang/next-ai-draw-io）：draw.ioの図をAIとの対話で作成・編集できるツール（MCP対応）

Next AI Draw.io（DayuanJiang/next-ai-draw-io）は、draw.ioの図を、AIとの対話で作成・編集できるオープンソースのツールです。「受付から納品までの流れを図にして」のように文章で指示すると、draw.ioのキャンバス上に図が描かれます。Apache License 2.0で公開されており、Webアプリ、デスクトップアプリ、MCPサーバーの3つの形で使えます。GitHubのトピックページ（mcp-server）では約3.6万スターの表示でした（2026年10月22日時点）。

業務フロー図、システム構成図、手順書の挿絵などを作る機会がある人向けです。READMEによると、フローチャートやシーケンス図のほか、AWS・Azure・GCP・Kubernetesのアイコンを使った構成図も1回の指示で作れます。スクリーンショットや手書きスケッチを読み込んで描き直す機能、PDF・Markdown・コードなどのファイルから図を生成する機能もあります。出力形式は.drawio、.png、.svg、.drawio.svgです。

できること
導入方法
注意点
まとめ

できること

チャットでの修正は、変更箇所が強調表示されながらキャンバスに反映されます。図の一部だけを選択して、その範囲だけをAIに変更させることもできます。AIによる変更はバージョンカードとして残り、比較・復元・取り消しが可能です。Ctrl+Zでも1段階で元に戻せます。名前の変更、ドラッグ、スタイル変更、複数ページといった、通常のdraw.ioとしての手作業の編集も併用できます。

対応するAIプロバイダーは25種類で、AWS Bedrock（既定）、OpenAI、Anthropic、Google AI、Azure OpenAI、Ollama、OpenRouterなどが挙がっています。それ以外はOpenAI互換のプリセット（vLLMやLM Studioなど）で接続します。画面は日本語を含む4言語に対応しています。

導入方法

導入経路は複数あります。手軽な順に、オンラインデモ（next-ai-drawio.jiang.jp）、デスクトップアプリ（GitHubのReleasesからインストーラーを入手）、自分のマシンでの実行、VercelやCloudflare Workersなどへのデプロイです。DockerとオフラインのデプロイはREADMEからリンクされたdocs内に手順があり、本記事では確認していません。

自分のマシンで動かす場合の手順は次のとおりです。

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 を開きます。.env.localには、使うプロバイダーのAPIキーと、AI_MODEL（モデルID。カンマ区切りで複数指定可）を記入します。プロバイダーごとの環境変数名はリポジトリ内のdocs/en/ai-providers.mdにあります。複数プロバイダーのモデルを使う場合はAI_MODELS_CONFIG、または ai-models.json で設定します。ADMIN_PASSWORDを設定すると、/adminに管理画面が有効になります。

Claude Codeなどから使う場合は、MCPサーバー版（@next-ai-drawio/mcp-server）を追加します。Claude Codeでは次のコマンドです。–scope user を付けると、すべてのプロジェクトで有効になります。

claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest

Claude Code 2.1.275以降では、コミュニティマーケットプレイス経由のプラグインとしても入れられます。

/plugin install next-ai-drawio --marketplace anthropics/claude-plugins-community

Claude Desktopなど、設定ファイルで管理するクライアントでは、次のJSONをMCP設定に追加します。設定ファイルの場所はREADMEに記載がないため、各クライアントの案内を確認してください。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

MCP版は、画面表示の確認用にスクリーンショットツールを備えます。draw.ioエディタも同梱されており、プレビューはオフラインで動きます。バージョン履歴、複数ページ、エクスポートに対応し、図は ~/.next-ai-drawio/ に自動保存されます。

注意点

APIキーまたはプロバイダーのアカウントが必要です。使った分だけ、そのプロバイダーの料金がかかります。
外部通信があります。READMEによると、現在のキャンバス（手で直した内容を含む）は、メッセージのたびにAIへ送られます。社外秘の構成図や顧客名を含む図は、送信先のプロバイダーの扱いを確認してから使う必要があります。各プロバイダーが何を受け取るかは、READMEには書かれていません。
外部送信を避けたい場合、READMEは自己ホストと、Ollamaなどのローカルモデルを選択肢として挙げています。
オンラインデモには利用制限があります。制限を外すには、チャット画面の設定でAPIキーを入力します。READMEによると、デモで入力したAPIキーはブラウザ内に保持され、保存のためにサーバーへ送られることはありません。
図の出力は長い構造化XMLになるため、READMEは「小さいモデルは壊れた図を出しやすい」として、性能の高いモデルを選ぶよう案内しています。
Node.jsの必要バージョンはREADMEに明記されていません。ADMIN_PASSWORDは、公開環境に置く場合に設定内容を確認してください。
MCPサーバーは npx で最新版を取得して実行する設定です。パッケージを外部から取得して実行するため、社内ルールがある環境では確認が要ります。