Preview the AWS architecture described by the Terraform and Terragrunt files in
a folder as a live, layered diagram (Edge/CDN → Network → Compute → Data →
Security) — the same canvas as the InfraVis web editor, inside VS Code.
Use
Open a .tf / terragrunt.hcl file and click the preview icon in the editor
title bar, or
right-click a folder or file in the Explorer → Open Infrastructure Preview, or
run InfraVis: Open Infrastructure Preview from the Command Palette.
What you get depends on where you are standing:
Inside a Terragrunt project (a root.hcl somewhere above): the whole
environment you are in. From any file or folder under stg/ you see all
of stg — and only stg; dev and prod are separate copies and are
never mixed in.
On the project root itself: you are asked which environment to show.
Plain Terraform (no root.hcl above): the folder itself, read recursively.
The breadcrumb in the preview header switches to any other level — narrow down
to one region or unit, or widen to the whole repository.
What gets drawn
Each folder is its own Terraform namespace.
resource and data blocks → one node each. A type the diagram has no icon
for still gets a node, labelled with its raw type.
A module call, and a Terragrunt unit that pulls a module through
terraform { source = … } → one node, typed after what the module
provisions (terraform-aws-vpc → VPC, …//modules/cluster → ECS Cluster).
The module's internals live in another repository and are not expanded. A
module that isn't recognised is drawn as a generic node named after it.
References between blocks, depends_on, and Terragrunt dependency /
dependencies → connections, including across folders and regions. A
dependency on a folder of plain Terraform points at the resource behind
the output being read.
In the preview:
Live — updates as you type (unsaved edits included) and when files are
added, changed or removed.
Click a node to jump to its block (or the unit's terragrunt.hcl): the editor takes focus with the cursor at the start of the block.
Double-click a node to focus it; click the background to exit.
Anything that could not be followed is listed under warnings; click one
to jump to it.
Not covered
Terragrunt config_path expressions other than string templates,
dirname(), find_in_parent_folders() and get_terragrunt_dir() (for
example paths built from local.*) are reported as warnings, not guessed.
A dependency on a folder outside the previewed one is reported as a warning.
*.tf.json files, and count / for_each expansion.
Develop
The extension reuses the web app's parser, layout engine and canvas components
from ../src, and resolves runtime dependencies from the repo-root
node_modules.
npm install # at the repo root (app dependencies)
cd vscode-extension
npm install # extension build tools
npm run build # → dist/
npm run package # → infravis-terraform-preview-<version>.vsix
Install the package with code --install-extension infravis-terraform-preview-0.3.2.vsix,
or press F5 with this folder open in VS Code to launch an Extension Development Host.
