next-ai-draw-io: 『アーキテクチャ図を言葉で描く』時代が来た

next-ai-draw-io-architecture-diagram-with-ai cover image

「Kubernetesクラスタの構成図を作って」と言うだけでdraw.ioの図が自動生成される。そんな時代が現実になりつつあります。

GitHub Trendingで1週間に4,500以上のスターを集めたnext-ai-draw-io は、自然言語からdraw.io形式のアーキテクチャ図を生成するオープンソースツールです。本記事では、その仕組みと使い方、そしてMermaidとの使い分けについて解説します。

next-ai-draw-ioとは

next-ai-draw-io は、Next.js で構築されたWebアプリケーションで、AIとdraw.io の図表エディタを統合したツールです。

主な特徴:

自然言語からの図生成: テキストでシステム構成を説明するだけで図が自動生成される
AIによる図の修正: 既存の図に対して「データベースを追加して」と指示するだけで編集可能
draw.io完全互換: 生成された図はdraw.ioでそのまま編集できる
オープンソース: MITライセンスで誰でも利用・改変が可能

なぜ今注目されているのか

従来、システム設計書やアーキテクチャ図の作成は、以下のような課題がありました:

時間がかかる: 図形を配置し、線を引き、レイアウトを調整する作業は意外と手間
修正が面倒: 構成が変わるたびに図を手作業で更新する必要がある
技術者の本業ではない: 図を描くことより、設計そのものに集中したい

next-ai-draw-ioは、これらの課題を自然言語による指示で解決します。

「3層アーキテクチャのWebアプリケーション構成図を作って。
フロントエンド、APIサーバー、データベースで構成され、
すべてDockerコンテナで動作します」

このように説明するだけで、適切な図が生成されます。

実際の使い方

セットアップ

ローカル環境で動かすには、以下の手順を実行します:

# リポジトリをクローン
git clone https://github.com/DayuanJiang/next-ai-draw-io.git
cd next-ai-draw-io

# 依存関係をインストール
npm install

# 環境変数を設定
cp .env.example .env.local
# .env.localにOpenAI APIキーを設定

# 開発サーバーを起動
npm run dev

http://localhost:3000にアクセスすると、すぐに使い始められます。

図の生成と編集

新規作成: テキストボックスにシステムの説明を入力
AIが図を生成: OpenAIのAPIを使って図のXMLが生成される
draw.ioエディタで確認: 生成された図がその場で表示される
自然言語で修正: 「データベースを2つに分けて」と指示するだけで図が更新される
エクスポート: PNG、SVG、XMLなど好きな形式で保存

Mermaidとの使い分け

既にMermaid でMarkdownから図を生成している方も多いと思います。next-ai-draw-ioとMermaidはどう使い分けるべきでしょうか。

Mermaidが適している場面

バージョン管理したい: Markdownとして管理でき、GitでのDiffが見やすい
シンプルな図: フローチャート、シーケンス図などの定型的な図
自動生成: CIで自動的にドキュメントを生成したい場合

実際、当ブログでもHugoのブログにMermaidの図を埋め込む方法を紹介しています。

next-ai-draw-ioが適している場面

複雑なレイアウト: 複数のコンポーネントを含む大規模なアーキテクチャ図
細かいカスタマイズ: 色、フォント、図形の細部を調整したい
対話的な作成: 何度も試行錯誤しながら図を作りたい
既存のdraw.ioとの互換性: 既にdraw.ioで作った図を拡張したい

個人的には、以下のような使い分けがよいと思います:

ドキュメント内の図: Mermaidでコードとして管理
プレゼン資料の図: next-ai-draw-ioで洗練された図を作成
設計書の図: 最初はnext-ai-draw-ioで生成、その後draw.ioで微調整

技術的な仕組み

next-ai-draw-ioの技術的な仕組み

next-ai-draw-ioの内部では、以下のような処理が行われています:

プロンプトエンジニアリング: ユーザーの説明をOpenAIのGPTモデルに渡す際、draw.io XMLの形式を理解させるプロンプトを付加
XMLの生成: GPTがdraw.ioの図形定義（mxGraphModel形式）を生成
draw.ioエディタへの統合: 生成されたXMLをdiagrams.net のエディタで表示

draw.ioのXMLフォーマットは複雑ですが、GPT-4クラスのモデルであれば適切に生成できることが示されています。

注意点

現時点では以下の点に注意が必要です:

OpenAI APIキーが必要: 自分のAPIキーを用意する必要があり、使用量に応じて課金される
日本語対応: 日本語の説明でも動作しますが、英語の方がより正確な図が生成される傾向
プライバシー: 図の説明がOpenAIのAPIに送信されるため、機密情報を含む場合は注意

将来的には、ローカルLLM（Ollama など）にも対応できる可能性があります。

まとめ

next-ai-draw-ioは、「アーキテクチャ図を言葉で描く」という新しい体験を提供してくれます。

設計書作成やドキュメント整備の時間を大幅に短縮できる可能性があり、特に以下のような場面で有効です:

新しいシステムの構成を素早く可視化したい
既存システムのドキュメントを効率的に更新したい
プレゼン資料用の洗練された図が必要

Mermaidと組み合わせることで、さらに幅広いドキュメント作成のワークフローが実現できます。興味のある方はぜひ試してみてください。

Fragments of verbose memory

冗長な記憶の断片 - Web技術のメモをほぼ毎日更新