Terraform & OpenTofu State Visualizer

A Terraform and OpenTofu state visualizer is an interactive Infrastructure-as-Code (IaC) inspection tool that parses your deployment state JSON and maps every provisioned cloud resource, module, and dependency into a clear topological architecture diagram.

When managing complex cloud environments across AWS, Microsoft Azure, Google Cloud Platform (GCP), or Kubernetes, raw .tfstate files quickly grow into thousands of lines of nested JSON. Reading these files manually to trace why a subnet, security group, or IAM role is blocking a teardown is slow and error-prone.

By rendering your state file visually, platform engineers, SREs, and DevOps teams can audit resource hierarchies, isolate blast radiuses before running terraform apply or tofu destroy, and generate up-to-date infrastructure documentation automatically.

You can generate an interactive infrastructure diagram from either a raw state file or a CLI JSON export in four simple steps:

1. Export Your State JSON: Locate your local terraform.tfstate / tofu.tfstate file, pull remote state using terraform state pull > state.tfstate, or export a clean representation using terraform show -json > state.json (or tofu show -json > state.json).
2. Load Into the Client-Side Sandbox: Drag and drop your file into the visualizer workspace above, or paste the raw JSON payload directly. You can even turn off your Wi-Fi before dropping the file to verify zero network transmission.
3. Filter & Inspect Dependencies: Use the module selector, search bar, and data-source toggle to isolate specific microservices or VPC tiers. Click any resource node to inspect its live attributes and upstream depends_on edges.
4. Export for Documentation or PRs: Export your visual graph as a scalable SVG image, copy the generated Mermaid.js markdown for GitHub Pull Requests, download a Draw.io (.drawio) XML file, or download a secret-scrubbed .tfstate file for safe team debugging.

In production DevOps workflows, a .tfstate file is one of the most sensitive artifacts in your organization. Even when you mark variables as sensitive = true in HCL, Terraform and OpenTofu store plaintext database master passwords, TLS private keys, OAuth client secrets, and cloud API tokens inside the state JSON.

Uploading a production state file to a server-based web application violates cloud security compliance (SOC2, ISO 27001, HIPAA). That is why this visualizer is built as a zero-backend, browser-only sandbox:

• Zero Network Uploads: File parsing utilizes the native browser FileReader API and in-memory JavaScript execution. Your state payload never crosses the network or touches a server database.
• Offline Mode Verification: Once this page loads, you can disconnect from the internet completely and analyze your production state files in an air-gapped browser session.
• Auto-Redacted Attribute Inspector: Sensitive keys matching patterns such as password, secret_key, private_key, access_token, and client_secret are automatically blurred in the UI.
• One-Click State Sanitizer: Need to share a broken state file with a colleague or open a GitHub issue? Use the Download Scrubbed .tfstate feature to replace all sensitive string values with REDACTED placeholders while preserving the exact structural graph.

As engineering organizations migrate to OpenTofu alongside HashiCorp Terraform, tooling compatibility is essential. This visualizer natively supports both Terraform state v4 schemas and OpenTofu state outputs.

One of OpenTofu's flagship security features (introduced in OpenTofu v1.7+) is native client-side state and plan encryption using AES-GCM and key providers such as PBKDF2, AWS KMS, GCP KMS, and OpenBao. If you drop an encrypted tofu.tfstate file directly into the tool, the parser automatically detects the encryption metadata block and guides you on exporting a decrypted JSON stream locally via tofu show -json so you can visualize your resources without exposing your encryption passphrase.

Both Terraform and OpenTofu ship with a built-in CLI command: terraform graph (or tofu graph). However, DevOps engineers rarely use it for real-world debugging because it outputs raw Graphviz DOT syntax that becomes unreadable "spaghetti" once a project exceeds 20 resources.

Comparing native CLI graphing against an interactive state visualizer highlights key workflow improvements:

• No Graphviz Binary Required: You do not need to install local Graphviz packages or pipe CLI output through dot -Tsvg > graph.svg.
• Collapsed Resource Instances: When you use count or for_each to provision 10 subnets or 50 IAM policies, raw DOT graphs draw 50 overlapping boxes. Our visualizer intelligently groups multi-instance resources into a single clean card with an instance multiplier badge (e.g., ×3).
• Live Attribute Inspection: Static SVG outputs from Graphviz only show resource names. In our interactive canvas, clicking any node opens a side panel showing CIDR blocks, ARNs, instance sizes, regions, and upstream dependencies.
• Module Isolation: Instead of staring at a monolithic diagram of 300 nodes, you can filter the canvas down to a single child module (such as module.vpc or module.eks) in real time.

