Dirección 1
n8n Evolved — Familiar, potente, limpio
La más cercana a n8n: sidebar de catálogo fijo a la izquierda, canvas infinito al centro, panel de propiedades que desliza desde la derecha al seleccionar un nodo. Layout tripartito clásico de herramientas de flujo. Carlos y Ana lo van a reconocer inmediatamente.
localhost:3000 — atipflow
alarm-pipeline
Guardado hace 2s
⌕ Buscar procesadores…
Fuentes
📡
HTTP Listener
📨
NATS Subscribe
⏰
Cron Trigger
Transformación
🔧
JQ Transform
✓
JSON Schema Validate
🐍
Python Script
Almacenamiento
🗄
SQL Execute
📁
Write File
Custom
⚡
enrich_alarm
● 4 activos ● 1 inactivo
📡
HTTP Listener
Mensajes/min: 142
SUCCESS
✓
JSON Schema Validate
Procesados: 2,847
SUCCESS
FAILURE
⚡
enrich_alarm
Custom processor
SUCCESS
FAILURE
🗄
SQL Execute
Conexión: #{db_prod}
SUCCESS
FAILURE
🔔
Slack Notify
⚠ Webhook timeout
SUCCESS
Minimapa
⚡
enrich_alarm
✕
Propiedades
Mensajes
Info
API URL
https://api.enrichment.io/v2
Timeout (s)
30
API Key sensitive
••••••••••••••••
🔒 Cifrado con Fernet · no incluido en exports
Parameter Context
#{enrichment_api_key}
ESTADO
Activo — procesando
Último mensaje: hace 340ms
Bulletin Board
Bandeja de Mensajes
Métricas
Slack Notify — Webhook timeout: connection refused to hooks.slack.com after 10s
14:23:07
SQL Execute — Connection pool at 85% capacity (17/20 connections active)
14:21:44
Sistema — Procesadores recargados correctamente · 5 custom processors registrados
14:15:02
¿Para quién es esta dirección?
✅ Carlos (Arquitecto)
Layout familiar desde NiFi y n8n. El sidebar de catálogo siempre visible facilita el diseño de topologías complejas sin buscar entre menús.
✅ Ana (Senior Dev)
Properties panel con tab "Mensajes" integrado hace que el path error → replay sea natural. El Bulletin Board siempre visible al fondo.
⚠️ Diego (Junior)
El sidebar siempre visible puede sentirse denso al inicio. Sin embargo, ver el catálogo completo desde el primer momento facilita el aprendizaje por exploración.
Dirección 2
VS Code Canvas — Máximo canvas, sidebar contextual
Barra de actividad icónica a la izquierda (48px) + panel lateral contextual que cambia de modo: catálogo cuando está libre, propiedades cuando hay nodo seleccionado. El canvas gana más espacio. El panel inferior emerge para Bulletin Board y bandeja. Inspirado directamente en VS Code.
localhost:3000 — atipflow
alarm-pipeline
Guardado hace 2s
⊞
📨
📊
↩
⚙
Propiedades
enrich_alarm
API URL
https://api.enrichment.io/v2
Timeout (s)
30
API Key sensitive
••••••••••••••••
PUERTOS
SUCCESS → SQL Execute
FAILURE → Slack Notify
Deseleccionar para ver el catálogo
📡
HTTP Listener
SUCCESS
✓
JSON Schema Validate
SUCCESS
FAILURE
⚡
enrich_alarm
SUCCESS
FAILURE
🗄
SQL Execute
SUCCESS
FAILURE
🔔
Slack Notify
⚠ Webhook timeout
SUCCESS
⚠ Bulletin Board 1 error
Bandeja de Mensajes
Métricas
Slack Notify — Webhook timeout: connection refused to hooks.slack.com after 10s
14:23:07
SQL Execute — Connection pool at 85% capacity
14:21:44
¿Para quién es esta dirección?
✅ Carlos + Ana
El sidebar modo-switching es potente para usuarios avanzados. Ven las propiedades inmediatamente al seleccionar un nodo sin cambiar contexto mental.
✅ Laura (DevOps)
La activity bar da acceso directo a Métricas como una vista de primera clase. Laura puede ir a su dashboard con un clic en el ícono de métricas.
⚠️ Diego
El sidebar contextual puede confundir — cuando está viendo propiedades, el catálogo desaparece. Requiere entender el modo-switching, que no es intuitivo para nuevos usuarios.
Dirección 3
Canvas First — Máxima superficie de trabajo
El canvas ocupa el 100% del espacio. El sidebar se colapsa a una rail de íconos de 48px. Las propiedades aparecen como un panel flotante sobre el canvas al seleccionar un nodo. Inspirado en Figma. Para usuarios que priorizan ver el flujo completo.
localhost:3000 — atipflow
alarm-pipeline
✓ Guardado
⊞
📨
📊
⚙
📡
HTTP Listener
142 msg/min
SUCCESS
✓
JSON Schema Validate
SUCCESS
FAILURE
⚡
enrich_alarm
SUCCESS
FAILURE
🗄
SQL Execute
SUCCESS
FAILURE
🔔
Slack Notify
⚠ Webhook timeout
SUCCESS
⚡
enrich_alarm
✕
Props
Mensajes
API URL
https://api.enrichment.io/v2
API Key
••••••••••••••••
⚠ 1 error activo — Slack Notify Ver detalles
¿Para quién es esta dirección?
✅ Flujos complejos (Carlos)
Máxima superficie para el canvas — ideal cuando el flujo tiene 15+ nodos y necesitas ver la topología completa sin hacer scroll.
⚠️ Discoverability (Diego)
El sidebar colapsado hace el catálogo menos visible. Un nuevo usuario podría no saber que puede hacer drag desde los íconos de la rail.
⚠️ Properties flotantes
El panel flotante puede tapar nodos del canvas. Si el flujo es denso, la experiencia de configurar propiedades mientras ves el canvas se complica.
Dirección 4
Dashboard Tabs — Vista unificada por modo
La UI se organiza en tabs de primer nivel: Canvas, Mensajes, Métricas, Config. Cada tab es una vista completa y dedicada. Laura tiene su dashboard de métricas como tab de primera clase. La bandeja de mensajes tiene su propia pantalla completa para el workflow de replay. El canvas no comparte espacio con ningún panel lateral en reposo.
localhost:3000 — atipflow
alarm-pipeline
✓ Guardado
⊞ Canvas
📨 Mensajes 3
📊 Métricas
⚙ Config
⌕ Buscar…
Fuentes
📡
HTTP Listener
📨
NATS Subscribe
Transformación
🔧
JQ Transform
✓
JSON Schema Validate
🐍
Python Script
Custom
⚡
enrich_alarm
📡
HTTP Listener
SUCCESS
✓
JSON Schema Validate
SUCCESS
FAILURE
⚡
enrich_alarm
SUCCESS
FAILURE
🗄
SQL Execute
SUCCESS
FAILURE
🔔
Slack Notify
⚠ Webhook timeout
SUCCESS
Vista previa — Tab "Mensajes" (pantalla completa para replay):
msg_a3f9k2
Slack Notify — timeout error
14:23:07
↩ Replay
msg_b7x1p4
SQL Execute — insertado correctamente
14:22:58
↩ Replay
¿Para quién es esta dirección?
✅ Laura (DevOps)
Métricas como tab de primera clase — no está escondida en un panel lateral. Laura llega a su dashboard con un clic, sin navegar por el canvas.
✅ Ana — Replay workflow
La bandeja de mensajes tiene pantalla completa con inspector JSON, filtros por nodo y botón de replay prominente. El workflow de debugging es más cómodo.
⚠️ Flujo entre canvas y mensajes
El salto Canvas → Mensajes → Canvas para el workflow de debugging requiere cambiar de tab. En Dirección 1, todo ocurre en la misma pantalla.
Componentes
Anatomía del Nodo — Los 4 estados
Los nodos son los actores principales del canvas. Cada estado comunica información crítica sin palabras. El objetivo: un usuario nuevo entiende el estado del sistema mirando los nodos por 5 segundos.
Estado: Inactivo
🗄
SQL Execute
Sin conexión activa
SUCCESS
FAILURE
Border: zinc-700
Dot: gris sin glow
Opacidad: 70%
Significado: flujo no activado
Estado: Activo
🗄
SQL Execute
Procesados: 2,847
SUCCESS
FAILURE
Border: green-500
Dot: verde con glow sutil
Stats: visibles y actualizadas
Significado: procesando mensajes
Estado: Error
🔔
Slack Notify
⚠ Webhook timeout
SUCCESS
Border: red-500
Dot: rojo con glow
Body: muestra el error resumido
Hover: tooltip con detalle completo
Estado: Seleccionado
⚡
enrich_alarm
Custom processor
SUCCESS
FAILURE
Border: cyan-500
Ring: cyan-900 2px outer
Abre Properties Panel
Click en canvas = deselecciona
Anatomía de las conexiones
SUCCESS
Bezier verde — ruta de éxito. Flujo normal de datos.
FAILURE
Bezier rojo punteado — ruta de error. Distinto de success visualmente.
Evaluación
Criterios para elegir la dirección
Usa estos criterios para decidir qué dirección (o combinación de elementos) se convierte en la base del diseño de atipflow.
Comparativa de direcciones
Criterio D1 D2 D3 D4
Discoverability (Diego) ●●● ●●○ ●○○ ●●●
Espacio de canvas ●●○ ●●● ●●● ●●○
Workflow de replay (Ana) ●●● ●●● ●●○ ●●●
Dashboard para Laura ●●○ ●●● ●○○ ●●●
Familiaridad (NiFi/n8n) ●●● ●●○ ●○○ ●●○
Complejidad de implementación Simple Media Media Alta
Recomendación: Dirección 1 + elementos de D2
Base en Dirección 1 (n8n Evolved) — layout tripartito familiar, alta discoverability, workflow de replay integrado.

Incorporar de Dirección 2: la activity bar para acceso a Métricas como vista dedicada para Laura, y el badge de error en el tab de Bulletin Board.
Preguntas para decidir
1. ¿El sidebar de catálogo siempre visible es valioso o roba demasiado espacio al canvas?
2. ¿Laura necesita su dashboard como tab de primera clase (D4) o es suficiente con un ícono en la activity bar (D2)?
3. ¿El panel de propiedades deslizable desde la derecha es preferible al sidebar modo-switching?
4. ¿Hay preferencia entre panel flotante (D3) vs panel fijo (D1)?