Diagrama

Para flujos con varios actores, a veces cuesta ver el orden real de las interacciones. Aquí dibujas el grafo, simulas paso a paso y llevas todo a Excel (y viceversa) sin servidor intermedio.

Forma de uso

1. Carga datos. Sube un .xlsx con tres hojas (Procesos, Nodos, Pasos) o prueba Demo / Excel Demo en la barra inferior.
2. Elige un proceso en el panel derecho; el lienzo muestra solo ese flujo.
3. Organiza. Arrastra nodos; ⓘ abre la descripción larga del actor.
4. Simula. ▶ Ejecutar y en la barra inferior Play / Pausa, Retroceder, Avanzar y Ritmo (− / +). La acción larga va en la franja sobre el diagrama.
5. Exporta. Mi Excel guarda Procesos, Nodos y Pasos; las flechas salen de los pasos (puertos en Excel si usaste Ajustar conexiones).
6. Barra superior: Subir Excel, Mi Excel, Ayuda, Quiero descargar (guardar la app como diagramas.html), Limpiar y Resetear (borra lo guardado en el navegador y recarga).

Ajustar conexiones (puertos)

• Activa ✎ Ajustar conexiones y Ajustar ruta en un nodo. 1) Elige la flecha (paso) en el panel. 2) Se resalta el punto actual; el resto son candidatos. 3) Pulsa el nuevo punto. Cian = salida, ámbar = entrada. Una sola flecha en el nodo omite el paso 1.

Estructura del Excel

La validación ocurre antes de cargar: si falla, ves el detalle en un diálogo y el diagrama actual no cambia.

Orden de hojas: Procesos, Nodos, Pasos. Plantilla: Excel Demo o descargar ahora.

1. Procesos

• id: ID del proceso (ej. P-001, PagoTarjeta).
• nombre: Nombre amigable y corto del proceso.
• descripcion: Nota del proceso.

2. Nodos

• id: Identificador único (ej. API, DB, SERVICIO_A).
• label: Nombre visible en el diagrama.
• type: Tipo o categoría (ej. Entrada, Servicio, Datos).
• x / y: Posición inicial en el lienzo.
• visible: 1 o 0. (Oculta actores sin borrar el dato).
• description: (Opcional) Texto con ⓘ; se exporta en el Excel.

3. Pasos

• proceso_id: ID del proceso al que pertenece (ej. P-001).
• secuencia: Orden de ejecución (1, 2, 3…).
• nodo: Origen de la acción.
• accion: Descripción del paso (franja superior y panel).
• puerta_salida: Puerto de origen (R, UL, DR, etc.).
• destino: Actor destino.
• puerta_destino: Puerto en destino (L, UR, etc.).

Las flechas del lienzo se derivan de los pasos (origen→destino; si el par se repite entre procesos, mandan los puertos del último paso al leer el archivo).

Los datos y posiciones se guardan solo en este navegador. Limpiar o Resetear pueden borrar tu trabajo local; no hay copia en servidor.