HN 日本語サマリー

← 一覧へ戻る
Web開発

Show HN: Onboard-CLI、LLM搭載でASTベースのコードベース可視化ツール

Show HN: Onboard-CLI, a LLM powered and AST-based tool to visualize codebase (github.com)

18 pointsby yr_animesh3 コメント

要約

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を参照してください。