Web Toolarium

SIMULADOR DE DIAGRAMAS DE FLUJO

Simulador de diagramas de flujo

Crea diagramas de flujo con variables, operaciones, bifurcaciones y bucles; ejecútalos y observa cómo cambian los valores.

Todo en el navegador Guardado automático Importar y exportar JSON Sin ejecución de JavaScript arbitrario Se recomienda ordenador

Recomendado para ordenador: colocar, conectar y editar nodos es más cómodo con un ratón.

EDITOR

Diagrama de flujo

100%
Añade nodos para crear un flujo
Delete: eliminar selecciónCtrl+Z UndoCtrl+Y RedoCtrl+S: guardarDoble clic: configuración
Se guarda automáticamente en localStorage de este dispositivo

HOW TO USE

Créalo, ejecútalo y observa los cambios de valores

Añade nodos desde la izquierda y conecta cada puerto de salida con el siguiente nodo. Edita las expresiones de proceso, condición y visualización en Configuración, a la derecha.

¿Por qué usarlo? Un diagrama por sí solo no muestra qué rama se ejecuta, cómo cambian las variables ni si termina un bucle. Al ejecutarlo, puedes comprobar que el proceso sigue el orden previsto.

Úsalo para Organiza la lógica antes de programar, explica procesos en clase, comprueba condiciones, cálculos y bucles, o detecta errores antes de implementar.

  1. Abre Variables a la derecha y añade variables numéricas, de texto o booleanas
  2. Conecta los nodos desde Inicio hasta Fin y añade las dos ramas Yes / No a cada decisión
  3. Pulsa «Paso» para revisar el nodo actual y los cambios en las variables
  4. Guarda los flujos terminados como JSON y gestiona varias versiones con Abrir

Las expresiones se evalúan con un lenguaje limitado y seguro. No se ejecuta JavaScript arbitrario y los diagramas o variables no salen del navegador.

GUIDE

Conceptos básicos y uso del diagrama de flujo

Un diagrama de flujo representa el orden de las operaciones y las ramas condicionales mediante figuras y conexiones. Esta herramienta ejecuta el flujo que creas.

¿Qué es un diagrama de flujo?

Es un diagrama de una tarea o programa con figuras y conexiones que avanzan de arriba abajo. Ayuda a organizar y explicar las operaciones mostrando su orden, ramas y bucles.

Función de cada figura

Terminal (inicio/fin)
Indica el inicio y el final de un flujo.
Configuración:Añade un terminal de Inicio o Fin desde la lista de la izquierda. También puedes cambiar su tipo en Configuración, a la derecha.
Ejemplo:Inicio → Proceso → Fin
Proceso
Representa una operación, como asignar una variable o realizar un cálculo.
Configuración:Introduce un nombre y una expresión de proceso en Configuración. Escribe una asignación por línea.
Ejemplo:Nombre «Contar» y expresión count = count + 1
Decisión
Evalúa una condición y se divide en dos direcciones: Yes y No.
Configuración:Introduce una condición en Configuración y conecta las salidas Yes y No.
Ejemplo:Condición score >= 70. Si es verdadero, sigue Yes; si es falso, sigue No.
Mostrar
Añade el resultado de un cálculo o un mensaje a Salida, a la derecha.
Configuración:Introduce un nombre y una expresión de salida en Configuración, a la derecha.
Ejemplo:Expresión de salida "count=" + count
Inicio del bucle
Mientras la condición sea verdadera, el flujo entra en el bucle. Cuando sea falsa, continúa después del bucle.
Configuración:Introduce una condición en Configuración y asígnale un final de bucle correspondiente.
Ejemplo:Condición count < 5. Si es verdadero, entra en el cuerpo; si es falso, continúa después del bucle.
Fin del bucle
Al final del cuerpo, el flujo vuelve al inicio correspondiente. Si la condición es falsa, continúa después del bucle.
Configuración:Selecciona el inicio de bucle correspondiente en Configuración, a la derecha.
Ejemplo:Colócalo después de la operación que incrementa count; el bucle se repite mientras count sea menor que 5.

