Extensão VS Code para visualizar arquitetura AWS a partir de arquivos Terraform (.tf) com foco em entendimento de recursos e dependências.

Visão Geral

O fluxo atual do MVP é:

Scanner encontra arquivos .tf no workspace.
Parser extrai recursos resource "aws_*" "name" e dependências.
Builder monta grafo (nodes/edges) com metadados.
Webview renderiza preview interativo no VS Code.

Instalação Local

Pré-requisitos:

Node.js 20+
npm
VS Code 1.90+

Passos:

npm install
npm run compile

Como Usar

Uso da extensão instalada (Marketplace)

Instale a extensão no VS Code.
Abra um workspace/pasta que contenha arquivos .tf.
Abra Ctrl+Shift+P e execute:

IaC Architecture Visualizer: Show AWS Architecture Preview
IaC Architecture Visualizer: Analyze Impact

Recursos disponíveis no preview

Realce de dependências ao clicar em nó/ligação.
Refresh no próprio painel.
Open source por recurso para abrir arquivo e linha no editor.
Comando IaC Architecture Visualizer: Analyze Impact para estimar blast radius de um recurso selecionado.

Exemplo de Entrada

resource "aws_vpc" "main" {
  cidr_block = "10.0.0.0/16"
}

resource "aws_subnet" "public" {
  vpc_id = aws_vpc.main.id
}

resource "aws_security_group" "web" {
  vpc_id = aws_vpc.main.id
}

Exemplo de Saída (MVP)

Grafo visual em canvas interativo (quadro livre) com navegação por pan/zoom.
Reorganização manual por drag-and-drop dos nós para leitura arquitetural.
Agrupamento por contexto de recurso com caixas tracejadas (ex.: EC2, Subnets & Network, Target Group, RDS).
Grupos posicionados em grid 4 x N (máximo de 4 colunas), evitando sobreposição entre contextos.
Tamanho de cada grupo calculado conforme a necessidade dos cards internos, com pequena folga para movimentação manual.
Cards dentro de cada grupo organizados inicialmente em grid 4 x N.
Seleção e movimentação de grupos no canvas (arraste da caixa do grupo).
Botão Reflow para reorganizar os cards após alterações manuais.
Categoria visual por tipo (networking, security, compute etc.).
Arestas desenhadas entre recursos com diferenciação de vínculo:
explicit: linha contínua com seta.
implicit: linha tracejada com seta.
indirect: linha pontilhada curta com seta (via locals/variable/module/data).
Lista de dependências (explícitas, implícitas e indiretas) com realce interativo sincronizado ao grafo.
Navegação para origem do recurso (Open source).

Limitações do MVP

Suporte somente para provider aws.
Foco em blocos resource.
Ainda não há layout semântico dedicado para todos os padrões AWS (ex.: VPC/Subnet/TG com containers específicos por tipo e geometria idêntica ao console AWS).
Sem geração/reversão de .tf a partir da interface visual.

Scripts Úteis

npm run compile
npm run watch
npm run lint
npm run test
npm run package

Estrutura Principal

src/extension.ts: comando da extensão e integração VS Code.
src/previewWorkflow.ts: fluxo principal testável (status/preview).
src/tfScannerCore.ts: scanner com decode UTF-8 estrito e issues.
src/tfParser.ts: parser de recursos AWS e dependências.
src/graphBuilder.ts: construção e normalização do grafo.
src/preview.ts: webview HTML/CSS/JS.
test/fixtures/: cenários de validação (small, medium, partial-invalid).

Status do Projeto

MVP visual concluído e em evolução para fase de "valor real" (impacto de mudança, revisão de PR e governança de arquitetura). Roadmap: BACKLOG_POST_MVP.md.