モジュールの依存関係ダイアグラム
IntelliJ IDEA を使用すると、JavaScript および TypeScript プロジェクトのコンテキスト内でのインポートとエクスポートの視覚化を行うことができます。
モジュール依存関係ダイアグラムの作成
JavaScript、TypeScript、HTML ファイルのコンテキストメニュー、またはフォルダーのコンテキストメニューから を選択します。
node_modules および
Excludedフォルダーでは、この操作は使用できません。複数の型のダイアグラムを作成できるフォルダーでアクションが呼び出された場合は、さらに ダイアグラムタイプの選択 リストから を選択してください。
モジュール依存関係ダイアグラムの分析
IntelliJ IDEA は、選択したファイルまたは選択したフォルダー内のすべてのファイルの インポート ステートメントと require ステートメントおよび script タグを再帰的に分析し、別のタブに、これらのファイルが互いにどのように依存しているかを示すダイアグラムを表示します。
ダイアグラムは、いくつかの長方形で構成されています。 それらのそれぞれは、 分析された選択されたファイルの名前と検出されたインポートのリストを示します。 インポートが解決されると、インポートされたシンボルの種類を示すアイコン（
や 
など）がその横に表示されます。分析されたファイルからの矢印は、検出されたインポートが行われる ターゲットファイルを指します。 対象ファイルがライブラリの場合は、灰色の背景にファイル名が表示されます。 ライブラリからのインポートが解決されない場合、 ターゲットファイルは赤い枠が付いた灰色の四角形として表示されます。
解決された インポートと エクスポートは、それぞれ
または 
アイコンでマークされます。
ダイアグラムからソースコードへの移動
ダイアグラムからファイルに移動するには、ファイルを右クリックし、コンテキストメニューから を選択します。
ソースコード内の特定の
インポートステートメントに移動するには、ダイアグラム内の必要なファイルを右クリックし、コンテキストメニューから を選択し、 ナビゲーションターゲットの選択 リストから移動先のシンボルを選択します。