InfraGraph InfraGraph is a modern, interactive cloud architecture diagramming tool built with React Flow, Framer Motion, and Vite. It allows visual design of infrastructure components, property modification, cost estimation, and complete layout export.

Live Demo: https://hitman298.github.io/InfraGraph

Features Visual Design: Drag-and-drop node creation, dynamic properties panel (Properties, Cost, AI tabs).

Intelligent Assistance: AI-driven optimization insights and smart contextual suggestions.

Data Management: JSON import/export, image export (dom-to-image-more), automatic Local Storage persistence.

Canvas Interaction: Node deletion via keyboard, Zoom to Fit, Quick Add Button for rapid component creation.

Built With React

React Flow

Tailwind CSS

Framer Motion

Lucide Icons

dom-to-image-more

Getting Started To set up for local development:

Clone the repository

git clone https://github.com/hitman298/InfraGraph.git

Navigate into the project directory

cd InfraGraph

Install dependencies

pnpm install

Start the development server

pnpm dev

Build & Deploy To build for production and deploy to GitHub Pages:

Build the application

pnpm build

Deploy to GitHub Pages

pnpm deploy

Ensure your package.json includes:

"homepage": "https://hitman298.github.io/InfraGraph"

Author Lohith Ratan — @hitman298

This solo project expands knowledge in infrastructure design, React Flow, and public tool-building. Contributions are welcome.

License MIT License