AIスマートドロー（ai-smart-draw）

Web
AIスマートドロー（ai-smart-draw）

AIスマートドロー（ai-smart-draw）

AI Smart Drawは、Next.jsとTypeScriptで構築されたインテリジェントな図作成アプリケーションです。自然言語コマンドを用いてDraw.io（diagrams.net）、Mermaid、PlantUML、Excalidrawなど複数の図表フォーマットを生成・編集できます。AIを活用してテキストから図の構造や要素を自動生成し、既存の図を解析・変換することで、非専門家でも高速にダイアグラムを作成・修正できるのが特徴です。開発用にDockerファイルや各種設定が含まれており、ローカルやクラウドでのデプロイが容易です。

https://github.com/shenpeiheng/ai-smart-draw

概要

AI Smart Drawは、自然言語で指示するだけでさまざまな形式の図を生成・編集できるWebアプリケーションです。Next.js（TypeScript）を基盤とし、Draw.io（diagrams.net）、Mermaid、PlantUML、Excalidrawといった主要な図記法に対応。ユーザーは「シーケンス図を追加」「フローを簡略化して」などの命令を入力すると、AIが図要素や接続を自動生成して図面を更新します。また既存ファイルの解析・変換やテンプレート利用、画像プレビューなどの機能を備え、開発者向けにDocker環境や各種設定ファイルも提供されているため、ローカルでの検証やコンテナ化したデプロイが容易です。

GitHub

リポジトリの統計情報

  • スター数: 6
  • フォーク数: 1
  • ウォッチャー数: 6
  • コミット数: 8
  • ファイル数: 18
  • メインの言語: TypeScript

主な特徴

  • 自然言語コマンドからDraw.io、Mermaid、PlantUML、Excalidrawの図を生成・編集
  • Next.js + TypeScriptで構築、フロントエンドとAPIの一体運用を想定
  • Dockerfileを含むためローカルやコンテナ環境で容易に立ち上げ可能
  • 複数フォーマット間の変換やテンプレートを利用した高速作図に対応

技術的なポイント

このプロジェクトはNext.js（TypeScript）を中心に据え、クライアント側のインタラクティブ編集とサーバー側のAI処理（またはAI呼び出し）を分離したアーキテクチャを採用していると推察されます。自然言語を図定義に変換するパイプラインは、入力テキスト→LLM（またはルールベース解析）→各図記法（Mermaid、PlantUML、XMLベースのDraw.io形式、Excalidraw JSON等）という流れが基本です。特にDraw.ioはXMLベースのレイアウトやノード配置を管理するため、AIからの出力を適切なXMLスニペットに変換して既存図へ差し込む処理が必要です。MermaidやPlantUMLはテキスト記法なので、AIが生成する構造化テキストの整形と検証が比較的容易です。

プロジェクト内のDockerfileや.gitignoreなどの存在は、開発から本番までのワークフローを想定しており、依存の固定やビルド手順の自動化が行われていることを示します。TypeScript採用は型安全性と開発速度の両立を図るためであり、Next.jsのAPI RoutesやServer Componentsを使うことで、AI呼び出しの認証やレート制御、シークレット管理（APIキー等）をサーバー側で閉域に保つ設計が可能です。Excalidrawのような描画ライブラリと統合する場合、リアルタイムの編集イベントを扱うための状態管理（React ContextやuseSyncExternalStore、あるいはWebSocket経由の同期）が考慮されます。

さらに、図の変換やテンプレート適用では一時ファイル（TempFile.tmp）の利用やストレージ管理、アップロード/ダウンロード機能が必要です。セキュリティ面では外部AIサービスへ送信するデータのフィルタリング、ユーザー入力のサニタイズ、生成した図の整合性チェックが重要です。将来的にはプラグイン形式で新たな図記法を追加したり、複数のLLMプロバイダを切り替える拡張ポイントを設けると実用性が高まります。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .dockerignore: file
  • .gitignore: file
  • Dockerfile: file
  • README.md: file
  • TempFile.tmp: file

…他 13 ファイル

まとめ

自然言語で図を作れる便利なプロトタイプ。拡張とセキュリティに配慮すれば実用化可能。

リポジトリ情報：

READMEの抜粋：

AI Smart Draw

An intelligent diagramming application built with Next.js that harnesses the power of AI to create and manipulate various types of diagrams including Draw.io (diagrams.net), Mermaid, PlantUML, and Excalidraw through natural language commands.

🔗 Live Demo: Draw.io Mermaid PlanUML ![Excalidraw](public/ebdcfd3a-9c68-42ad-…