IaC Architecture Visualizer (VS Code Extension)

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

1. Scanner encontra arquivos .tf no workspace.
2. Parser extrai recursos resource "aws_*" "name" e dependências.
3. Builder monta grafo (nodes/edges) com metadados.
4. 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)

1. Instale a extensão no VS Code.
2. Abra um workspace/pasta que contenha arquivos .tf.
3. 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.