ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs
Post on:2019年2月25日
JavaScriptやPythonやC++などのソースコードを分析し、構造や階層・依存関係などを視覚的に構築する便利な無料ツールを紹介します。
コードのドキュメントを作成する時や、大規模なコードや未知のコードを簡単に把握したい時に、非常に便利です。

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

コードの構造と依存関係

フローチャート
※依存関係・フローチャートはJavaScriptのみです。
対応言語は、下記の通り。
- JavaScript
- TypeScript
- Python
- PHP
- Java
- C++
望む言語が他にあればIssueにどうぞ、とのことです。
Code Crumbsのデモ
デモでは、JavaScriptのコードでその動作を確認できます。

依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。
Code Crumbsの使い方
セットアップ
- codecrumbをインストールします(yarn global add codecrumbs)。
- codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクトリ、-eはエントリポイントファイルです。
- http://localhost:2018にアクセスします。
セットアップが完了したら、コードをアップロードします。
sponsors