Next AI Draw.io

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アーキテクチャダイアグラムの生成を専門的にサポート
  • アニメーションコネクタ：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成

例

以下はいくつかのプロンプト例と生成されたダイアグラムです：

アニメーションTransformerコネクタ

プロンプト： アニメーションコネクタ付きのTransformerアーキテクチャ図を作成してください。

アニメーションコネクタ付きTransformerアーキテクチャ

GCPアーキテクチャ図

プロンプト： GCPアイコンを使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。

GCPアーキテクチャ図

AWSアーキテクチャ図

プロンプト： AWSアイコンを使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。

AWSアーキテクチャ図

Azureアーキテクチャ図

プロンプト： Azureアイコンを使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。

Azureアーキテクチャ図

猫のスケッチ

プロンプト： かわいい猫を描いてください。

猫の絵

仕組み

本アプリケーションは以下の技術を使用しています：

  • 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

エディタを開く