Laboratório visual para projetar, analisar e estudar arquiteturas de software e soluções em nuvem.
Da primeira caixa ao trade-off: desenhe sistemas, explore serviços AWS e teste decisões de System Design em um único ambiente.
Visão geral · Funcionalidades · Componentes · Execução local · Deploy
O Sysdeck reúne prática e estudo de arquitetura em uma experiência web responsiva, em português. O projeto combina um editor visual inspirado em ferramentas como draw.io e Miro, uma análise heurística da topologia criada e módulos de perguntas com diagramas executáveis.
| Rota | Experiência | Situação |
|---|---|---|
/ |
Apresentação do produto, proposta de valor e exemplo de arquitetura | Disponível |
/lab |
Canvas interativo para criação e análise de arquiteturas | Disponível |
/teste-seu-conhecimento |
Catálogo de módulos de estudo | Disponível |
/teste-seu-conhecimento/system-design |
Questionário completo de System Design | Disponível |
- O diagrama não é apenas ilustrativo: seus componentes carregam parâmetros que alimentam estimativas de latência, disponibilidade e custo.
- Cada questão do módulo de System Design possui uma arquitetura reconstruída com os mesmos nós e conexões do laboratório, sem depender de uma imagem estática.
- A arquitetura de uma questão pode ser aberta diretamente no laboratório para exploração e edição.
- O catálogo une blocos genéricos de arquitetura a 27 serviços AWS com ícones oficiais.
- Apresentação objetiva do produto e de seu fluxo de uso.
- Template visual de arquitetura que acompanha a troca de tema.
- Navegação responsiva para o laboratório, visão geral e área de conhecimento.
- Temas claro e escuro persistidos no navegador:
- Claro: Snow e Ultrasonic Blue.
- Escuro: Carbon Black e Ultrasonic Blue.
- Canvas infinito baseado em React Flow, com zoom, pan, seleção, minimapa e controles de enquadramento.
- Modos dedicados de seleção e movimentação.
- Grade visual opcional e encaixe em intervalos regulares.
- Barras laterais de biblioteca e propriedades expansíveis ou recolhíveis.
- Interface responsiva, com acesso adaptado aos principais componentes em telas menores.
- Histórico de até 50 estados com ações de desfazer e refazer.
- Persistência automática do diagrama e da viewport em
localStorage. - Exportação da arquitetura, incluindo nós, conexões e viewport, para
sysdeck-architecture.json. - Limpeza integral do diagrama com confirmação.
- Adição por clique ou arrastar e soltar a partir da biblioteca.
- Busca de componentes e categorias recolhíveis no menu lateral.
- Redimensionamento visual das caixas.
- Conexões disponíveis em múltiplos pontos de cada componente.
- Edição de título, subtítulo, categoria e descrição pelo inspetor.
- Paleta de cores predefinida, incluindo preto, e seletor de cor personalizado.
- Cor de contraste adaptativa: elementos pretos no tema claro tornam-se brancos no tema escuro e vice-versa.
- Campos opcionais de análise ajustados ao perfil do componente, com valores fundamentais preenchidos por padrão.
- Controle de sobreposição para trazer à frente ou enviar para trás.
- Exclusão pelo inspetor, menu de contexto ou teclas
Delete/Backspace. - Conversão de um componente comum em grupo para detalhar sua composição interna.
- Áreas redimensionáveis para delimitar domínio, camada, rede, cluster ou fluxo.
- Cinco opções de ícone: limite, cluster, camadas, rede e workflow.
- Título editável com duplo clique.
- Inclusão e movimentação de componentes dentro do grupo.
- Conversão de componentes existentes em grupos sem perder seu contexto visual.
- Comentários de texto nos formatos retangular, circular e hexagonal.
- Criação rápida pelos botões da barra superior ou pelo menu de contexto.
- Texto editável com duplo clique.
- Redimensionamento e conexão com qualquer outro elemento do diagrama.
- Superfície clara no tema claro e escura no tema escuro, preservando legibilidade.
- Espessura padrão de
1 px, ajustável de1a5 px. - Três rotas: ortogonal, curva e reta.
- Estilos contínuo, tracejado e pontilhado.
- Pontas sem marcador, com flecha ou com círculo.
- Cores predefinidas e cor personalizada pelo color picker.
- Preto como cor padrão no tema claro e branco no tema escuro.
- Animação opcional e exclusão individual da ligação.
Disponível com o botão direito do mouse ou ao pressionar e segurar em dispositivos móveis:
- adicionar comentários nos três formatos;
- adicionar grupo;
- abrir um componente como grupo;
- alterar a ordem de sobreposição;
- excluir o elemento selecionado.
| Ação | Atalho |
|---|---|
| Ativar seleção | V |
| Mover o canvas | H |
| Excluir seleção | Delete ou Backspace |
| Desfazer | Ctrl/Cmd + Z |
| Refazer | Ctrl/Cmd + Shift + Z |
O painel Architecture check é recalculado quando nós, conexões ou configurações são alterados. Ele apresenta:
| Dimensão | Como é estimada |
|---|---|
| Latência | Soma do caminho crítico e penalidades, como tráfego entre regiões |
| Disponibilidade | Composição das disponibilidades configuradas nos componentes |
| Custo | Soma das estimativas mensais informadas, exibida em USD |
| Pontuação | Resultado de 0 a 100 após a aplicação dos riscos identificados |
A análise também procura sinais como entrada sem gateway, ausência de segurança ou observabilidade, banco sem Multi-AZ, alto tráfego sem cache e fluxos desconectados.
Note
Os resultados são heurísticos e servem para aprendizado e comparação de alternativas. Preços, SLAs e limites reais devem ser validados antes de decisões de produção.
Todos os componentes analisáveis oferecem tráfego estimado, latência base, disponibilidade e custo mensal. Campos adicionais aparecem conforme o perfil:
| Perfil | Configurações adicionais |
|---|---|
| Compute | Réplicas e distribuição Multi-AZ |
| Serverless | Concorrência reservada |
| Database | Armazenamento, réplicas de leitura, Multi-AZ e criptografia |
| Cache | Taxa de acerto e failover Multi-AZ |
| Storage | Volume, criptografia e retenção |
| Messaging | Retenção e partições/consumidores |
| Network / Gateway | Tráfego ou roteamento entre regiões |
| Security | Aplicação de políticas |
| Observability | Retenção de logs |
- Catálogo separado da experiência de questionário.
- Módulo System Design com todas as 60 questões disponíveis.
- Questões sobre APIs, dados, consistência, mensageria, resiliência, cloud e arquiteturas com IA.
- Seletor visual para saltar diretamente a qualquer questão e identificar itens respondidos.
- Contadores de progresso, respostas concluídas e acertos.
- Correção imediata com explicação do trade-off após cada resposta.
- Navegação para questão anterior, próxima questão ou próxima pendente.
- Resultado final e opção de reiniciar o módulo.
- Respostas mantidas somente durante a sessão atual.
- Cada questão exibe um mini canvas somente leitura.
- Os diagramas são formados por componentes e conexões reais, não por imagens inseridas em caixas.
- A espessura das conexões segue o padrão de
1 pxdo laboratório. - O botão Abrir no laboratório carrega a topologia da questão em
/lab, onde ela se torna editável e continua com autosave.
| Categoria | Componentes |
|---|---|
| Organização | Grupo |
| Aplicação | Client Apps, API Gateway, Microservice, Serverless Function |
| Dados | PostgreSQL, Redis Cache, Object Storage |
| Integração | Event Stream, Queue, External API |
| Anotação | Comentário retangular, circular e hexagonal |
Os serviços aparecem em uma única seção AWS expansível no laboratório e utilizam os ícones oficiais presentes em public/aws-icons.
| Domínio | Serviços disponíveis |
|---|---|
| Compute e containers | Amazon EC2, AWS Lambda, Amazon EKS, AWS Fargate |
| APIs, edge e rede | Amazon API Gateway, Amazon CloudFront, Amazon Route 53, Amazon VPC Lattice |
| Bancos e cache | Amazon RDS, Amazon DynamoDB, Amazon Aurora, Amazon ElastiCache |
| Mensageria e streaming | Amazon SQS, Amazon SNS, Amazon EventBridge, Amazon Kinesis |
| Armazenamento | Amazon S3, Amazon EFS, Amazon S3 Glacier |
| Segurança e identidade | Amazon Cognito, IAM Identity Center, AWS WAF, AWS Secrets Manager |
| Orquestração | AWS Step Functions |
| Busca e observabilidade | Amazon OpenSearch, Amazon CloudWatch, AWS CloudTrail |
| Camada | Tecnologia |
|---|---|
| Aplicação | Next.js 16, React 19 e TypeScript 5 |
| Canvas | @xyflow/react / React Flow |
| Ícones de interface | Font Awesome |
| Ícones de nuvem | Assets oficiais da AWS |
| Estilização | CSS responsivo com design tokens e temas por variáveis |
| Runtime alternativo | Vinext, Vite e Cloudflare Workers |
| Qualidade | ESLint e testes com Node.js Test Runner |
| Deploy principal | Vercel |
sysdeck/
├── app/
│ ├── lab/ # Canvas, nós, conexões, análise e catálogo
│ ├── teste-seu-conhecimento/ # Módulos, questionário e mini canvases
│ ├── globals.css # Design system, temas e responsividade
│ ├── layout.tsx # Metadados e inicialização do tema
│ └── page.tsx # Página de apresentação
├── public/
│ ├── aws-icons/ # Ícones oficiais dos serviços AWS
│ ├── favicon.svg
│ └── og.png
├── tests/
│ └── rendered-html.test.mjs # Contratos de renderização das rotas
├── vercel.json # Build e desenvolvimento no Vercel
└── package.json
- Node.js
>= 22.13.0 - npm
npm install
npm run devnpm install
npm run dev:vercelAbra http://localhost:3000 no navegador. Caso a porta esteja ocupada, o servidor pode selecionar a próxima porta disponível.
Tip
No PowerShell, use npm.cmd no lugar de npm se a política de execução bloquear o script npm.ps1.
| Comando | Finalidade |
|---|---|
npm run dev |
Inicia o desenvolvimento com Vinext |
npm run build |
Gera o build Vinext |
npm run start |
Executa o build Vinext |
npm run dev:vercel |
Inicia o Next.js em modo de desenvolvimento |
npm run build:vercel |
Gera o build de produção do Next.js |
npm run start:vercel |
Executa localmente o build Next.js |
npm run lint |
Executa a análise estática com ESLint |
npm test |
Gera o build Vinext e valida a renderização das rotas |
Antes de publicar alterações, execute:
npm run lint
npm test
npm run build:vercelOs testes de renderização verificam a página inicial, o laboratório, o catálogo de módulos e o questionário completo, incluindo seus principais contratos de conteúdo.
O arquivo vercel.json identifica o projeto como Next.js e direciona os comandos da plataforma para o fluxo nativo:
{
"$schema": "https://openapi.vercel.sh/vercel.json",
"framework": "nextjs",
"buildCommand": "npm run build:vercel",
"devCommand": "npm run dev:vercel"
}- Importe o repositório no Vercel.
- Mantenha o diretório raiz como
./. - Confirme o framework Next.js.
- Publique o projeto.
O projeto não exige variáveis de ambiente para as funcionalidades atuais.
# Preview
npx vercel
# Produção
npx vercel --prodO vínculo local criado pela CLI fica em .vercel/, diretório já ignorado pelo Git.
Sysdeck
Transforme requisitos em diagramas, diagramas em decisões e decisões em aprendizado.