Terraform Mermaid Visualizer

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

1. Open Visual Studio Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Terraform Mermaid Visualizer"
4. Click Install

Or install via command line:

code --install-extension stufftdsays.terraform-mermaid-visualizer

Usage

Quick Start

1. Open a Terraform file (.tf or .hcl)
2. Right-click in the editor or file explorer
3. Select "Terraform Mermaid: Generate Mermaid Diagram"
4. 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

Context Menus

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":

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:

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

1. Check the VS Code Marketplace page for documentation
2. Enable Debug Console (View > Debug Console) for detailed logs
3. 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.