Modern Terraform (v0.12 through v1.9+) and OpenTofu state files use State Format Version 4. Understanding how this JSON schema is structured helps when debugging state drift or performing manual state surgery:

• version & terraform_version: Defines the schema version (usually 4) and the binary version that last mutated the state.
• serial & lineage: The lineage is a unique UUID assigned when a state is first initialized, while serial is a monotonically increasing integer incremented on every state write to prevent concurrent state corruption.
• resources[] Array: Each object inside the resources array represents a resource block (e.g., aws_eks_cluster.production), containing its module path, mode (managed vs data), type, name, and provider configuration.
• instances[] & dependencies[]: Inside each resource, the instances array holds the actual cloud attributes (IDs, ARNs, endpoints) and the explicit dependencies array that powers our topological graph engine.

Keeping cloud architecture diagrams synchronized with actual production infrastructure is a notorious challenge. Diagrams drawn manually in Visio or Lucidchart become outdated the moment an engineer merges a new Pull Request.

This tool bridges the gap between live infrastructure state and engineering documentation through two automated export pipelines:

1. Terraform State to Mermaid.js: Switch to the Mermaid / Draw.io tab to generate clean flowchart LR Markdown syntax. Paste this code block directly into a GitHub Pull Request description, GitLab Merge Request, Notion page, or Backstage developer portal—GitHub renders the Mermaid diagram natively with zero external plugins.
2. Terraform State to Draw.io (.drawio XML): Click Export Draw.io to download a standards-compliant mxGraphModel XML file pre-populated with your exact resource coordinates, provider color accents, and orthogonal dependency arrows. Open the file in diagrams.net (Draw.io) to add custom annotations for stakeholder presentations or security audits.

Before running destructive state commands like terraform state rm, terraform state mv, or targeted applies (terraform apply -target=...), engineers must understand the downstream blast radius of a resource.

By selecting any node on the canvas, all connected dependency curves highlight in bright cyan. Upstream nodes (left) represent foundational infrastructure that the selected resource relies upon (such as a VPC or KMS key), while downstream nodes (right) represent dependent services (such as EKS node groups, RDS databases, or Kubernetes ingresses) that will be impacted or recreated if the upstream resource forces replacement.

Modern platform engineering rarely lives in a single cloud. A single state file frequently provisions an AWS VPC and EKS cluster, configures Kubernetes deployments and Helm releases inside that cluster, and registers DNS records on Cloudflare.

Our parser automatically classifies resource prefixes and applies visual color-coding across major cloud and SaaS providers:

• Amazon Web Services (aws_*): VPCs, Subnets, Security Groups, EKS, RDS, S3, IAM, Lambda (Amber accent).
• Microsoft Azure (azurerm_*, azuread_*): Resource Groups, VNets, AKS Clusters, Key Vaults, Storage Accounts (Sky Blue accent).
• Google Cloud Platform (google_*): Compute Networks, GKE Clusters, Cloud SQL, BigQuery, GCS Buckets (Emerald accent).
• Kubernetes & Helm (kubernetes_*, helm_*): Ingresses, Deployments, ConfigMaps, Secrets, Namespaces (Cyan accent).
• Cloudflare & Core Providers (cloudflare_*, random_*, tls_*, null_*): DNS records, WAF rules, and utility resources.

Pair this online visualizer with these non-destructive CLI commands when auditing remote backends (S3, GCS, Azure Blob, Terraform Cloud, or GitLab Managed State):

• terraform state pull > state.tfstate — Downloads the current remote state to a local JSON file without modifying infrastructure.
• tofu show -json > state.json — Exports the current state (or a saved plan file) in standardized machine-readable JSON format, automatically handling client-side decryption if configured.
• terraform state list — Lists all resource addresses tracked in the current state file.
• terraform plan -out=tfplan && terraform show -json tfplan > plan.json — Exports an execution plan into JSON so you can inspect proposed state values prior to applying changes.