本アプリは最高のパフォーマンスを発揮するため、Claude Opus 4.5 で動作するよう設計されています。しかし、予想以上のトラフィックにより、最上位モデルの運用コストが負担となっています。サービスの中断を避け、コストを管理するため、バックエンドを Claude Haiku 4.5 に切り替えました。
AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
機能
- LLM搭載のダイアグラム作成：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作
- 画像ベースのダイアグラム複製：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
- ダイアグラム履歴：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能
- インタラクティブなチャットインターフェース：AIとリアルタイムでコミュニケーションしてダイアグラムを改善
- AWSアーキテクチャダイアグラムサポート：AWSアーキテクチャダイアグラムの生成を専門的にサポート
- アニメーションコネクタ：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
例
以下はいくつかのプロンプト例と生成されたダイアグラムです：
アニメーションTransformerコネクタ
プロンプト： アニメーションコネクタ付きのTransformerアーキテクチャ図を作成してください。
GCPアーキテクチャ図
プロンプト： GCPアイコンを使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
AWSアーキテクチャ図
プロンプト： AWSアイコンを使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
Azureアーキテクチャ図
プロンプト： Azureアイコンを使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
猫のスケッチ
プロンプト： かわいい猫を描いてください。
仕組み
本アプリケーションは以下の技術を使用しています：
- Next.js：フロントエンドフレームワークとルーティング
- Vercel AI SDK（
ai+@ai-sdk/*）：ストリーミングAIレスポンスとマルチプロバイダーサポート - react-drawio：ダイアグラムの表現と操作
ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
マルチプロバイダーサポート
- AWS Bedrock（デフォルト）
- OpenAI / OpenAI互換API（
OPENAI_BASE_URL経由） - Anthropic
- Google AI
- Azure OpenAI
- Ollama
- OpenRouter
- DeepSeek
注：claude-sonnet-4-5はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。
サポート＆お問い合わせ
このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために スポンサー をご検討ください！
サポートやお問い合わせについては、 GitHubリポジトリ でissueを開くか、ご連絡ください：me[at]jiang.jp