duhnn

Universal codebase visualization CLI. Run npx duhnn from any JavaScript/TypeScript repository to get an interactive visualization of your codebase — file explorer, dependency graph, user journey, and external services.

Quick Start

# From any JS/TS project directory:
npx duhnn

This will:

1. Analyze your codebase — files, imports, framework, routes
2. Install a /duhnn command in .cursor/commands/duhnn.md
3. Serve an interactive visualization at http://localhost:4444

AI Enrichment (Recommended)

For the best visualization experience, enrich the analysis with AI-generated descriptions:

1. Run npx duhnn once to generate the initial analysis
2. Open Cursor and use the /duhnn command in chat
3. The AI will read your code and generate file descriptions, user flows, and external service details
4. Run npx duhnn again to see the fully enriched visualization

What You Get

• File Explorer — Browse every file with descriptions and category labels
• Dependency Graph — Interactive import/export relationship visualization with filtering
• User Journey — Step-by-step walkthrough of how users navigate your app
• External Services — Database collections, auth flows, storage paths, and more

CLI Options

Usage: duhnn [options] [dir]

Arguments:
  dir                    Root directory to analyze (default: ".")

Options:
  -V, --version          Output the version number
  -p, --port <number>    Port to serve visualization on (default: "4444")
  --analyze-only         Only run analysis, do not serve
  --force                Re-analyze even if analysis exists
  -h, --help             Display help for command

How It Works

1. Static Analysis — Walks your file tree (respecting .gitignore), parses imports/exports, detects framework and routes
2. AI Enrichment — A Cursor command file instructs the AI to read your code and generate rich metadata (descriptions, user flows, service integrations)
3. Visualization — An Express server serves a React app that renders the combined data as interactive graphs

Generated Files

All duhnn data is stored in .duhnn/ (auto-added to .gitignore):

• .duhnn/analysis.json — Auto-generated static analysis
• .duhnn/enrichments.json — AI-generated descriptions and flows

Supported Frameworks

• Next.js (App Router)
• Vite
• Create React App
• Angular
• Express / Fastify / Koa
• Any JS/TS project

Publishing

npm run build   # build app UI into dist/ (also runs automatically on publish)
npm login
npm publish

If another app uses duhnn and the UI hasn’t updated:

• The other app serves whatever is in node_modules/duhnn/dist. To get the new UI:
  1. In this repo: run npm run build, then either publish a new version (npm version patch && npm publish) or, if the other app uses a file: link to this repo, leave the build as-is.
  2. In the other app: reinstall duhnn so it gets the new build — e.g. npm install duhnn@latest or npm update duhnn, or npm install if using a file: link. Then redeploy the other app.
  3. If you use npx from the other app: force a fresh install with npx clear-npx-cache then npx duhnn, or run npx [email protected] (or the new version) so the cache isn’t used.

License

MIT