A powerful VSCode extension that automatically generates beautiful, interactive Mermaid diagrams from your Terraform and Terragrunt configurations. Visualize your infrastructure as code with clean, professional diagrams that help you understand resource dependencies and relationships at a glance.
Features
Smart Diagram Generation
- Automatic Parsing: Intelligently parses Terraform (.tf) and Terragrunt (.hcl) files
- Beautiful Visualizations: Generates clean, professional Mermaid flowcharts
- Provider-Specific Styling: Different colors and styles for AWS, Azure, GCP, Kubernetes, and more
- Dependency Mapping: Automatically detects and visualizes resource dependencies
Multiple Diagram Modes
- Simple Mode: Clean, minimal diagrams without grouping
- Standard Mode: Balanced view with configurable options
- Full Mode: Comprehensive diagrams showing all components
- Terragrunt Mode: Specialized diagrams for Terragrunt configurations
Highly Configurable
- Diagram Direction: Choose from Top-Down, Bottom-Top, Left-Right, Right-Left
- Logical Grouping: Group resources by type (Networking, Compute, Storage, etc.)
- Module Grouping: Organize resources by their module
- Component Control: Show/hide variables, outputs, and connections
Export & Share
- SVG Export: Download diagrams as scalable vector graphics
- Copy Code: Copy raw Mermaid syntax to clipboard
- External View: Open diagrams directly in mermaid.live
- Workspace Support: Generate diagrams from individual files or entire workspace
Installation
- Open Visual Studio Code
- Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
- Search for "Terraform Mermaid Visualizer"
- Click Install
Or install via command line:
code --install-extension stufftdsays.terraform-mermaid-visualizer
Usage
Quick Start
- Open a Terraform file (.tf or .hcl)
- Right-click in the editor or file explorer
- Select "Terraform Mermaid: Generate Mermaid Diagram"
- View your infrastructure diagram in a new panel
Command Palette
Open Command Palette (Ctrl+Shift+P
/ Cmd+Shift+P
) and type:
Terraform Mermaid: Generate Diagram
- Standard diagram from current file
Terraform Mermaid: Generate Simple Diagram
- Minimal diagram without grouping
Terraform Mermaid: Generate Full Diagram
- Comprehensive diagram with all features
Terraform Mermaid: Generate Diagram from Workspace
- Scan entire workspace
Terraform Mermaid: Generate Terragrunt Diagram
- Specialized for Terragrunt files
Right-click on:
- Terraform files (.tf) → Generate diagram options
- Terragrunt files (terragrunt.hcl) → Terragrunt-specific options
- File explorer → Workspace-wide generation
Configuration
Access settings via File > Preferences > Settings
and search for "Terraform Mermaid":
Setting |
Default |
Description |
terraform-mermaid.diagramDirection |
"TD" |
Direction of diagram flow (TD, TB, BT, RL, LR) |
terraform-mermaid.includeVariables |
true |
Include variable declarations in diagram |
terraform-mermaid.includeOutputs |
true |
Include output declarations in diagram |
terraform-mermaid.groupByModule |
false |
Group resources by module in subgraphs |
terraform-mermaid.enableLogicalGrouping |
true |
Group resources by type (Network, Compute, etc.) |
terraform-mermaid.showVariableConnections |
true |
Show connections from variables to resources |
terraform-mermaid.showOutputConnections |
true |
Show connections from resources to outputs |
Direction Options
TD
/ TB
: Top to Bottom (default)
BT
: Bottom to Top
LR
: Left to Right
RL
: Right to Left
Supported Providers
The extension recognizes and styles resources from major cloud providers:
Provider |
Prefix |
Color Scheme |
AWS |
aws_* |
Orange |
Azure |
azurerm_* |
Blue |
Google Cloud |
google_* |
Blue |
Kubernetes |
kubernetes_* |
Navy |
Helm |
helm_* |
Purple |
Docker |
docker_* |
Blue |
Local |
local_* |
Gray |
Null |
null_* |
Purple |
Random |
random_* |
Pink |
TLS |
tls_* |
Green |
Example
Input (main.tf)
variable "instance_type" {
description = "EC2 instance type"
type = string
default = "t3.micro"
}
resource "aws_vpc" "main" {
cidr_block = "10.0.0.0/16"
tags = { Name = "main-vpc" }
}
resource "aws_subnet" "public" {
vpc_id = aws_vpc.main.id
cidr_block = "10.0.1.0/24"
tags = { Name = "public-subnet" }
}
resource "aws_instance" "web" {
ami = data.aws_ami.ubuntu.id
instance_type = var.instance_type
subnet_id = aws_subnet.public.id
tags = { Name = "web-server" }
}
data "aws_ami" "ubuntu" {
most_recent = true
owners = ["099720109477"]
filter {
name = "name"
values = ["ubuntu/images/hvm-ssd/ubuntu-focal-20.04-amd64-server-*"]
}
}
output "instance_ip" {
value = aws_instance.web.public_ip
}
Generated Diagram
The extension will create a flowchart showing:
- VPC → Subnet → Instance dependency chain
- Data source for AMI lookup
- Variable input for instance type
- Output for instance IP
- Color-coded AWS resources
- Logical grouping by resource type
Troubleshooting
Common Issues
Extension not working?
- Ensure TypeScript files are compiled (
npm run compile
)
- Check Debug Console (
View > Debug Console
) for errors
- Verify file extensions are .tf, .hcl, or terragrunt.hcl
Diagram not generating?
- Verify Terraform syntax is valid
- Check for parsing errors in Debug Console
- Complex expressions may not be fully detected
Missing dependencies?
- Parser looks for
resource_type.resource_name
format
- Dynamic references may not be captured
- Check that resource references follow standard HCL syntax
Getting Help
- Check the VS Code Marketplace page for documentation
- Enable Debug Console (
View > Debug Console
) for detailed logs
- Contact support through the VS Code Marketplace
Contributing
This extension is actively maintained. Feature requests and feedback are welcome through the VS Code Marketplace.
License
This extension is licensed under the MIT License.
Acknowledgments
- Mermaid.js for the diagramming library
- HashiCorp for Terraform and the HCL language
- Gruntwork for Terragrunt
Enjoy visualizing your infrastructure!
If you find this extension helpful, please consider leaving a review on the VS Code Marketplace.