Cómo dibujar el flujo

Pasos generales

  1. Arrastra una figura desde la lista de nodos de la izquierda al lienzo central.
  2. Coloca las figuras en orden desde Inicio hasta Fin. Arrastra los nodos para ajustar su posición.
  3. Haz clic en un nodo para abrir el menú y selecciona Editar proceso para definir su nombre o expresión.

Colocación y configuración de cada figura

Terminal (inicio/fin)

Colocación:Coloca un Inicio al principio del flujo y un Fin al final.

Conexión:Conecta un único OUT de Inicio al siguiente nodo y solo un IN a Fin. Fin no tiene OUT.

Proceso

Configuración:Selecciona Editar proceso para introducir el nombre y la expresión. Escribe una asignación por línea.

Conexión:Conecta el nodo anterior a IN y un OUT al siguiente. Ejemplo:count = count + 1

Decisión

Configuración:Introduce una condición cuyo resultado sea true o false .

Conexión:Conecta las salidas inferiores Yes y No a un nodo cada una. Ejemplo:score >= 70

Mostrar

Configuración:Introduce un nombre y una expresión de salida. Al ejecutarlo, el resultado se añade a Salida.

Conexión:Conecta el nodo anterior a IN y un OUT al siguiente. Ejemplo:"count=" + count

Inicio del bucle

Configuración:Introduce una condición y forma una pareja con el fin de bucle del mismo color y número.

Conexión:Conecta un OUT al inicio del cuerpo. Si la condición es false, el flujo sale del bucle automáticamente.

Fin del bucle

Configuración:Selecciona el inicio correspondiente en Configuración y coloca este nodo al final del cuerpo del bucle.

Conexión:Conecta un OUT al proceso posterior. No dibujes una conexión directa al inicio: el flujo vuelve automáticamente durante la ejecución.

Conexiones y reglas

  1. Pulsa Conectar o selecciona Iniciar conexión en el menú de un nodo.
  2. Haz clic en OUT debajo del nodo de origen o en Yes / No de una decisión.
  3. Haz clic en IN sobre el nodo de destino para completar la conexión.
  4. Un OUT normal admite una conexión. Un IN puede recibir conexiones de varios nodos.
  5. Al conectar el mismo OUT a otro nodo, se sustituye automáticamente la conexión anterior.
  6. Para eliminar una conexión, selecciónala y pulsa Delete.
  7. Arrastra los nodos para evitar que se crucen las conexiones.
Un solo OUT
Proceso A
Proceso B

Solo puede salir una conexión de un OUT. Al conectarlo a otro nodo, se sustituye la línea anterior.

IN admite varias conexiones
Proceso A
Proceso B
Proceso C

Varios OUT pueden conectarse al IN del mismo nodo. Úsalo para unir flujos después de una bifurcación.

Conecta Yes y No por separado solo en una decisión. Empareja el inicio y el fin del bucle en Configuración; no los conectes directamente.

Acerca de los paneles de la derecha

Salida
Muestra en orden los resultados de los nodos Mostrar ejecutados. No se añaden resultados de nodos omitidos por una rama.
Nota:Antes de ejecutar, aparece «Aún no hay resultados». Durante la ejecución, se abre Salida automáticamente.
Variables
Registra nombres, tipos y valores iniciales. Durante la ejecución puedes consultar los valores actuales.
Historial
Consulta los nodos recorridos, las condiciones y los cambios de variables paso a paso.
Configuración
Edita el nombre, la operación, la condición o la expresión de salida del nodo seleccionado.

