ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs

JavaScriptやPythonやC++などのソースコードを分析し、構造や階層・依存関係などを視覚的に構築する便利な無料ツールを紹介します。

コードのドキュメントを作成する時や、大規模なコードや未知のコードを簡単に把握したい時に、非常に便利です。

Code Crumbs -GitHub

• Code Crumbsの特徴
• Code Crumbsのデモ
• Code Crumbsの使い方

Code Crumbsの特徴

Code Crumbsは、ソースコードを分析し、構造や階層・依存関係などを視覚的に構築するツールです。
ライセンスは、BSD 3-Clause Licenseです。

コードの構造と依存関係

フローチャート

※依存関係・フローチャートはJavaScriptのみです。

対応言語は、下記の通り。

• JavaScript
• TypeScript
• Python
• PHP
• Java
• C++

望む言語が他にあればIssueにどうぞ、とのことです。

Code Crumbsのデモ

デモでは、JavaScriptのコードでその動作を確認できます。

デモページ

依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。

Code Crumbsの使い方

セットアップ

1. codecrumbをインストールします（yarn global add codecrumbs）。
2. codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクトリ、-eはエントリポイントファイルです。
3. http://localhost:2018にアクセスします。

セットアップが完了したら、コードをアップロードします。