Cloud Architecture Studio

Un editor de diagramas de arquitectura pensado para AWS. Empieza por la arquitectura real de este sitio, por una plantilla o por un lienzo en blanco.

Empezar

Empezar con una plantilla

Arquitecturas listas para estudiar y adaptar.

Qué puedes hacer

  • Arrastrar servicios AWS y componentes genéricos al lienzo, agruparlos en regiones, VPC y subredes y conectarlos con llamadas síncronas, mensajes asíncronos o flujos de datos.
  • Recorrer la arquitectura de este portafolio paso a paso: publicación de un artículo, inicio de sesión del admin, preguntas al asistente e ingesta de contenido.
  • Guardar en el navegador, deshacer y rehacer, importar y exportar JSON y exportar PNG.

Dónde quedan tus diagramas

Solo en este navegador (localStorage). Nada se envía a un servidor, una cuenta o AWS: el editor corre completamente aquí. Para conservarlos o llevarlos a otra computadora, exporta el JSON.

Accesibilidad

El lienzo es una interfaz espacial y depende de un puntero para arrastrar y posicionar. Todo lo demás también funciona con el teclado: agregar componentes, conectarlos desde el panel de propiedades, moverlos con las flechas, seleccionarlos desde la lista del diagrama y recorrer los flujos.

Tecnologías

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

Íconos de servicios: AWS Architecture Icons, © Amazon Web Services, licencia CC-BY-ND 2.0. Este sitio no está afiliado a AWS.

Código del editor