{"id":45836327,"url":"https://github.com/manimovassagh/infragraph","last_synced_at":"2026-02-26T23:04:32.524Z","repository":{"id":339409240,"uuid":"1161806882","full_name":"manimovassagh/infragraph","owner":"manimovassagh","description":"Visualize Terraform, CloudFormation \u0026 CDK as interactive architecture diagrams","archived":false,"fork":false,"pushed_at":"2026-02-25T22:42:55.000Z","size":2859,"stargazers_count":0,"open_issues_count":30,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-26T00:35:41.197Z","etag":null,"topics":["architecture-diagram","aws-cdk","cloudformation","infrastructure-as-code","react","terraform","typescript","visualization"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manimovassagh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-19T14:40:53.000Z","updated_at":"2026-02-25T22:42:42.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/manimovassagh/infragraph","commit_stats":null,"previous_names":["manimovassagh/aws-architect","manimovassagh/infragraph"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/manimovassagh/infragraph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manimovassagh%2Finfragraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manimovassagh%2Finfragraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manimovassagh%2Finfragraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manimovassagh%2Finfragraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manimovassagh","download_url":"https://codeload.github.com/manimovassagh/infragraph/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manimovassagh%2Finfragraph/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29876371,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T22:37:10.609Z","status":"ssl_error","status_checked_at":"2026-02-26T22:37:09.019Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["architecture-diagram","aws-cdk","cloudformation","infrastructure-as-code","react","terraform","typescript","visualization"],"created_at":"2026-02-26T23:04:30.537Z","updated_at":"2026-02-26T23:04:32.513Z","avatar_url":"https://github.com/manimovassagh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# InfraGraph\n\nVisualize your Infrastructure-as-Code as interactive architecture diagrams. Upload Terraform state files, HCL source, CloudFormation templates, or CDK-synthesized output — InfraGraph auto-detects your cloud provider and IaC tool, then renders a live, zoomable canvas with VPCs, subnets, and resources.\n\n![InfraGraph Landing Page](docs/infragraph-landing.png)\n\n![InfraGraph Canvas](docs/infragraph-canvas.png)\n\n![InfraGraph Documentation](docs/infragraph-docs.png)\n\n## Features\n\n- **Multi-IaC** — Supports Terraform (`.tfstate`, `.tf`), AWS CloudFormation (JSON/YAML), and AWS CDK (synthesized templates)\n- **Multi-cloud** — AWS (20+), Azure (12+), and GCP (11+) resource types with branded icons\n- **GitHub Integration** — Connect your GitHub account, browse repos (including private), scan for IaC projects, and visualize directly\n- **REST API** — Full programmatic access for CI/CD pipelines, scripts, and custom integrations\n- **Session History** — Save and revisit past diagrams (requires Supabase auth)\n- Smart file detection — auto-detects IaC tool and cloud provider from file content\n- Auto-layout: VPC \u003e Subnet \u003e Resource hierarchy with nested containers\n- Interactive React Flow canvas with zoom, pan, minimap, and dark mode\n- Click any node to inspect attributes, tags, and connections\n- Provider badge showing cloud provider, filename, and resource count\n- Export diagrams as PNG\n- Search resources with `Cmd+K`\n- Resource type filter badges with counts\n- Built-in documentation with searchable guides and dedicated API reference\n- Client-side routing with browser back/forward support\n- Sample infrastructure for quick demo (one click per provider)\n- Auto-detection of cloud provider from resource types\n- Google OAuth sign-in with Supabase (optional — works in guest mode without it)\n- Fully Dockerized with multi-stage builds\n\n## Project Structure\n\n```\ninfragraph/\n├── apps/\n│   ├── backend/           # Express API — parses tfstate/HCL/CloudFormation, GitHub integration\n│   │   ├── src/\n│   │   │   ├── parser/    # tfstate, HCL, CloudFormation, and graph parsers\n│   │   │   ├── providers/ # Cloud provider configs (aws, azure, gcp)\n│   │   │   ├── services/  # GitHub service (OAuth, repos, scan, fetch)\n│   │   │   ├── routes/    # API route handlers (parse, github, sessions, user)\n│   │   │   └── middleware/ # Auth middleware (optionalAuth, requireAuth)\n│   │   └── Dockerfile\n│   └── frontend/          # Vite + React 18 — React Flow canvas + UI\n│       ├── src/\n│       │   ├── components/  # Canvas, nodes, panels, modals, docs\n│       │   ├── providers/   # Frontend provider configs (aws, azure, gcp)\n│       │   └── lib/         # API client, auth, GitHub utilities\n│       └── Dockerfile\n├── packages/\n│   └── shared/            # Shared TypeScript types\n├── e2e/                   # Playwright end-to-end tests\n├── test/\n│   ├── fixtures/\n│   │   ├── projects/         # 11 .tf source test projects\n│   │   ├── tfstate/          # 11 .tfstate test fixtures\n│   │   └── cloudformation/   # 5 CloudFormation/CDK test templates\n│   └── screenshots/\n├── docker-compose.yml\n└── Makefile\n```\n\n## Quick Start\n\n```bash\n# With Docker (recommended)\nmake up\n\n# Without Docker\nmake install dev\n```\n\nOpen http://localhost:3000 and upload a `.tfstate`, `.tf`, or CloudFormation template (`.yaml`, `.json`) — or click **Connect GitHub Repo** to browse your repositories.\n\n## Prerequisites\n\n- **Docker** (recommended) — no other dependencies needed\n- **Without Docker**: Node.js 20+, npm 10+\n\n## Environment Variables\n\n### Backend (`apps/backend/.env`)\n\n| Variable | Required | Description |\n|----------|----------|-------------|\n| `PORT` | No | Server port (default: 3001) |\n| `FRONTEND_URL` | No | Frontend URL for CORS (default: http://localhost:3000) |\n| `SUPABASE_URL` | No | Supabase project URL (enables auth \u0026 sessions) |\n| `SUPABASE_SERVICE_ROLE_KEY` | No | Supabase service role key |\n| `GITHUB_CLIENT_ID` | No | GitHub OAuth App client ID (enables GitHub connect) |\n| `GITHUB_CLIENT_SECRET` | No | GitHub OAuth App client secret |\n\n### Frontend (`apps/frontend/.env`)\n\n| Variable | Required | Description |\n|----------|----------|-------------|\n| `VITE_SUPABASE_URL` | No | Supabase project URL |\n| `VITE_SUPABASE_ANON_KEY` | No | Supabase anon key |\n| `VITE_GITHUB_CLIENT_ID` | No | GitHub OAuth App client ID |\n| `VITE_API_URL` | No | Backend API URL override |\n\nAll features degrade gracefully — the app works in guest mode without any env vars.\n\n### GitHub OAuth Setup\n\nTo enable the \"Connect to GitHub\" feature:\n\n1. Create a GitHub OAuth App at https://github.com/settings/developers\n2. Set the callback URL to `http://localhost:3000/auth/github-callback`\n3. Add `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET` to backend `.env`\n4. Add `VITE_GITHUB_CLIENT_ID` to frontend `.env`\n\n## Development\n\n```bash\nmake install       # Install all dependencies\nmake dev           # Run backend (3001) + frontend (3000) concurrently\nmake dev-backend   # Run backend only\nmake dev-frontend  # Run frontend only\n```\n\n## Docker\n\n```bash\nmake up            # Build and start all services\nmake down          # Stop and remove containers\nmake restart       # Full restart (down + clean + build + up)\nmake logs          # Tail container logs\nmake ps            # Show container status\n```\n\n## Testing\n\n```bash\nmake test          # Run all tests (unit + smoke)\nmake test-unit     # Vitest unit tests with coverage\nmake test-e2e      # Playwright end-to-end tests\nmake lint          # ESLint across all workspaces\nmake typecheck     # TypeScript type checking\nmake check         # Run lint + typecheck + test (CI equivalent)\n```\n\n## API\n\nInteractive Swagger docs available at http://localhost:3001/docs when the backend is running.\n\n### Parse Endpoints\n\n| Method | Endpoint | Description |\n|--------|----------|-------------|\n| `POST` | `/api/parse` | Upload a `.tfstate` file (multipart form, field: `tfstate`) |\n| `POST` | `/api/parse/raw` | Send raw tfstate JSON: `{ \"tfstate\": \"...\" }` |\n| `POST` | `/api/parse/hcl` | Upload `.tf` files (multipart form, field: `files`) |\n| `POST` | `/api/parse/cfn` | Upload a CloudFormation template (multipart form, field: `template`) |\n| `POST` | `/api/parse/cfn/raw` | Send raw CFN template: `{ \"template\": \"...\" }` |\n\n### GitHub Endpoints\n\n| Method | Endpoint | Description |\n|--------|----------|-------------|\n| `POST` | `/api/github/token` | Exchange OAuth code for access token |\n| `GET` | `/api/github/repos` | List authenticated user's repos (requires `X-GitHub-Token` header) |\n| `POST` | `/api/github/scan` | Scan a repo for Terraform projects |\n| `POST` | `/api/github/parse` | Parse a Terraform project from a GitHub repo |\n\n### System\n\n| Method | Endpoint | Description |\n|--------|----------|-------------|\n| `GET` | `/health` | Health check |\n\nAll parse endpoints return:\n\n```ts\n{\n  nodes: GraphNode[];\n  edges: GraphEdge[];\n  resources: CloudResource[];\n  provider: CloudProvider;\n  warnings: string[];\n  iacSource?: IacSource; // \"terraform-state\" | \"terraform-hcl\" | \"cloudformation\" | \"cdk\"\n}\n```\n\nGitHub endpoints accept an optional `X-GitHub-Token` header for private repo access and higher rate limits (5,000 req/hr vs 60 req/hr).\n\n## Supported IaC Tools\n\n| Tool | Formats | Status |\n|------|---------|--------|\n| **Terraform** | `.tfstate` (state files), `.tf` (HCL source) | Supported |\n| **AWS CloudFormation** | `.json`, `.yaml`, `.yml`, `.template` | Supported |\n| **AWS CDK** | Synthesized CloudFormation templates (`cdk synth` output) | Supported |\n\nCloudFormation and CDK templates are automatically detected from file content — no manual selection needed.\n\n## Supported Cloud Providers\n\n| Provider | Status | Resource Types |\n|----------|--------|----------------|\n| **AWS** | Supported | VPC, Subnet, EC2, RDS, S3, Lambda, ECS, EKS, ALB, and 20+ more |\n| **Azure** | Supported | VNet, Subnet, VM, Storage, SQL, Functions, NSG, Public IP, LB, AKS, and more |\n| **GCP** | Supported | VPC, Subnet, Compute, Cloud SQL, GCS, Functions, Firewall, LB, GKE, and more |\n\n## GitHub Integration\n\nInfraGraph connects directly to GitHub so you can visualize Terraform projects without downloading files.\n\n### How It Works\n\n1. Click **Connect GitHub Repo** on the home page\n2. Authorize via GitHub OAuth (popup — you stay on the page)\n3. Browse your repositories (including private repos)\n4. Select a repo → InfraGraph scans for Terraform projects\n5. Pick a project → instant architecture diagram\n\n### Public Repos (No Auth)\n\nYou can also paste any public GitHub repo URL without connecting:\n\n```\nhttps://github.com/hashicorp/terraform-provider-aws\n```\n\n### Security\n\n- GitHub tokens are stored in your browser only — never on the server\n- OAuth scope is limited to `repo` (read access)\n- No code is cloned or stored — files are fetched on demand and processed in memory\n- Click **Disconnect** at any time to revoke access\n\n## API Usage\n\nInfraGraph's REST API lets you integrate infrastructure visualization into your workflows — CI/CD pipelines, internal dashboards, or custom tools.\n\n### Scan a GitHub Repo\n\n```bash\ncurl -X POST http://localhost:3001/api/github/scan \\\n  -H \"Content-Type: application/json\" \\\n  -H \"X-GitHub-Token: ghp_your_token\" \\\n  -d '{\"repoUrl\": \"https://github.com/your-org/infrastructure\"}'\n```\n\nReturns a list of directories containing `.tf` files:\n\n```json\n{\n  \"owner\": \"your-org\",\n  \"repo\": \"infrastructure\",\n  \"defaultBranch\": \"main\",\n  \"projects\": [\n    { \"path\": \"environments/production\", \"files\": [\"main.tf\", \"variables.tf\"] },\n    { \"path\": \"modules/networking\", \"files\": [\"vpc.tf\", \"subnets.tf\"] }\n  ]\n}\n```\n\n### Parse a Terraform Project\n\n```bash\ncurl -X POST http://localhost:3001/api/github/parse \\\n  -H \"Content-Type: application/json\" \\\n  -H \"X-GitHub-Token: ghp_your_token\" \\\n  -d '{\"repoUrl\": \"https://github.com/your-org/infrastructure\", \"projectPath\": \"environments/production\"}'\n```\n\n### Upload a State File\n\n```bash\ncurl -X POST http://localhost:3001/api/parse \\\n  -F \"tfstate=@terraform.tfstate\"\n```\n\n### Send Raw JSON\n\n```bash\ncurl -X POST http://localhost:3001/api/parse/raw \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\"tfstate\": \"\u003cyour-state-json\u003e\"}'\n```\n\n### Upload a CloudFormation Template\n\n```bash\ncurl -X POST http://localhost:3001/api/parse/cfn \\\n  -F \"template=@my-stack.yaml\"\n```\n\nFor CDK-synthesized templates, add `?source=cdk` to tag the source:\n\n```bash\ncurl -X POST http://localhost:3001/api/parse/cfn?source=cdk \\\n  -F \"template=@cdk.out/MyStack.template.json\"\n```\n\nAll parse responses return graph data (nodes, edges, resources, provider) that can be rendered with React Flow or any graph library.\n\n\u003e **Tip:** The `X-GitHub-Token` header is optional for public repos. Adding it increases the GitHub API rate limit from 60 to 5,000 requests per hour.\n\n## License\n\nApache-2.0 with Commons Clause\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanimovassagh%2Finfragraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanimovassagh%2Finfragraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanimovassagh%2Finfragraph/lists"}