A modern, interactive visualization tool for exploring Common Weakness Enumeration (CWE) relationships. This application helps security professionals, developers, and researchers understand the connections between different CWEs through an intuitive graph interface.
- 🔍 Quick CWE Search: Instantly search and visualize any CWE by its ID
- 📊 Interactive Graph: Drag, zoom, and explore the relationship network
- 🎨 Semantic Layout:
- Main CWE centered
- Child relationships displayed below
- Parent relationships positioned above
- Peer relationships on the right
- Other relationships on the left
- 🎯 Clear Relationship Types:
- Color-coded nodes and edges
- Animated connections
- Hover effects for better visibility
- 📱 Responsive Design: Works seamlessly on desktop and tablet devices
- 🚀 Real-time Updates: Instant graph updates when searching new CWEs
- Frontend: React with TypeScript
- Styling: Tailwind CSS
- Graph Visualization: React Flow
- Icons: Lucide React
- Database: Supabase
- Build Tool: Vite
-
Clone the repository:
git clone https://github.com/yourusername/cwe-dependency-graph.git
-
Install dependencies:
npm install
-
Set up environment variables: Create a
.envfile with your Supabase credentials:VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key -
Start the development server:
npm run dev
The application uses two main tables in Supabase:
id: string (Primary Key)name: string
id: number (Primary Key)cwe_id: string (Foreign Key)related_cwe: string (Foreign Key)relation_type: string
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
- Common Weakness Enumeration for providing the CWE database
- React Flow for the excellent graph visualization library
- Tailwind CSS for the utility-first CSS framework
- Supabase for the backend infrastructure