An interactive visualization of the MITRE ATT&CK Framework using hierarchical tree structures
Interactive MITRE Tree transforms the complex MITRE ATT&CK framework into an intuitive, navigable tree visualization. Built with modern React and TypeScript, it provides cybersecurity professionals, researchers, and students with an interactive way to explore attack tactics, techniques, and real-world examples.
Navigate through the MITRE ATT&CK framework using an intuitive tree structure with expand/collapse functionality
View comprehensive technique descriptions, detection methods, and real-world examples
Explore historical incidents and understand how theoretical techniques are applied in practice
- Hierarchical Visualization: Navigate through MITRE ATT&CK framework using an intuitive tree structure
- Smart Expand/Collapse: Smooth animations with intelligent node management for large datasets
- Multi-Row Layout: Automatically organizes large numbers of child nodes into manageable rows
- Zoom & Pan Controls: Dynamic view adjustment with automatic centering on selected nodes
- Comprehensive Descriptions: Full technique details with associated tactics and procedures
- Detection Methods: Integrated detection strategies and data sources for each technique
- Real-Time Data: Live fetching from MITRE ATT&CK API for up-to-date information
- Cross-References: Links between related techniques and tactics
- Historical Incidents: Curated examples of actual cyberattacks using specific techniques
- Attack Correlation: Visual mapping between theoretical techniques and real-world applications
- External Resources: Direct links to detailed incident reports and analysis
- Context Learning: Bridge the gap between theory and practice
- Material-UI Design: Clean, professional interface with consistent design language
- Responsive Layout: Optimized for desktop, tablet, and mobile viewing
- Custom Node Icons: Emoji-based visual indicators for different attack types
- Smooth Animations: Fluid transitions and interactions throughout the application
The easiest way to start the application:
npm startThis will start the development server and open the application in your browser at http://localhost:3000.
- Node.js (v18.0.0 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/GaiShukrun/Interactive-MITRE-Tree.git cd Interactive-MITRE-Tree -
Install dependencies:
npm install
-
Start the development server:
npm start
Create an optimized production build:
npm run build- Frontend: React 19 with TypeScript
- UI Components: Material-UI for consistent design system
- Visualization: D3.js with react-d3-tree for interactive tree rendering
- Data Source: MITRE ATT&CK Framework API integration
- Deployment: Netlify with automatic builds from GitHub
- Development: Hot reloading with Create React App
- AttackTree: Main component handling the interactive tree display with zoom, pan, and node management
- Custom Node Rendering: Emoji-based icons and dynamic sizing based on node types
- Multi-Row Layout: Intelligent organization of large datasets into manageable visual groups
- ExampleModal: Displays real-world attack examples with technique correlation
- Detail Panels: Comprehensive information about selected techniques including detection methods and data sources
- Real-Time Updates: Live data fetching from MITRE API for current threat intelligence
- Responsive Design: Optimized for desktop and mobile viewing
- Smooth Animations: Fluid transitions between tree states and information panels
- Accessibility: Screen reader support and keyboard navigation
- Automatic refresh when files change during development
- Fast rebuild times with optimized webpack configuration
- Full TypeScript support with comprehensive type definitions
- Custom interfaces for MITRE ATT&CK data structures
- Compile-time error checking for better code quality
Please read our contributing guidelines before submitting pull requests to the project.
This project is licensed under the MIT License - see the LICENSE file for details.