Next AI Draw.ioの実力範囲: 自然言語図解、モデル設定、公開方法
AI 機能とdraw.io 図を統合する next.js Web アプリケーション。このアプリを使用すると、自然言語コマンドと AI 支援の視覚化を通じて図を作成、変更、拡張できます。
ひと目でわかる
- これは何？
- draw.io編集画面とLLMを組み合わせ、文章・画像・PDFから図を作るNext.jsアプリの構成と運用条件を確認します。
- 誰に向いている？
- Next AI Draw.ioは、draw.io形式の図を会話でたたき台にしたい個人やチームに向きます。採用前にはデモで同じ指示を複数回送り、生成XMLの妥当性、画像からの再現精度、`npm run dev` の http://localhost:6002 表示、`.env.local` に置いたキーがブラウザ外へ送られないというREADME上の説明をネットワークログで確かめてください。
- 商用利用できる？
- できます。Apache-2.0 は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。最後のコミットは 1 日前です。
- 何の言語で書かれている？
- 主に TypeScript です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月15日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
draw.ioキャンバスにLLMを組み込む構成
このリポジトリには、Next.jsとdraw.ioのダイアグラム編集、AI言語モデルを組み合わせたTypeScript製のWebアプリケーションが含まれています。READMEによると、ユーザーは自然言語コマンドとAI支援の可視化を通じてダイアグラムを作成、変更、拡張できます。プロジェクトはApache-2.0でライセンスされており、リンクされたホームページでライブデモがホストされています。READMEはバイトダンスの豆包がデモサイトのAPIトークン使用をスポンサーしていることに感謝し、デモが現在glm-4.7モデルを使用していると述べています。
「draw.ioキャンバスにLLMを組み込む構成」では、next-ai-draw-ioの設定と実行結果を確認します。具体的な確認対象は `env.example` から作る `.env.local`、`AI_MODELS_CONFIG` のJSON、`ADMIN_PASSWORD` 設定後の `/admin`、そして同じ入力で保存された図の履歴です。
画像、PDF、テキストから図を起こす機能
READMEには8つの機能がリストされています：LLMを利用したダイアグラム作成、画像ベースのダイアグラム複製、PDFとテキストファイルのアップロード、サポートされているモデルのAI推論表示、バージョン管理付きのダイアグラム履歴、インタラクティブなチャットインターフェース、AWS、GCP、Azure向けのクラウドアーキテクチャダイアグラムサポート、アニメーションコネクタです。READMEはまた、このタスクには厳密なフォーマット制約を持つ長文テキストを生成するための強力なモデル能力が必要であると述べており、Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1などの特定のモデルを推奨しています。ベンチマーク結果は提供されておらず、ダイアグラムの正確性も保証されていません。
「画像、PDF、テキストから図を起こす機能」では、next-ai-draw-ioの設定と実行結果を確認します。具体的な確認対象は `env.example` から作る `.env.local`、`AI_MODELS_CONFIG` のJSON、`ADMIN_PASSWORD` 設定後の `/admin`、そして同じ入力で保存された図の履歴です。
localhost:6002での開発とデモ利用
READMEはアプリを実行するいくつかの方法を提供しています。デモサイトはインストール不要で、ユーザーは自分のAPIキーを提供でき、キーはブラウザにローカルに保存され、サーバーには送信されません。ネイティブデスクトップアプリは、Windows、macOS、Linux向けにReleasesページから入手できます。Dockerの手順は別のガイドにリンクされていますが、README自体にはDockerコマンドは含まれていません。ローカル開発では、READMEはリポジトリのクローン、npm installの実行、env.exampleを.env.localにコピーし、npm run devで開発サーバーを起動することを示しています。アプリはhttp://localhost:6002で実行されます。
「localhost:6002での開発とデモ利用」では、next-ai-draw-ioの設定と実行結果を確認します。具体的な確認対象は `env.example` から作る `.env.local`、`AI_MODELS_CONFIG` のJSON、`ADMIN_PASSWORD` 設定後の `/admin`、そして同じ入力で保存された図の履歴です。
AI_MODELS_CONFIGと管理パネルの分担
READMEには3つのプラットフォームへのデプロイが記載されています。Tencent EdgeOne Pagesはワンクリックデプロイボタンを提供し、DeepSeekモデルの毎日の無料枠を提供するとのことです。Vercelへのデプロイでは、ダッシュボードで環境変数を設定します。これは.env.localと一致します。Cloudflare Workersについては、READMEは手順を提供するのではなく、別のガイドにリンクしています。READMEはこれらのデプロイ先のパフォーマンス特性やスケーリング制限には言及していません。
「AI_MODELS_CONFIGと管理パネルの分担」では、next-ai-draw-ioの設定と実行結果を確認します。具体的な確認対象は `env.example` から作る `.env.local`、`AI_MODELS_CONFIG` のJSON、`ADMIN_PASSWORD` 設定後の `/admin`、そして同じ入力で保存された図の履歴です。
BedrockからOllamaまでの接続先
このアプリは以下のAIプロバイダーをサポートしています：バイトダンス豆包、AWS Bedrock（デフォルト）、OpenAI、Anthropic、Google AI、Google Vertex AI、Azure OpenAI、Ollama、OpenRouter、AIHubMix、DeepSeek、SiliconFlow、ModelScope、SGLang、Vercel AI Gateway。READMEによると、AWS BedrockとOpenRouterを除くすべてのプロバイダーがカスタムエンドポイントをサポートしています。サーバーサイドのマルチモデル設定は、AI_MODELS_CONFIG環境変数（JSON文字列）またはai-models.jsonファイルで行えます。単一プロバイダーの簡単な設定には、AI_MODEL変数でカンマ区切りのモデルIDを指定できます。ADMIN_PASSWORDを設定して/adminにアクセスすると、管理パネルを有効にでき、.envファイルを手動編集せずにモデル、アクセスコード、機能、可観測性、クォータを管理できます。READMEは詳細なガイドへのリンクを提供していますが、その内容は含まれていません。
「BedrockからOllamaまでの接続先」では、next-ai-draw-ioの設定と実行結果を確認します。具体的な確認対象は `env.example` から作る `.env.local`、`AI_MODELS_CONFIG` のJSON、`ADMIN_PASSWORD` 設定後の `/admin`、そして同じ入力で保存された図の履歴です。
MCPサーバーが担うエージェント操作
このプロジェクトには、Claude Desktop、Cursor、VS CodeなどのAIエージェントがダイアグラムを作成できるようにするMCPサーバーパッケージが含まれています。READMEは、npxと@next-ai-drawio/mcp-server@latestを使用したmcpServersのJSON設定スニペットを提供しています。Claude Code CLIの場合、コマンドは次のとおりです：claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest。設定後、エージェントにフローチャートの作成を依頼でき、ダイアグラムはブラウザにリアルタイムで表示されます。READMEは基盤となるMCPプロトコルやエラーハンドリングについては詳しく説明していません。
「MCPサーバーが担うエージェント操作」では、next-ai-draw-ioの設定と実行結果を確認します。具体的な確認対象は `env.example` から作る `.env.local`、`AI_MODELS_CONFIG` のJSON、`ADMIN_PASSWORD` 設定後の `/admin`、そして同じ入力で保存された図の履歴です。
Apache-2.0と生成図の検証責任
このアプリのダイアグラムは、draw.ioでレンダリングできるXMLとして表現されます。READMEには主要な技術がリストされています：フロントエンドとルーティングにはNext.js、ストリーミングAIレスポンスとマルチプロバイダーサポートにはVercel AI SDK、ダイアグラムの表現と操作にはreact-drawioです。AIはユーザーコマンドを処理し、それに応じてXMLを生成または変更します。プロジェクトはApache-2.0でライセンスされており、このライセンスは、著作物を複製、派生著作物を作成、公開表示、上演、サブライセンス、配布するための永続的、世界的、非独占的、無償、ロイヤリティフリー、取消不能な著作権ライセンスを付与します。ライセンスの抜粋には保証やサポートについての言及はなく、READMEもセキュリティや信頼性についての主張を行っていません。
「Apache-2.0と生成図の検証責任」では、next-ai-draw-ioの設定と実行結果を確認します。具体的な確認対象は `env.example` から作る `.env.local`、`AI_MODELS_CONFIG` のJSON、`ADMIN_PASSWORD` 設定後の `/admin`、そして同じ入力で保存された図の履歴です。
編集部の結論
Next AI Draw.ioは、draw.io形式の図を会話でたたき台にしたい個人やチームに向きます。採用前にはデモで同じ指示を複数回送り、生成XMLの妥当性、画像からの再現精度、`npm run dev` の http://localhost:6002 表示、`.env.local` に置いたキーがブラウザ外へ送られないというREADME上の説明をネットワークログで確かめてください。
コミュニティノート