Web開発
Show HN: Onboard-CLI、LLM搭載でASTベースのコードベース可視化ツール
Show HN: Onboard-CLI, a LLM powered and AST-based tool to visualize codebase (github.com)
要約
Onboard-CLIは、LLMと抽象構文木(AST)解析を活用したコマンドラインインターフェース(CLI)ツールおよびWebベースのビジュアライザーです。Tree-sitterを用いてコードを解析し、Go、JavaScript、Python、Javaなど複数の言語に対応した構造トポロジーグラフを生成します。これにより、開発者は複雑なコードベースの依存関係やアーキテクチャを迅速に理解し、アーキテクチャの境界違反を検出できます。
全文翻訳
Untitled.design.1.1.mp4
Onboard-CLI 開発者プラットフォーム、コード解析、システムプロファイリング、キャンバスベースのノード可視化。
Onboard-CLIは、開発者が大規模で複雑なコードベースを迅速に理解し、マッピングするのに役立つ高度なコマンドラインインターフェースツールおよびWebベースのビジュアライザーです。Tree-sitterを介したAST(抽象構文木)解析を活用することで、Onboard-CLIは構造トポロジーグラフを生成し、アーキテクチャ境界を強制し、直感的なReact Flowキャンバスを通じてそれらを提示します。
🌟 主な機能
ASTスライシングエンジン:Tree-sitterを使用した深いコード解析により、複数の言語(Go、JS、TS、Python、Java)にわたる正確な構造ノード生成。
インタラクティブビジュアライザー(マップ):指定された半径内のコードパス、依存関係、トポロジーマップを視覚的に探索するためのローカルReact Flowキャンバス(http://localhost:3000/app)を自動的に起動。
アーキテクチャドリフト検出(ドリフト):codebaseをarchitecture.ymlルールに対して分析し、不正なファイル間インポートと境界違反を検出し、長期的なコードの健全性を確保。
包括的なエコシステム:設定管理、影響分析、コードエクスポート、オーナー追跡、プロジェクトパルス用の組み込みコマンド。
モダンな技術スタック:Goで書かれた非常に高速なCLIと、Vite、React 19、@xyflow/react(React Flow)、Framer Motion、Tailwind CSSを利用したリッチなフロントエンド。
📊 統計と機能
言語サポート:5つ以上の組み込みパーサー(Go、TypeScript、JavaScript、Python、Java)。
可視化半径:設定可能なディープマッピング(デフォルト半径:1、複雑な依存関係ツリーにスケール)。
ルール強制:数千ファイルにわたるアーキテクチャドリフトのためのサブ秒単位の境界正規表現評価。
フロントエンドパフォーマンス:Vite & SWC/Oxcリンティングによって強化された、大規模ノードセットのための最適化されたキャンバスレンダリング。
🚀 インストール
提供されているインストールスクリプトを使用してOnboard-CLIをインストールできます。
macOS / Linux
curl -fsSL https://raw.githubusercontent.com/onboard-cli/install.sh | bash (またはリポジトリから直接./install.shを実行)。
Windows
Invoke-WebRequest -Uri https://raw.githubusercontent.com/onboard-cli/install.ps1 -OutFile install.ps1; .
install.ps1
💻 使用方法
1. プロジェクトの初期化
必要な.onboard. onboard init を生成します。
CI/CDのために、以下のコマンドを使用して必要な設定とarchitecture.yamlファイルを生成します。
onboard init --template clean-architecture (利用可能なテンプレート:generic、clean-architecture、modular-monolith、mvc、serverless)
2. コードベースのマッピング(ビジュアライザー)
コンテキストエンジンをトリガーしてシンボルまたはファイルパスをマッピングし、ビジュアライザーサーバーを起動します。
onboard map --target "internal/parser" --radius 2
👉 提供されたリンク(http://localhost:3000/app)をクリックして、インタラクティブキャンバスを表示します。
UIでCtrl+Pを押してファジーファインダーを使用します!
右上からダークモードとコンパクトモードを切り替えます。
3. バックエンドルートの抽出
さまざまなフレームワーク(Express、Gin、FastAPI、Spring)にわたるバックエンドAPIルートを、正確なファイルと行ハンドラの位置に自動的にマッピングします。
onboard routes --protocol rest --framework express
4. アーキテクチャドリフトの検出
定義されたアーキテクチャルールに対する違反をチェックします。
onboard drift --rules architecture.yml
5. CI/CD統合
Onboard-CLIのドリフト機能をGitHub Actionsワークフローに統合し、すべてのプルリクエストでアーキテクチャ境界を強制します。ドキュメント/onboard-action.ymlのテンプレートを確認してください。
6. 追加コマンド
onboard impact:提案されたコード変更の影響を分析します。
onboard owners:コードの所有権とメンテナーを追跡します。
onboard export:グラフィカル/ASTデータをエクスポートします。
onboard pulse:コードベースの健全性と最近のアクティビティの簡単な概要を取得します。
(注:グローバルフラグ --no-update-check を任意のコマンドに渡して、非同期バージョンチェッカーを無効にできます)。
🛠️ 技術スタック
CLIエンジン:Go、Cobra、Go-Tree-Sitter、YAML。
Web UI:React 19、TypeScript、Vite、@xyflow/react(React Flow)、Tailwind CSS、Framer Motion、Lucide React。
コードハイライトとMarkdown:Shiki、MDX、Rehype。
🤝 貢献
貢献を歓迎します!CLIロジックについてはcmdおよびinternalディレクトリを、Reactフロントエンドについてはuiディレクトリを確認してください。
プルリクエストを送信する前に、貢献ガイドラインとAI使用ポリシーをお読みください。
リポジトリをフォークする
フィーチャーブランチを作成する(git checkout -b feature/amazing-feature)
変更をコミットする(git commit -m 'Add some amazing feature')
ブランチにプッシュする(git push origin feature/amazing-feature)
プルリクエストを開く
📝 ライセンス
MITライセンスの下で配布されます。詳細についてはLICENSEを参照してください。