flowmap-cli

Flowmap 🗺️

Visualize your codebase as an interactive flow graph. Understand file dependencies, function calls, and project structure at a glance — without reading a single line of code.

What it does

Flowmap analyzes your local project and generates an interactive node graph showing:

• Every file as a node, color coded by type (component, hook, service, util)
• Import and call relationships as edges between files
• Functions inside each file with complexity scores
• Dead code detection — files nothing imports
• Circular dependency warnings
• Click any function to see its code, what it calls, and what calls it

Install & Run

Primary UX:

flowmap-cli

Optional explicit paths:

flowmap-cli .
flowmap-cli ./my-project

Absolute path examples:

flowmap-cli D:\your\project\folder
flowmap-cli /Users/yourname/projects/my-app

With npx:

npx flowmap-cli
npx flowmap-cli .
npx flowmap-cli /path/to/your/project

By default, Flowmap opens automatically in your browser at http://localhost:3001.

CLI Flags

• --watch
  Auto-refreshes the graph when files change in the analyzed project.
• --port <number>
  Runs Flowmap on a custom port.
• --no-open
  Starts the server without launching your browser.

Examples:

npx flowmap-cli . --watch
npx flowmap-cli /path/to/your/project --watch
npx flowmap-cli /path/to/your/project --port 3002
npx flowmap-cli /path/to/your/project --watch --port 3002 --no-open

Project Usage in package.json

Add scripts in your project package.json:

{
  "scripts": {
    "flowmap-cli": "flowmap-cli",
    "flowmap-cli:watch": "flowmap-cli . --watch",
    "flowmap-cli:port": "flowmap-cli . --port 3002",
    "flowmap-cli:ci": "flowmap-cli . --no-open"
  }
}

Then run:

npm run flowmap-cli
npm run flowmap-cli:watch
npm run flowmap-cli:port
npm run flowmap-cli:ci

Supported Languages

• JavaScript (.js, .jsx)
• TypeScript (.ts, .tsx)

Java / Spring Boot support coming soon.

Features

• 🔍 Search files and functions — Ctrl+K
• 🎯 Click a node to inspect its functions, imports, line count
• 💡 Hover a node to highlight only its direct connections
• ⚠️ Circular dependency detection
• 🪦 Dead code detection
• 🗺️ Minimap for large projects
• 🔄 Analyze another project without restarting

Tech Stack

• Frontend: React + TypeScript + Vite + React Flow
• Backend: Node.js + Express
• Analysis: Static regex-based AST parsing

License

MIT