DayuanJiang/next-ai-draw-io

A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.

解決する課題

Next AI Draw.io は、手動のドラッグ&ドロップ描画を自然言語コマンドに置き換えることで、複雑な図の作成と変更を簡素化します。特に技術アーキテクチャにおいて、形状やコネクタを手動で配置する面倒なプロセスを排除し、ユーザーが可視化したい内容を説明するだけで済むようにします。

仕組み

このアプリケーションは Next.js と Vercel AI SDK で構築され、さまざまな LLM と連携します。ユーザーのプロンプトを draw.io が必要とする特定の XML 形式に変換します。また、画像、PDF、テキストファイルを取り込んで、図生成用のコンテンツを抽出することもできます。上級ユーザー向けには MCP(Model Context Protocol)サーバーを提供し、Claude Desktop や Cursor などの AI エージェントがブラウザ上で直接図を生成できるようにします。

対象ユーザー

クラウドアーキテクチャ図(AWS、GCP、Azure)、フローチャート、システム可視化を手動描画なしで迅速に作成する必要があるソフトウェアアーキテクト、開発者、テクニカルライター向けに設計されています。

ハイライト

  • LLM 駆動編集:チャットインターフェースを使用して図を作成・洗練。
  • 画像から図へ:アップロードした画像から既存の図を複製・拡張。
  • ドキュメント取り込み:アップロードした PDF またはテキストファイルから直接可視化を生成。
  • MCP サーバー統合:AI エージェントが Model Context Protocol を介して図を作成可能。
  • クラウドアーキテクチャサポート:AWS、Azure、GCP 向けの専用ライブラリ。
  • アニメーションコネクタ:フロー可視化を向上させる動的コネクタをサポート。
  • バージョン管理:図の履歴を追跡し、以前のバージョンを復元可能。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト