Madge Dependency Graph

A Visual Studio Code extension that generates dependency graphs for JavaScript and TypeScript files using madge.

Features

• Generate visual dependency graphs for JS/TS files directly from the file explorer
• Automatic tsconfig.json detection for TypeScript projects
• Interactive SVG output displayed in VS Code

Prerequisites

This extension requires the following to be installed on your system:

• Node.js
• madge - Install globally: npm install -g madge
• Graphviz - Required for generating visual graphs

Installation

1. Install the extension from the VS Code Marketplace
2. Ensure madge and Graphviz are installed on your system

Usage

1. Right-click on any .js, .jsx, .ts, or .tsx file in the Explorer
2. Select "Generate Dependency Graph" from the context menu
3. View the generated dependency graph in a new panel

Configuration

tsconfig.json Auto-Detection

When madge.tsconfigPath is left empty, the extension automatically searches for a tsconfig.json file starting from the selected file's directory and traversing up to the workspace root.

Author

volkovmqx