利用制限とスケーリングについて (別名:お財布が悲鳴を上げています)
予想以上の反響をいただき、ありがとうございます!皆様にダイアグラム作成を楽しんでいただいているのは嬉しい限りですが、その熱量により AI API のレート制限 (TPS/TPM) に頻繁に引っかかってしまっています。制限に達するとシステムが一時停止し、エラーが発生してしまいます。
私は現在、個人開発者として API 費用を全額自腹で負担しています。サービスを継続し、かつ私自身が借金を背負わないようにするため(笑)、一時的に以下の利用制限を設けさせていただきました。
スポンサー募集
これらの制限を取り払い、バックエンドをスケールさせるには皆様の支援が必要です。現在、AI API プロバイダー様やクラウドプラットフォーム様からのスポンサー支援を積極的に募集しています。
ご支援(クレジット提供や資金援助)をいただける場合、GitHub リポジトリおよびデモサイトにて、プラットフォームスポンサーとして貴社を大々的にご紹介させていただきます。
お問い合わせ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