Procesos de negocio y arquitecturas reales, listos para abrir y editar. Cada uno se carga en el editor con un clic: cambia los nombres, añade tus pasos y expórtalo 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.
Procesos que no son de software: quién hace qué, en qué orden y dónde se decide. Los tres usan la aparición progresiva, que construye el proceso paso a paso delante de quien lo mira.
El recorrido comercial completo, del primer visitante a la firma. El rombo ¿Califica? es la pieza que casi nunca se dibuja y es justo la que explica el embudo: separa lo que avanza de lo que se descarta, y deja ver en qué punto se pierde el volumen. Útil para presentarlo a un equipo comercial, o para acordar qué significa exactamente que un lead está calificado.
Las primeras semanas de un cliente nuevo, con los plazos escritos sobre las conexiones —día 0, día 1, semana 1, semana 2— para que el calendario se lea sin explicarlo. La sesión de refuerzo vuelve sobre la formación en vez de terminar el proceso: ese bucle es lo que distingue un onboarding real de una lista de tareas. Útil para acordar responsables y tiempos, o para enseñarle al propio cliente qué va a pasar y cuándo.
El recorrido físico de un producto, de la materia prima al cliente final. El nodo En tránsito es una animación de progreso y no una caja, a propósito: el transporte es un estado y no un lugar, y dibujarlo así ahorra una explicación. El rombo de stock separa la operación normal del reaprovisionamiento. Útil para ubicar dónde se acumula inventario y dónde duele de verdad un retraso.
Sistemas reales, con las piezas que suelen faltar en los diagramas de pizarra.
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.
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.
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.
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.
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.
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 un proceso o una arquitectura que crees que le sirve a más gente, mándalo como Pull Request a itsnect/fluyo. Añadir un ejemplo es un archivo .fluyo.json y una línea en la lista blanca.