This project provides an AI-powered tool to convert static system design diagrams into interactive, explorable visualizations. It targets engineers and architects who need to understand, document, or present complex system architectures more effectively, offering a dynamic way to navigate and analyze design components beyond static images.

How It Works

The system leverages OpenAI's GPT-4o for AI-powered analysis of uploaded system design images. It first generates an editable Mermaid.js diagram from the image, which is then transformed into an interactive React Flow graph. Users can click on individual components within the graph to reveal inferred details about their technology stack and role, facilitating a deeper understanding of the system's architecture.

Quick Start & Requirements

• Primary install/run command: npm install followed by npm run dev.
• Prerequisites: Node.js (v18 or higher), an OpenAI API Key.
• Setup: Clone the repository, install dependencies, create a .env file with VITE_OPENAI_API_KEY=your_sk_key_here.
• Access: Navigate to http://localhost:5173.
• Links: GitHub Repository

Highlighted Details

• AI-driven conversion of static images (architecture diagrams, flowcharts) to interactive graphs.
• Supports automatic generation of editable Mermaid.js diagrams.
• Interactive React Flow visualization allows deep dives into component details.
• Features a modern, dark-themed UI with zoom, pan, and code copy controls.

Maintenance & Community

Contributions are welcomed via Pull Requests. No specific community channels (Discord, Slack) or roadmap links are provided in the README.

Licensing & Compatibility

• License: MIT License.
• Compatibility: Permissive MIT license generally allows for commercial use and integration into closed-source projects, though specific review is recommended.

Limitations & Caveats

Full AI analysis features require a valid OpenAI API key; otherwise, the application runs in a mock mode with sample data. The effectiveness of the AI conversion is dependent on the clarity and format of the input image.