This is a big update. We shipped an interactive drag-and-drop diagram editor, full GCP support across 23 resource types, new AWS networking resources that were previously missing from diagrams, a data zone visualization, and a round of UI polish across the board. Here's everything that changed.
Interactive Diagram Editor
The most requested feature since launch. After generating a diagram, click Edit in the toolbar to enter interactive mode. In edit mode you can drag any node to reposition it — connection arrows update live as you drag, following both endpoints in real time.
When you're happy with the layout, click Done to lock it in. If you want to go back to the auto-generated layout at any point, click Reset Layout. The original positions are always preserved.
A few technical details worth knowing:
- Dragging works correctly at any zoom level — the coordinate math accounts for the current zoom scale and pan offset, so nodes land exactly where you drop them regardless of how zoomed in or out you are.
- Clicking the diagram background deselects the current node.
- 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 reflect your repositioned layout.
Try the editor
Generate any diagram and click Edit in the toolbar to start repositioning nodes.
Open InfraSketchFull GCP Support
InfraSketch now supports 23 Google Cloud resource types across all major categories, with official Google Cloud category icons in every diagram.
| 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_compute_autoscaler, google_container_cluster, google_container_node_pool |
| Serverless | google_cloud_run_service, google_cloud_run_v2_service, google_cloudfunctions_function, google_cloudfunctions2_function |
| Data | google_sql_database_instance, google_bigquery_dataset, google_spanner_instance, google_bigtable_instance, google_firestore_document, 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, google_logging_project_sink |
GCP resources follow the same layout logic as AWS and Azure: VPC networks become containment boxes, subnets group their member resources, Pub/Sub lands in the Messaging zone, security resources cluster in the Security zone, and Load Balancer resources appear in the Ingress row.
To try it, select the Terraform tab, load the Production GCP stack example from the dropdown, and click Generate Diagram.
New AWS Networking Resources
Four resource types that commonly appear in real-world Terraform configs were previously silently dropped from diagrams. They're now fully supported:
Route Tables
aws_route_table, aws_route_table_association, aws_main_route_table_association — placed in the Internet zone alongside the IGW they route through.
Transit Gateway
aws_transit_gateway, aws_transit_gateway_attachment, aws_transit_gateway_vpc_attachment — the hub for multi-VPC and hybrid connectivity.
VPN Gateway
aws_vpn_gateway, aws_vpn_connection, aws_customer_gateway — for site-to-site VPN connections to on-premises networks.
Network Interfaces
aws_network_interface, aws_network_interface_attachment — explicit ENI definitions, common in appliance and multi-homed instance configs.
If you've been pasting real production Terraform 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, Azure SQL, and all the others — now render inside a labelled DATA zone box. Previously these resources appeared 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, keeping the visual language consistent across the diagram.
Toast Notifications
Every error and confirmation in InfraSketch previously used the browser's built-in alert() dialog — a blocking modal that interrupts your flow and looks out of place in a dark-themed tool.
All nine of those alerts are now in-page toast notifications that appear at the bottom of the screen. They dismiss automatically after a few seconds, or immediately on click. Errors are red, successes are green, and informational messages are muted. Parse errors also give you specific guidance now — if you paste terraform plan text output instead of JSON, you'll see a message telling you to run terraform show -json instead of a generic "no resources found".
UI Polish
A set of smaller visual improvements that add up:
- Generate button gradient — the flat green button is now a teal-to-blue gradient with a stronger glow on hover.
- Node hover animation — hovering a resource node now scales it up slightly (
scale(1.05)) with a green drop shadow, making the diagram feel interactive even in view mode. - Code editor focus indicator — a green left border appears when the editor textarea is focused, giving a clear active state.
- Diagram panel accent border — the diagram panel now has a subtle green top border, visually distinguishing it from the editor panel.
- Export toolbar separator — a thin vertical divider separates the Share/Edit buttons from the format export buttons (PNG, SVG, draw.io), reducing visual noise.
- Edit button default state — the Edit button previously showed a permanent accent border even before any diagram existed. It now looks like any other export button and only lights up when edit mode is active.
- Feature card hover — homepage feature cards now pick up a subtle green background tint on hover alongside the existing lift animation.
What's Next
A few things on the near-term roadmap:
- Keyboard shortcuts — E for edit mode, R for reset layout, Escape to deselect.
- Snap-to-grid in the editor — hold Shift while dragging to snap nodes to a 16px grid.
- Multi-select — Shift-click to select multiple nodes and move them as a group.
- GCP zone grouping — region and zone containment boxes for GCP, similar to how AWS diagrams show AZ grouping.
- CloudFormation support — parsing
.yamlCloudFormation stacks as a new input format.
If there's a specific resource type that's missing from your diagrams, or a workflow that doesn't work as expected, open an issue or send a note. Real-world Terraform configs are the best test cases we have.
Try everything in your browser
No account, no install. Paste your Terraform, plan JSON, Terragrunt, or docker-compose.yml and generate a diagram in seconds.
Open InfraSketch →