A professional node-based investigation mapping platform designed for digital forensics and ethical hacking reconnaissance. Built with React Flow, this application enables security researchers and investigators to visually map out complex investigation workflows, track evidence chains, and document reconnaissance findings.
- Interactive Flow Mapping: Drag-and-drop interface for creating investigation workflows
- Multiple Investigation Flows: Create and manage multiple separate investigation projects
- Real-time Collaboration Ready: Architecture supports future collaborative features
- Auto-save: Automatic persistence of all work to local storage
- Export Capabilities: Export flows as JSON data or PNG images
- Web Endpoints: Map API endpoints, websites, and web services with authentication details
- SSH Access: Document SSH connections with host, port, and authentication methods
- RDP Access: Track Remote Desktop connections and credentials
- Credentials: Securely store and organize various types of credentials (passwords, tokens, keys)
- Artifacts: Document evidence files with metadata (hashes, file types, sizes)
- Custom Nodes: Build your own node types with the integrated node builder
- Undo/Redo: Full history management with 50-step undo/redo capability
- Keyboard Shortcuts: Efficient workflow with keyboard navigation
- Node Editing: Double-click any node to edit its properties
- Flow Management: Create, rename, delete, and switch between investigation flows
- Import/Export: Share flows via JSON files or export visual representations
- Responsive Design: Works on desktop and tablet devices
- React 18 - Modern React with hooks and concurrent features
- TypeScript - Type-safe development
- Vite - Fast build tool and development server
- shadcn/ui - Modern, accessible component library
- Tailwind CSS - Utility-first CSS framework
- Radix UI - Unstyled, accessible UI primitives
- Lucide React - Beautiful icon library
- React Flow - Powerful library for creating node-based diagrams
- HTML2Canvas - Export flows as images
- React Query - Server state management (extensible for future API integration)
- Local Storage - Client-side persistence
- ESLint - Code linting
- PostCSS - CSS processing
- Autoprefixer - CSS vendor prefixing
- Node.js 18.0.0 or higher
- npm 8.0.0 or higher (or yarn/pnpm)
-
Clone the repository
git clone https://github.com/Samarthegde/recon-mapper.git cd recon-mapper -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:8080to access the application.
npm run buildThe built files will be in the dist/ directory.
npm run preview- Start a New Flow: Click the "New Flow" button in the flow manager
- Add Nodes: Drag node types from the palette on the left onto the canvas
- Connect Nodes: Drag from the connection points on nodes to create relationships
- Edit Properties: Double-click any node to edit its details
- Save Progress: All changes are automatically saved to your browser's local storage
- Configure API endpoints with methods (GET, POST, PUT, DELETE)
- Set authentication types (None, Basic, Bearer, API Key)
- Track response status codes
- Document connection details (host, port, username)
- Specify authentication methods
- Useful for tracking infrastructure access points
- Securely store various credential types
- Support for passwords, tokens, and keys
- Visual indicators for credential types
- Document evidence files and their metadata
- Include file hashes for integrity verification
- Track file sizes and types
- Create specialized node types for your specific investigation needs
- Define custom properties and visual styling
- Extend the platform for domain-specific requirements
- Delete/Backspace: Remove selected nodes and connections
- Ctrl+Z (Cmd+Z on Mac): Undo last action
- Ctrl+Y (Cmd+Y on Mac): Redo last action
- Ctrl+Shift+Z: Alternative redo shortcut
- JSON Export: Save your flow as structured data for backup or sharing
- PNG Export: Generate visual representations of your investigation flows
- Import: Load previously exported JSON files to restore flows
src/
├── components/
│ ├── nodes/ # Individual node type components
│ ├── forms/ # Node property editing forms
│ ├── ui/ # Reusable UI components
│ └── ... # Other UI components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── pages/ # Route components
├── types/ # TypeScript type definitions
└── ...
The application currently uses local storage for persistence. Future versions may support:
- Remote API integration
- Database storage
- Cloud synchronization
- Themes: Built-in dark/light mode support via next-themes
- Node Styling: Customize node appearances through CSS variables
- Custom Node Builder: Create specialized node types for specific use cases
We welcome contributions from the security research community!
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and ensure tests pass
- Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow the existing TypeScript and React patterns
- Use ESLint configuration for code quality
- Write meaningful commit messages
- Document new features and node types
- Built with React Flow for the flow visualization
- UI components powered by shadcn/ui
- Icons from Lucide
For questions, bug reports, or feature requests:
- Open an issue on GitHub
- Join the discussion in our community forums
Note: This tool is designed for ethical security research and digital forensics. Always ensure you have proper authorization before conducting any reconnaissance activities.