Ejemplos de diagramas de arquitectura

Arquitecturas reales, listas para abrir y editar. Cada una se carga en el editor con un clic: cambia los nombres, añade tus servicios y expórtala como GIF animado. Sin cuenta y sin límites.

Los archivos son .fluyo.json normales. Puedes descargarlos, versionarlos en git junto a tu código y abrirlos después con el botón Abrir del editor.

Diagrama: apps productoras envían eventos por un API Gateway a Kafka, que reparte a servicios de pagos y envíos, con dead letter queue, PostgreSQL y un data warehouse

Pipeline de eventos con Apache Kafka

Arquitectura orientada a eventos: los productores publican en Kafka a través de un API Gateway y varios consumidores independientes leen de sus propios topics. Incluye la pieza que casi siempre falta en estos diagramas, la dead letter queue para los mensajes que fallan, y separa la ruta transaccional a PostgreSQL de la ruta analítica al data warehouse. Útil para explicar por qué desacoplar productores y consumidores, o para documentar qué servicio consume cada topic.

Abrir en el editor Descargar JSON 9 nodos · 7 conexiones

Diagrama: clientes web y móvil entran por un API Gateway que enruta a servicios de auth, usuarios y pedidos, cada uno con su base de datos, más Redis y un event bus

Arquitectura de microservicios con API Gateway

El patrón clásico: un único punto de entrada que autentica y enruta hacia servicios pequeños e independientes. Cada servicio tiene su propia base de datos — la regla que distingue microservicios de un monolito repartido — con Redis cacheando la validación de tokens y un event bus para la comunicación asíncrona entre pedidos y usuarios. Buen punto de partida para una propuesta de diseño o para dibujar los límites de contexto de tu sistema.

Abrir en el editor Descargar JSON 11 nodos · 10 conexiones

Diagrama numerado del flujo OAuth 2.0: usuario, aplicación cliente, servidor de autorización, consentimiento, intercambio de código por token y llamada a la API protegida

Flujo de autenticación OAuth 2.0

Los seis pasos del authorization code flow, numerados en orden: el usuario inicia sesión, la aplicación redirige a /authorize, el usuario da su consentimiento, el código se intercambia por un access token y un refresh token, y con ese token se llama a la API protegida. Es el ejemplo donde más se nota la animación de flujo: se ve el orden de los pasos en lugar de tener que deducirlo de las etiquetas. Ideal para onboarding de nuevos integrantes del equipo.

Abrir en el editor Descargar JSON 8 nodos · 6 conexiones

Diagrama: MySQL, archivos CSV en S3 y APIs externas se extraen, se transforman, se validan y van al data warehouse o a cuarentena, con dashboards de BI al final

Pipeline ETL de datos

Extracción desde tres orígenes heterogéneos (una base de datos de producción, archivos en almacenamiento de objetos y APIs de terceros), transformación por lotes y un paso de validación explícito que bifurca: lo correcto va al data warehouse y de ahí a los dashboards, lo defectuoso a cuarentena en lugar de contaminar silenciosamente los datos. Incluye un GIF de progreso animado en el paso de transformación.

Abrir en el editor Descargar JSON 10 nodos · 8 conexiones

Diagrama: usuario a CloudFront, estáticos en S3, API Gateway a Lambda, DynamoDB, SQS con Lambda worker y métricas en CloudWatch

Arquitectura serverless en AWS

Una aplicación completa sin un solo servidor que administrar: CloudFront sirve el frontend estático desde S3 y enruta /api/* al API Gateway, que invoca funciones Lambda contra DynamoDB. El trabajo pesado se desacopla con SQS y una Lambda worker, para que la petición del usuario no espere, y CloudWatch recoge las métricas. Sirve tanto para estimar costes como para explicar dónde están los límites de concurrencia.

Abrir en el editor Descargar JSON 10 nodos · 8 conexiones

¿No está el que buscas?

Empieza en blanco: abre el editor y coloca la primera forma. La documentación explica el lienzo, la animación de flujo y la exportación a GIF en una sola página.

Si dibujas una arquitectura que crees que le sirve a más gente, mándala como Pull Request a itsnect/fluyo. Añadir un ejemplo es un archivo .fluyo.json y una línea en la lista blanca.