Cloud Architecture Studio

Um editor de diagramas de arquitetura feito para AWS. Comece pela arquitetura real deste site, por um template ou por uma tela em branco.

Começar

Começar com um template

Arquiteturas prontas para estudar e adaptar.

O que dá para fazer

  • Arrastar serviços AWS e componentes genéricos para o canvas, agrupar em regiões, VPCs e sub-redes e conectar com chamadas síncronas, assíncronas ou fluxos de dados.
  • Explorar a arquitetura do portfólio passo a passo: publicação de artigo, login do admin, perguntas ao assistente e ingestão de conteúdo.
  • Salvar no navegador, desfazer e refazer, importar e exportar JSON e exportar PNG.

Onde ficam seus diagramas

Só neste navegador (localStorage). Nada é enviado para servidor, conta ou AWS: o editor roda inteiramente aqui. Para guardar ou levar para outro computador, exporte o JSON.

Acessibilidade

O canvas é uma interface espacial e depende de ponteiro para arrastar e posicionar. Todo o resto também funciona pelo teclado: adicionar componentes, conectar pelo painel de propriedades, mover com as setas, selecionar pela lista do diagrama e percorrer os fluxos.

Tecnologias

  • TypeScript
  • React
  • React Flow
  • Zod
  • AWS Architecture Icons

Ícones de serviços: AWS Architecture Icons, © Amazon Web Services, licença CC-BY-ND 2.0. Este site não tem afiliação com a AWS.

Código do editor