Create graphs from module dependencies.
npx @tessl/cli install tessl/npm-madge@8.0.0Madge is a developer tool for generating visual graphs of your module dependencies, finding circular dependencies, and giving you other useful info. It works for JavaScript (AMD, CommonJS, and ES6 modules) and CSS preprocessors (Sass, Stylus, and Less).
npm install -g madge (CLI) or npm install madge (API)const madge = require('madge');For ES6 modules:
import madge from 'madge';const madge = require('madge');
// Analyze a single file
madge('src/app.js').then((res) => {
console.log(res.obj()); // Get dependency tree
console.log(res.circular()); // Find circular dependencies
});
// Analyze a directory
madge('src/').then((res) => {
// Generate visual graph
res.image('graph.svg').then((writtenImagePath) => {
console.log('Image written to ' + writtenImagePath);
});
});Madge is built around several key components:
Core programmatic interface for dependency analysis and graph generation. Perfect for integrating into build tools, CI pipelines, and custom workflows.
function madge(path: string | string[] | object, config?: MadgeConfig): Promise<MadgeInstance>;
interface MadgeInstance {
obj(): object;
warnings(): object;
circular(): string[];
circularGraph(): object;
depends(id: string): string[];
orphans(): string[];
leaves(): string[];
dot(circularOnly?: boolean): Promise<string>;
image(imagePath: string, circularOnly?: boolean): Promise<string>;
svg(): Promise<Buffer>;
}Full-featured CLI for dependency analysis from the command line. Includes options for output formatting, filtering, and visualization.
madge [options] <src...>
# Key options:
-c, --circular # Show circular dependencies
-i, --image <file> # Write graph to file as an image
-j, --json # Output as JSON
--orphans # Show modules that no one is depending on
--leaves # Show modules that have no dependenciesinterface MadgeConfig {
baseDir?: string;
excludeRegExp?: string[] | false;
fileExtensions?: string[];
includeNpm?: boolean;
requireConfig?: string;
webpackConfig?: string;
tsConfig?: string | object;
rankdir?: string;
layout?: string;
fontName?: string;
fontSize?: string;
backgroundColor?: string;
nodeColor?: string;
nodeShape?: string;
nodeStyle?: string;
noDependencyColor?: string;
cyclicNodeColor?: string;
edgeColor?: string;
graphVizOptions?: object | false;
graphVizPath?: string | false;
detectiveOptions?: DetectiveOptions | false;
dependencyFilter?: Function | false;
}
interface DetectiveOptions {
es6?: {
mixedImports?: boolean;
skipTypeImports?: boolean;
};
ts?: {
mixedImports?: boolean;
skipTypeImports?: boolean;
skipAsyncImports?: boolean;
};
tsx?: {
skipAsyncImports?: boolean;
};
}