Zenn
🧠

ダイアグラム駆動開発：生成AI時代の新しい実装アプローチ

に公開
AI
diagram
Mermaid
開発プロセス
LLM
tech

生成AI（特にLLM: 大規模言語モデル）を活用してコードを生成する場面が増える中、「ダイアグラムを活用してLLMに指示を与える」というアプローチを検証してみました。

本記事ではその方法と所感、そして今後の展望について紹介します。

背景：LLMと実装の関係

新規システムをLLMで構築する場合、ゼロから要件を伝えて生成させるのは比較的容易です。

しかし、既存構成の中で機能を変更・拡張するには、振る舞いやアーキテクチャを壊さずに保つ必要があります。これを担保するには、守るべき構造や挙動を明確に定義することが不可欠です。

特に注意すべきなのは、その場しのぎの変更を繰り返すことのリスクです。生成AIは前後の文脈や構造を元にコードを生成するため、継続的に場当たり的な変更が加わると、コード全体の一貫性が失われていきます。

その結果、次第にAIが正しくコードの構造や意図を把握できなくなり、 修正や拡張が困難な「構造的劣化」 に陥ることがあります。これはいわば「生成AI版の技術的負債」とも言える現象です。

こうした問題を防ぐためには、コードの背後にあるアーキテクチャや処理の意図を明示的に定義し、共有する仕組みが重要です。

その解決策として注目したのが「ダイアグラム駆動開発（自称）」です。

検証した手法

以下の手順で、実際にダイアグラムを使った実装プロセスを試しました。

  1. クラス図・シーケンス図を作成、または LLMに既存コードを解析させてMermaid形式のダイアグラム（クラス図・シーケンス図など）を生成
  2. ヒトがダイアグラムを変更後の状態に修正
    • LLMに指示して修正させる
    • またはMermaidの可視化ツールでGUI編集
  3. ダイアグラム付きのIssueを作成
  4. IssueをLLMに渡して実装を依頼

💡 Mermaid編集の選択肢が増えました

従来はUMLやMermaidの記法を学習した上で作成するのが一般的でしたが、現在は生成AIに依頼することでサクッと作成できるようになりました。

  • 🌍 Mermaid Live Editor
    オンライン上で共同編集・共有・プレビューが可能、一部ダイアグラムはGUIで編集可能です。

  • 🧩 VSCode Mermaid Chart プラグイン
    VSCode内でリアルタイムにMermaidチャートを可視化・編集できる便利なプラグインです。
    詳細は公式ドキュメントを参照してください。

  • 🤖 GitHub Copilot Chatで @mermaid-chart を活用
    Copilotに「@mermaid-chart を使ってクラス図を書いて」と指示すると、複雑な文法を覚えなくても正確なMermaidコードを自動生成してくれます。
    これは、非エンジニアや設計者がダイアグラムを作成する際にも非常に強力な武器になります。

やってみた結果

このプロセスによって以下のような成果が得られました。

  • ダイアグラム上に記載された構成や処理の流れは担保された、ほぼ期待どおりのコードが生成
  • 明らかに誤った引数の記載に対してめちゃくちゃな実装で合わせるのではなく「こうではありませんか？」とLLMが修正案を提示してくれたのは驚きでした

💡 ただし、小規模なタスクではダイアグラムを用意するオーバーヘッドが大きく、むしろヒトがLLMと共同編集して実装した方が速いことも多かったです。

そのため、中〜大規模の実装タスクにおいては有効性が高いと感じました。

定義が重要

LLMを活用した実装では、次の3つの「壊してはいけない定義」が重要になります。

1. アーキテクチャと処理フローの定義

  • クラス図やシーケンス図で、機能・入出力・フローを定義
  • アーキテクチャの一貫性を保ちやすくなる

2. テストによりシステムへ要求する機能の定義

  • 単体テスト・結合テストで正常系/異常系/エッジケースを網羅
  • E2Eテストで期待する動作を検証

3. UI/UXの定義

  • FigmaなどでUIを定義し、意図しない変更を防止
  • Figma MCPの活用

まとめ：ヒトがあるべき姿を定義し、AIが実装する

LLMによって実装スピードが加速する一方、ヒトによるレビューがボトルネックになる可能性が高まっています。

そのため、生成AIによる精度が高まることで以下のような開発スタイルが今後主流になっていくかもしれません。

  • レビューに時間を使わず、ダイアグラムの定義どおりに実装されていればOK
  • システムに要求する機能の 単体テスト・結合テストで入力と出力が一致すること を確認
  • システムに要求するUI/UXを Figma MCP/playwrrightのE2Eテスト で確認
  • ダイアグラムで視覚的に共有しながら、設計の齟齬を減らす

将来的には DeepWiki のようなツールによってシステム全体のアーキテクチャを正確に把握できるようになったり、生成AIのコンテキスト処理能力がさらに向上すれば、ヒトが設計を担う必要もなくなるかもしれません。
しかし現時点では、そうした理想にはまだ距離があるため、意図を明示しながらAIと協調する「ダイアグラム駆動開発」は現実的かつ有効な手段だと考えています。

この記事は、社内向けにざっくり書いたドラフトを、生成AIの助けを借りてまとめ直したものです。
最後まで読んでいただき、ありがとうございました 🙇💦

Discussion