React Dependency Analyzer

Visualize your React & Next.js component architecture instantly.

A CLI tool that recursively analyzes your React/Next.js project and generates a dependency graph using Mermaid.js. It helps developers understand complex component structures, refactor legacy code, and document architecture automatically.

✨ Features

• Recursive Analysis: Deeply scans src/app or src directories to find all dependencies.
• Mermaid Output: Generates a .md file and a direct link to the Mermaid Live Editor.
• Smart Path Resolution: Automatically handles TypeScript aliases (@/), local imports, and index files.
• Zero Config Setup: Installs with a default configuration but is fully customizable.
• Automated Integration: Automatically adds an analyze script to your package.json upon installation.

🚀 Installation

Install it as a development dependency:

npm install --save-dev @accord_33/react-dep-analyzer

That's it! The post-install script will automatically:

1. Create a default configuration file (analyzer.config.json).
2. Add the "analyze": "analyze ." script to your package.json.

📖 Usage

Basic Usage

Since the script is automatically added, simply run:

npm run analyze

CLI Usage

You can also run it directly via npx or strictly specify a directory:

# Analyze current directory
npx @accord_33/react-dep-analyzer .

# Analyze a specific directory
npx @accord33/react-dep-analyzer ./src/components

Output

After running the command, you will see:

1. dependencies.md: A Markdown file containing the Mermaid graph syntax.
2. Console Output: A generated URL for the Mermaid Live Editor. Click it to view and edit your graph in the browser immediately.

⚙️ Configuration

A analyzer.config.json file is created in your project root upon installation. You can customize the target extensions:

{
  "extensions": [".tsx", ".ts", ".jsx", ".js"]
}

🤝 Contributing & Support

This project is currently developed personally.

I created this tool to solve the complexity of visualizing large-scale Next.js applications. While I am not accepting Pull Requests (code contributions) at this time to maintain the architectural vision, I highly value your feedback!

• Found a bug? Please open an Issue.
• Have a feature request? Feel free to suggest it in the Issues tab.

👤 Author

Accord33

• Future University Hakodate
• Focus: Kubernetes, Cloud Native, AI Agents

📄 License

This project is licensed under the MIT License.