Zenn
🤢

【設計書難民へ】React,VueのUMLを自動生成するライブラリを作りました！

2024/11/20に公開
React
Vue.js
UML
LLM
記事投稿コンテスト「今年の最も大きなチャレンジ」
tech

UML Document Generator

ReactとVueに対応したドキュメント自動生成ライブラリを作成しました！npmでインストール可能です。
設計書難民の方にぜひ使っていただきたいです！！！

https://github.com/champaya/uml-document-generator/tree/main
https://www.npmjs.com/package/uml-document-generator

🚀 このライブラリを生み出した理由

皆さんは、コードが設計書なReactやVueプロジェクトで、コードの構造を理解するのに苦労したことはありませんか？私も同じ悩みを抱えていました。

コードにコメントも書いてないし、意味わかんねーよ状態でした。

複雑化するフロントエンドコードの構造を把握するため、「もっと直感的にわかる方法はないのか」と考えた末に生まれたのが、このUML Document Generatorです。

🛠 開発のモチベーション

私が解決したかった課題は以下の3つです：

  1. コードの構造を可視化したい
  2. 色々なコードに対応できる柔軟性が欲しい
  3. 完全は求めないから認知負荷が減るような設計書が欲しい

🤖 ライブラリの機能について

概要

ReactやVueのコードを検出して（tsx, jsx, vueを検出して）３つのUMLと、コンポーネントの概要をまとめたmarkdownドキュメントを出力します。

このツールの特徴は、LLM（大規模言語モデル）を活用してコードを解析し、UML図を自動生成する点です。OpenAI、Anthropic、OLLamaに対応しております。

サポートする図の種類

以下の3種類のUML図を自動生成できます：

  • 状態遷移図: コンポーネントの状態変化を可視化
  • アクティビティ図: ワークフローや処理の流れを表現
  • シーケンス図: オブジェクト間の相互作用を描画

状態遷移図: TODOアプリでのコンポーネントの例

アクティビティ図: TODOアプリでのコンポーネントの例

シーケンス図: TODOアプリでのコンポーネントの例

プラスでmarkdownドキュメントも生成します：

  • markdownドキュメント: コンポーネントの状態、イベントハンドラ、処理内容などを記載

markdown設計書: TODOアプリでのコンポーネントの例

フレームワーク対応

現在、以下のフレームワークに対応しています：

  • React（.tsx, .jsx）
  • Vue（.vue）

使用例: Reactプロジェクトでの実行

コマンドラインで対象のフォルダ、アウトプットのフォルダやフレームワークを指定して叩くだけです。

# インストール
npm install uml-document-generator -g

# 実行
uml-document-generator -i ./src -o ./output -f react --openai-key YOUR_API_KEY

オプション

いくつかの設定が可能です：

オプション 説明 必須 デフォルト値
-i, --input <path> React,Vueファイルのディレクトリパス ✅ -
-o, --output <path> UMLファイルの出力ディレクトリ ❌ ./uml
-f, --framework <type> 使用するフレームワーク（reactまたはvue） ✅ -
-s, --service <type> 使用するAIサービス（openaiまたはclaudeまたはollama） ❌ openai
-m, --model <model> 使用するモデル ❌ openai: gpt-4o-mini
claude: claude-3.5-sonnet-20241022
ollama: llama3.1
--openai-key <key> OpenAI APIキー（環境変数 OPENAI_API_KEY でも設定可能） ❌ -
--claude-key <key> Claude APIキー（環境変数 ANTHROPIC_API_KEY でも設定可能） ❌ -
--env <path> 環境変数ファイルのパス ❌ .env

コストについて

OpenAIのgpt-4o-miniでは、700行程度のコードで約1円程度と、非常に低コストを実現しています。

今後の展望

現在は限定的な機能ですが、やる気があれば他のフレームワークに対応していきます。
AzureAD環境が用意できれば、Azure Openaiにも対応したいところです。

📕 おわりに

ここまでお読みいただきありがとうございました！！

このツールは、私自身の開発体験を改善するために生まれました。皆さんのプロジェクトでも、コードの可視化と理解に役立てていただければ幸いです。

また、OSS（オープンソースソフトウェア）のため、Pull Requestやissue起票も積極的に歓迎しております！

https://github.com/champaya/uml-document-generator/tree/main
https://www.npmjs.com/package/uml-document-generator

Discussion