Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Terraform Mermaid VisualizerNew to Visual Studio Code? Get it now.
Terraform Mermaid Visualizer

Terraform Mermaid Visualizer

stufftdsays

|
92 installs
| (0) | Free
Generate beautiful Mermaid diagrams from Terraform and Terragrunt configurations to visualize your infrastructure as code
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

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

  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.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft