About InfraSketch

Why InfraSketch exists

Every DevOps engineer knows the pain: you've written hundreds of lines of Terraform, your infrastructure is running perfectly, but when someone asks "can you show me the architecture?" — you're stuck opening draw.io and manually dragging boxes for an hour.

Existing tools like Cloudcraft and Hava require you to connect your AWS account, hand over credentials, and pay $49-99/month. That's overkill when all you need is a quick diagram from your existing code.

InfraSketch solves this. Paste your Terraform code, get a diagram. No credentials, no signup, no cost. Everything runs in your browser — your code never touches a server.

What it does

Who built this

InfraSketch is built by Raghvendra Pandey, a Senior DevOps / SRE Engineer with 9+ years of experience building cloud infrastructure in production.

Having managed 100+ microservices on AWS EKS, migrated service meshes from Consul to Istio, and written thousands of lines of Terraform — the frustration of manually drawing architecture diagrams was personal. InfraSketch is the tool I wished existed.

The first version was a weekend project: a simple Terraform HCL parser that recognized VPCs, subnets, and EC2 instances and connected them with arrows. It was rough, but it was useful — within a few days of posting it on Reddit, it had several hundred users. That reaction confirmed the problem was real and worth solving properly.

Since then InfraSketch has grown from a 400-line script to an 8-format diagram generator with a GitHub Action, a CLI, an MCP server, and a web component. Every feature came from a user request or a problem I hit personally: module expansion came from a user who couldn't understand why their VPC module wasn't showing subnets; blast radius analysis came from an incident where no one on the team could quickly explain which services downstream would be affected by an RDS failover.

Find me on GitHub and LinkedIn.

Design philosophy

Three principles guide every decision in InfraSketch:

Zero friction. No signup, no credentials, no install. You open the URL, paste your code, and see the diagram. Every step between "I want a diagram" and "I have a diagram" is a reason to give up and go back to drawing boxes manually. InfraSketch has exactly one step.

Your code stays private. Infrastructure code is sensitive. It reveals your network topology, naming conventions, resource sizes, and deployment patterns. Tools that require cloud account connections or upload your code to process it are asking for a level of trust that isn't warranted for a diagram generator. InfraSketch runs entirely in the browser — your code is parsed locally by JavaScript and never transmitted anywhere.

Useful over pretty. A diagram that accurately shows your VPC has three private subnets and an EKS cluster in each availability zone is more valuable than a beautiful diagram that omits the subnet structure. Automatic layout may not look as polished as a hand-crafted Lucidchart diagram, but it reflects what your code actually creates. The interactive editor lets you refine layout for presentations; the auto-layout is designed to be accurate first.

How the tool works technically

InfraSketch has no server. When you open infrasketch.cloud, your browser downloads static HTML, CSS, and JavaScript files from GitHub Pages (via Cloudflare). Everything after that runs locally.

The parsers are custom JavaScript modules — one per IaC format. The Terraform HCL parser uses regex-based pattern matching to extract resource, module, and data blocks, then scans attribute values for cross-resource references. The Terraform plan JSON parser reads the structured resource_changes array and the configuration.root_module expression graph directly — no regex needed because it's already structured data. The Kubernetes parser uses the js-yaml library to parse manifests, then maps kind values to resource types.

The renderer builds an SVG from scratch. Each resource is a group element containing a rounded rectangle, an icon image (inlined as base64 in the SVG), and a text label. VPC and subnet containers are rectangles drawn at a lower z-level before the resource nodes. Connection arrows are SVG paths with arrowhead markers. The interactive drag-and-drop editor uses SVG mouse events to update position state in memory and re-render connections live.

The shareable URL encodes the input IaC code using LZ-string compression into a URL hash fragment. No server request is made to generate the share link — it's computed entirely in the browser. When someone opens a shared link, their browser decompresses the hash, populates the editor, and auto-generates the diagram.

Tech stack

InfraSketch is intentionally simple: vanilla HTML, CSS, and JavaScript — no frameworks, no build step, no bundler. The only runtime dependency is js-yaml (vendored in lib/). Diagrams render as SVG. Icons are the official AWS Architecture Icon set and the Microsoft Azure icon set, inlined as base64 data URIs.

The site is hosted on GitHub Pages with a custom domain via Cloudflare. CI runs on GitHub Actions: automated tests cover all 8 parsers with unit tests and draw.io XML visual regression snapshots. There's no build step — git push deploys immediately.

The CLI is an npm package (infrasketch) that encodes local files as URLs and opens a browser. The GitHub Action is a composite action that detects changed IaC files, encodes them as diagram URLs, and posts PR comments using the GitHub API. The MCP server exposes two tools — generate_diagram and detect_iac_format — for use in Claude Code, Cursor, and Windsurf.

Roadmap

InfraSketch ships continuously. Recent additions include: 8 IaC formats (Terraform HCL, plan JSON, CloudFormation, CDK, Pulumi, Kubernetes, Terragrunt, Docker Compose), GCP support (23+ types), Azure Bicep and ARM support (40+ types), interactive drag-and-drop editor, blast radius analysis, Terraform module grouping with collapse/expand, plan change badges (+/~/↺/×), security overlay (Checkov integration), cost overlay (Infracost integration), ZIP upload for local module expansion, Terraform Registry auto-fetch, CLI, GitHub Action, MCP server, and web component embed.

Active development areas: more resource types for all three cloud providers, improved cross-file reference resolution for HCL, diff view between two diagram states, and improved layout algorithms for very large architectures (100+ resources).