Next AI Draw.io
AI搭載のダイアグラム作成ツール - チャット、描画、可視化
ByteDance Doubao提供
朗報です！ByteDance Doubao様のご支援により、デモサイトでは強力な glm-4.7 モデルを利用できるようになり、より高品質なダイアグラム生成が可能になりました。リンクから登録すると、すべてのモデルで使える 50万トークンが無料でもらえます！
自分のAPIキーを使用
お好みのプロバイダーで自分のAPIキーを使用することもできます。チャットパネルの設定アイコンをクリックして設定してください。
キーはブラウザのローカルに保存され、サーバーには保存されません。
AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
機能
- LLM搭載のダイアグラム作成：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作
- 画像ベースのダイアグラム複製：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
- ダイアグラム履歴：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能
- インタラクティブなチャットインターフェース：AIとリアルタイムでコミュニケーションしてダイアグラムを改善
- AWSアーキテクチャダイアグラムサポート：AWSアーキテクチャダイアグラムの生成を専門的にサポート
- アニメーションコネクタ：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
例
以下はいくつかのプロンプト例と生成されたダイアグラムです：
ResNet50モデルアーキテクチャアニメーション
Prompt: Give me an animated architecture diagram of the ResNet50 model.
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: Generate agile scrum workflow diagram for software development team.
オープンイノベーション
Prompt: Create visualization of Henry Chesbrough's Open Innovation model.
仕組み
本アプリケーションは以下の技術を使用しています：
- Next.js：フロントエンドフレームワークとルーティング
- Vercel AI SDK（
ai+@ai-sdk/*）：ストリーミングAIレスポンスとマルチプロバイダーサポート - react-drawio：ダイアグラムの表現と操作
ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
マルチプロバイダーサポート
- ByteDance Doubao
- AWS Bedrock（デフォルト）
- OpenAI / OpenAI互換API（
OPENAI_BASE_URL経由） - Anthropic
- Google AI
- Google Vertex AI
- Azure OpenAI
- Ollama
- OpenRouter
- DeepSeek
- SiliconFlow
- ModelScope
注：claude-sonnet-4-5はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。
サポート＆お問い合わせ
デモサイトのAPIトークン使用を支援してくださった ByteDance Doubao 様に、心より感謝申し上げます。
このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために スポンサー をご検討ください！
サポートやお問い合わせについては、 GitHubリポジトリ でissueを開くか、ご連絡ください：me[at]jiang.jp