What's New in InfraSketch — April 2026: Interactive Editor, GCP Support & More

Raghvendra Pandey — Fri, 24 Apr 2026 00:04:37 +0000

This is a big update for InfraSketch — the free, open-source, browser-based tool that generates architecture diagrams from Terraform HCL, plan JSON, Terragrunt, and docker-compose.yml.

Here's everything that shipped this month.

Interactive Diagram Editor

The most requested feature since launch.

After generating a diagram, click Edit in the toolbar. In edit mode you can drag any node to reposition it — connection arrows update live as you drag, following both endpoints in real time. Click Reset Layout to restore the original auto-layout at any point.

A few details worth knowing:

Works correctly at any zoom level — the coordinate math accounts for the current scale and pan offset
In edit mode, pan is disabled on nodes (so you can drag them) but still works on empty canvas areas
Exported PNG, SVG, and draw.io XML all reflect your repositioned layout

Full GCP Support — 23 Resource Types

InfraSketch now supports Google Cloud Terraform resources across all major categories, with official Google Cloud category icons:

Category	Terraform types
Networking	`google_compute_network`, `google_compute_subnetwork`, `google_compute_firewall`, `google_compute_router`, `google_compute_address`
Compute	`google_compute_instance`, `google_compute_instance_group`, `google_container_cluster`, `google_container_node_pool`
Serverless	`google_cloud_run_v2_service`, `google_cloudfunctions2_function`
Data	`google_sql_database_instance`, `google_bigquery_dataset`, `google_spanner_instance`, `google_bigtable_instance`, `google_redis_instance`
Storage	`google_storage_bucket`
Security	`google_kms_key_ring`, `google_secret_manager_secret`, `google_service_account`
Messaging	`google_pubsub_topic`, `google_pubsub_subscription`
Observability	`google_monitoring_alert_policy`, `google_logging_metric`

GCP resources follow the same layout logic as AWS and Azure: VPC networks become containment boxes, Pub/Sub lands in the Messaging zone, security resources cluster in the Security zone.

New AWS Networking Resources

Four resource types that commonly appear in real-world Terraform configs were previously silently dropped from diagrams. They're now supported:

Route Tables — aws_route_table, aws_route_table_association

Transit Gateway — aws_transit_gateway, aws_transit_gateway_attachment, aws_transit_gateway_vpc_attachment

VPN Gateway — aws_vpn_gateway, aws_vpn_connection, aws_customer_gateway

Network Interfaces — aws_network_interface, aws_network_interface_attachment

If you've been pasting real production configs and wondering why certain networking resources didn't appear — this is the fix.

Data Zone Visualization

Database and storage resources — RDS, DynamoDB, ElastiCache, S3, Cloud SQL, BigQuery, and all the others — now render inside a labelled DATA zone box.

Previously these resources appeared in the diagram without any visual grouping, making it hard to distinguish the data tier from compute at a glance. The zone uses the same dashed-border pattern as the existing Internet, Messaging, and Security zones.

Toast Notifications

Every error and confirmation in InfraSketch previously used the browser's built-in alert() dialog — a blocking modal that interrupts your flow.

All nine of those alerts are replaced with in-page toast notifications that appear at the bottom of the screen. They dismiss automatically after a few seconds, or on click. Parse errors now give specific guidance — if you paste terraform plan text output instead of JSON, you'll see:

"Looks like terraform plan text output — use terraform show -json tfplan instead."

…rather than the generic "no resources found."

UI Polish

A set of smaller visual improvements:

Generate button gradient — flat green → teal-to-blue gradient with a stronger glow on hover
Node hover animation — hovering a resource node scales it up slightly with a green drop shadow
Code editor focus indicator — green left border when the textarea is focused
Diagram panel accent border — subtle green top border distinguishes the diagram panel from the editor panel
Export toolbar separator — thin vertical divider separates Share/Edit from PNG/SVG/draw.io buttons
Edit button default state — no longer shows a permanent accent border before a diagram is generated
Feature card hover — homepage cards now pick up a subtle green background tint on hover

What's Next

Keyboard shortcuts — E for edit mode, R for reset layout, Escape to deselect
Snap-to-grid — hold Shift while dragging to snap to a 16px grid
Multi-select — Shift-click to move multiple nodes as a group
GCP zone grouping — region/zone containment boxes for GCP
CloudFormation support — parsing .yaml CloudFormation stacks

InfraSketch is fully open source under AGPL-3.0. No account required, no backend, everything runs in your browser.

→ Try it at infrasketch.cloud

→ GitHub

If you have a resource type that's missing from your diagrams or a workflow that doesn't work as expected, open an issue — real-world Terraform configs are the best test cases.

"I built a free tool to generate AWS & Azure architecture diagrams from Terraform — no signup needed"

Raghvendra Pandey — Sat, 18 Apr 2026 19:37:33 +0000

When someone asks "can you show me the architecture?",
most DevOps engineers groan internally.

Not because the architecture is complicated — because
drawing it is. You open draw.io, spend 45 minutes dragging
boxes, and by the time you share it, someone has already
changed the infrastructure.

Existing automated tools like Cloudcraft want $49/month
and read access to your AWS account. That's a non-starter
for most individual engineers and small teams.

So I built InfraSketch.

What it does

Paste your Terraform HCL or docker-compose.yml → get a
clean architecture diagram instantly.

Parses 25+ AWS resource types
Detects relationships between resources automatically
Groups by category (Networking, Compute, Database, Storage, Load Balancing, Messaging, Security)
Uses official AWS Architecture icons
Export as PNG, SVG, or draw.io file
100% client-side — your code never leaves your browser
No signup, no cloud credentials, completely free

How it works

The tool does static analysis of your HCL code using a
custom JavaScript parser. It extracts resource type and
name from each resource block, detects cross-references
between resources, groups them visually by category, and
renders the diagram as SVG with official AWS icons.

Everything runs in your browser. There is no backend server.

Try it with this example

Paste this into InfraSketch:

resource "aws_vpc" "main" {
  cidr_block = "10.0.0.0/16"
}

resource "aws_subnet" "public" {
  vpc_id     = aws_vpc.main.id
  cidr_block = "10.0.1.0/24"
}

resource "aws_internet_gateway" "gw" {
  vpc_id = aws_vpc.main.id
}

resource "aws_lb" "app" {
  name               = "app-alb"
  load_balancer_type = "application"
  subnets            = [aws_subnet.public.id]
}

resource "aws_eks_cluster" "main" {
  name     = "production"
  role_arn = aws_iam_role.eks.arn
  vpc_config {
    subnet_ids = [aws_subnet.public.id]
  }
}

resource "aws_iam_role" "eks" {
  name = "eks-role"
  assume_role_policy = jsonencode({})
}

resource "aws_db_instance" "db" {
  identifier     = "prod-db"
  engine         = "postgres"
  instance_class = "db.t3.medium"
}

resource "aws_s3_bucket" "assets" {
  bucket = "my-app-assets"
}

resource "aws_sqs_queue" "events" {
  name = "event-queue"
}

You'll see VPC, subnet, IGW, ALB, EKS, IAM, RDS, S3, and
SQS — all grouped, connected, and rendered with official
AWS icons.

The draw.io export

One feature people find particularly useful — after
generating the diagram you can export it as a draw.io file.
This means InfraSketch generates the base structure
automatically, then you open it in diagrams.net and
customize it for presentations or documentation. Best of
both worlds.

What's next

CloudFormation template support
Kubernetes manifest visualization
Azure and GCP resource icons
Terragrunt support (top community request already!)
Better connection routing and layout engine

Forem: Raghvendra Pandey