Cómo revisar la salida

  1. Introduce una expresión de salida en la configuración del nodo Mostrar. Ejemplo:"count=" + count
  2. Usa Paso o Ejecutar para avanzar hasta el nodo Mostrar.
  3. Al ejecutar un nodo Mostrar, el resultado evaluado se añade a Salida.
  4. Si un nodo Mostrar se ejecuta varias veces en un bucle, cada resultado se añade en orden.
  5. Para revisar la salida desde el principio, pulsa Borrar en el modo de edición antes de ejecutar.

Ejemplo:Variables count es 1 , la expresión de salida "count=" + count produce count=1 .

No se puede editar durante la ejecución; a la derecha se muestran los valores reales y la salida. Pulsa Finalizar ejecución para volver a editar.

Cómo ejecutarlo

PasoEjecuta un solo nodo actual.

EjecutarEjecuta automáticamente a la velocidad seleccionada.

PausarPausa la ejecución continua.

Finalizar ejecuciónFinaliza la ejecución y vuelve al modo de edición.

Velocidad: NormalSelecciona la velocidad de ejecución continua.

  1. Arrastra una figura desde la lista de nodos de la izquierda al lienzo central.
  2. Arrastra los nodos del lienzo para colocarlos.
  3. Haz clic en un nodo para abrir el menú y elige Editar proceso para cambiar su contenido.
  4. Haz clic en una conexión para seleccionarla y pulsa Delete para eliminarla.
  5. Paso ejecuta un nodo cada vez; Ejecutar lo hace automáticamente. Pulsa Finalizar ejecución para detenerlo.
  6. Los proyectos se guardan en este dispositivo y puedes crear una copia JSON.

Operadores aritméticos y ejemplos

TipoSímboloEjemploSignificado
Suma+score + 10Sumar 10 a score
Resta-count - 1Restar 1 a count
Multiplicación*price * quantityMultiplicar price por quantity
División/total / 2Dividir total entre 2
Resto%count % 2 == 0Comprobar si es par

Operadores de comparación y lógicos

TipoSímboloEjemploSignificado
Igual==score == 70score es igual a 70
Distinto!=score != 0score no es 0
Mayor que>score > 70score es mayor que 70
Mayor o igual que>=score >= 70score es al menos 70
Menor que<count < 5count es menor que 5
Menor o igual que<=count <= 5count es como máximo 5
Y&&score >= 70 && count < 5Ambas condiciones son verdaderas
o||score < 0 || score > 100Una de las condiciones es verdadera
Negación!!isFinishedInvierte un valor booleano

= asigna un valor en una operación, mientras que== compara valores en una condición.!isFinished Al usar isFinished regístrala como variable booleana. Agrupa condiciones complejas entre paréntesis, como (score + bonus) >= 70 .

Solución de errores de ejecución

Mensaje de error Los motivos por los que no se puede ejecutar aparecen debajo de los controles. Los nodos con problemas también se marcan en el lienzo; corrige cada punto.

  1. Si se trata de un error estructural, revisa el nombre del nodo y sus conexiones.
  2. Haz clic en el nodo, elige Editar proceso y corrige la expresión de operación, condición o salida.
  3. Si falta una conexión, une el puerto de salida con el puerto de entrada correspondiente.
  4. Si aparece un error durante la ejecución, pulsa Finalizar ejecución, corrige el problema y vuelve a comprobarlo con Paso.

Revisar conexiones y estructura

  • Usa un solo nodo Inicio y conecta el flujo hasta Fin.
  • Cada nodo, salvo decisiones y Fin, debe tener una conexión siguiente.
  • Conecta una rama Yes y una No a cada decisión.
  • Empareja cada inicio de bucle con su final usando el mismo número.

Revisar expresiones y valores

  • Escribe una asignación por línea y registra las variables antes de usarlas.
  • No mezcles tipos numéricos, de texto y booleanos.
  • Las condiciones de decisiones y bucles deben dar como resultado true o false .
  • Comprueba si hay divisiones por cero o paréntesis y cadenas sin cerrar.

LOCAL PROJECTS

Proyectos guardados