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

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

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

サイトのキャプチャ

Code Crumbs -GitHub

Code Crumbsの特徴

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

Code Crumbsの特徴

コードの構造と依存関係

Code Crumbsの特徴

フローチャート

※依存関係・フローチャートは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にアクセスします。

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

sponsors

top of page

©2019 coliss