SIMULATEUR DE DIAGRAMMES DE FLUX

Simulateur de diagrammes de flux

Créez des diagrammes avec variables, opérations, branches et boucles, puis exécutez-les en suivant l’évolution des valeurs.

Tout dans le navigateur Enregistrement automatique Import et export JSON Aucun JavaScript arbitraire exécuté Ordinateur recommandé

Ordinateur recommandé : le placement, la connexion et la modification des nœuds sont plus faciles avec une souris.

Nœuds

Glissez-déposez un nœud sur le canevas pour l’ajouter. Vous pouvez ensuite le déplacer.

Boucles

Connexion

Cliquez sur le ● sous un nœud, puis sur le ● au-dessus du nœud cible. Seules les décisions se divisent en Yes / No. Un début de boucle possède une connexion vers le corps de la boucle. Le début et la fin correspondants partagent une couleur et un numéro, comme « Boucle 1 ».

EDITOR

Diagramme de flux

100%

Ajoutez des nœuds pour créer un flux

Supprimer la sélectionCtrl+Z UndoCtrl+Y RedoCtrl+S : enregistrerDouble-clic : paramètres

Variables et exécution

Variables

Les valeurs reviennent à leur état initial au démarrage de l’exécution.

Sortie

Résultats des nœuds d’affichage

Aucune sortie pour le moment.

Historique

Historique d’exécution

Cliquez sur une entrée pour sélectionner le nœud.

Aucun historique d’exécution pour le moment.

Paramètres

Sélectionnez un nœud pour modifier ses paramètres.

Nom du projet Enregistré automatiquement dans le localStorage de cet appareil

HOW TO USE

Créez, exécutez et suivez les changements de valeurs

Ajoutez des nœuds à gauche et reliez chaque port de sortie au nœud suivant. Modifiez les expressions dans Paramètres, à droite.

Pourquoi l’utiliser ? Un schéma seul ne montre pas quelle branche est suivie, comment évoluent les variables ni si une boucle se termine. L’exécution vérifie l’ordre réel des opérations.

Utilisez-le pour Organisez la logique avant de coder, expliquez un processus en cours, vérifiez branches, calculs et boucles, ou repérez des erreurs avant l’implémentation.

Ouvrez Variables à droite et ajoutez des variables numériques, textuelles ou booléennes
Reliez les nœuds de Début à Fin et ajoutez les deux branches Yes / No à chaque décision
Choisissez « Étape » pour examiner le nœud actuel et les changements des variables
Enregistrez les flux terminés en JSON et gérez plusieurs versions avec Ouvrir

Les expressions utilisent un langage restreint et sûr. Aucun JavaScript arbitraire n’est exécuté et les diagrammes ou variables ne quittent pas votre navigateur.

GUIDE

Principes et utilisation des diagrammes de flux

Un diagramme de flux représente l’ordre des opérations et les branches conditionnelles à l’aide de formes et de connexions. Cet outil exécute le flux créé.

Qu’est-ce qu’un diagramme de flux ?

C’est un schéma de tâche ou de programme composé de formes et de connexions qui progressent de haut en bas. Il aide à organiser et expliquer les opérations en montrant leur ordre, leurs branches et leurs boucles.

Rôle de chaque forme

Terminaison (début/fin): Indique le début et la fin d’un flux.
Configuration :Ajoutez une terminaison Début ou Fin depuis la liste de gauche. Vous pouvez aussi modifier son type dans les paramètres à droite.
Exemple :Début → Traitement → Fin
Traitement: Représente une opération, telle que l’affectation d’une variable ou un calcul.
Configuration :Saisissez un nom et une expression de traitement dans les paramètres à droite. Écrivez une affectation par ligne.
Exemple :Nom « Incrémenter » et expression count = count + 1
Décision: Évalue une condition et se divise en deux directions : Yes et No.
Configuration :Saisissez une condition dans les paramètres à droite, puis reliez les sorties Yes et No.
Exemple :Condition score >= 70. Si vrai, suivez Yes ; si faux, suivez No.
Affichage: Ajoute un résultat de calcul ou un message à la sortie, à droite.
Configuration :Saisissez un nom et une expression de sortie dans les paramètres à droite.
Exemple :Expression de sortie "count=" + count
Début de boucle: Tant que la condition est vraie, le flux entre dans la boucle. Sinon, il continue après la boucle.
Configuration :Saisissez une condition dans les paramètres à droite et associez une fin de boucle.
Exemple :Condition count < 5. Si vrai, entrez dans la boucle ; si faux, continuez après.
Fin de boucle: À la fin du corps, le flux revient au début correspondant. Si la condition est fausse, il continue après la boucle.
Configuration :Sélectionnez le début de boucle correspondant dans les paramètres à droite.
Exemple :Placez-le après l’opération qui incrémente count ; la boucle se répète tant que count est inférieur à 5.

Comment dessiner le flux

Étapes générales

Glissez une forme de la liste de nœuds à gauche vers le canevas central.
Placez les formes dans l’ordre, du début à la fin. Faites glisser les nœuds pour les positionner.
Cliquez sur un nœud pour ouvrir son menu, puis choisissez Modifier le traitement pour définir son nom ou son expression.

Placement et réglages par forme

Terminaison (début/fin)

Placement :Placez un Début au début du flux et une Fin à la fin.

Connexion :Reliez un seul OUT de Début au nœud suivant et uniquement un IN à Fin. Fin n’a pas de OUT.

Traitement

Réglages :Choisissez Modifier le traitement pour saisir un nom et une expression. Une affectation par ligne.

Connexion :Reliez le nœud précédent à IN et un OUT au suivant. Exemple :count = count + 1

Décision

Réglages :Saisissez une condition dont le résultat est true ou false .

Connexion :Reliez chacune des sorties inférieures Yes et No à un nœud. Exemple :score >= 70

Affichage

Réglages :Saisissez un nom et une expression de sortie. À l’exécution, le résultat est ajouté à Sortie.

Connexion :Reliez le nœud précédent à IN et un OUT au suivant. Exemple :"count=" + count

Début de boucle

Réglages :Saisissez une condition et associez ce nœud à la fin de boucle de même couleur et numéro.

Connexion :Reliez un OUT au début du corps. Si la condition est false, le flux sort automatiquement de la boucle.

Fin de boucle

Réglages :Sélectionnez le début correspondant dans les paramètres à droite et placez ce nœud à la fin du corps de boucle.

Connexion :Reliez un OUT au traitement suivant. Ne créez pas de ligne vers le début : le retour est automatique à l’exécution.

Connexions et règles

Choisissez Connecter ou Démarrer une connexion dans le menu d’un nœud.
Cliquez sur OUT sous le nœud source, ou sur Yes / No d’une décision.
Cliquez sur IN au-dessus du nœud cible pour terminer la connexion.
Un OUT standard accepte une seule connexion. Un IN peut en recevoir plusieurs.
Si vous reliez le même OUT à un autre nœud, l’ancienne connexion est automatiquement remplacée.
Pour supprimer une connexion, sélectionnez-la et appuyez sur Delete.
Déplacez les nœuds pour éviter que les connexions se croisent.

Un seul OUT

Traitement A

Traitement B

Un seul lien peut partir d’un OUT. Le relier à un autre nœud remplace l’ancien lien.

IN accepte plusieurs connexions

Traitement A

Traitement B

Traitement C

Plusieurs OUT peuvent rejoindre l’IN d’un même nœud. Utilisez cette fonction pour fusionner des branches.

Reliez Yes et No séparément uniquement sur une décision. Associez le début et la fin de boucle dans les paramètres, sans les relier directement.

À propos des panneaux à droite

Sortie: Affiche dans l’ordre les résultats des nœuds Affichage exécutés. Les nœuds ignorés par une branche ne sont pas ajoutés.
Remarque :Avant l’exécution, « Aucune sortie » s’affiche. Pendant l’exécution, le panneau Sortie s’ouvre automatiquement.
Variables: Ajoutez les noms, types et valeurs initiales des variables. Les valeurs actuelles s’affichent pendant l’exécution.
Historique: Consultez les nœuds parcourus, les conditions et les changements de variables étape par étape.
Paramètres: Modifiez le nom, le traitement, la condition ou l’expression de sortie du nœud sélectionné.

Comment vérifier la sortie

Saisissez une expression de sortie dans les paramètres du nœud Affichage. Exemple :"count=" + count
Utilisez Étape ou Exécuter pour avancer jusqu’au nœud Affichage.
Lorsqu’un nœud Affichage s’exécute, son résultat est ajouté à Sortie.
Si un nœud Affichage s’exécute plusieurs fois dans une boucle, chaque résultat est ajouté dans l’ordre.
Pour vérifier la sortie depuis le début, choisissez Effacer en mode édition avant l’exécution.

Exemple :Variables count est 1 , l’expression de sortie "count=" + count produit count=1 .

La modification est désactivée pendant l’exécution ; les valeurs réelles et la sortie s’affichent à droite. Choisissez Terminer l’exécution pour revenir à l’édition.

Comment l’exécuter

ÉtapeExécute un seul nœud actuel.

ExécuterExécute automatiquement à la vitesse choisie.

PauseMet en pause l’exécution continue.

Terminer l’exécutionTermine l’exécution et revient au mode édition.

Vitesse : NormaleChoisissez la vitesse d’exécution continue.

Glissez une forme de la liste de nœuds à gauche vers le canevas central.
Déplacez les nœuds sur le canevas pour les positionner.
Cliquez sur un nœud pour ouvrir le menu et choisissez Modifier le traitement.
Cliquez sur une connexion pour la sélectionner, puis appuyez sur Delete.
Étape exécute un nœud à la fois ; Exécuter lance l’exécution automatique. Choisissez Terminer l’exécution pour arrêter.
Les projets sont enregistrés sur cet appareil et peuvent être sauvegardés en JSON.

Opérateurs arithmétiques et exemples

Type	Symbole	Exemple	Signification
Addition	`+`	`score + 10`	Ajouter 10 à score
Soustraction	`-`	`count - 1`	Soustraire 1 de count
Multiplication	`*`	`price * quantity`	Multiplier price par quantity
Division	`/`	`total / 2`	Diviser total par 2
Modulo	`%`	`count % 2 == 0`	Vérifier si le nombre est pair

Opérateurs de comparaison et logiques

Type	Symbole	Exemple	Signification
Égal	`==`	`score == 70`	score est égal à 70
Différent	`!=`	`score != 0`	score n’est pas égal à 0
Supérieur à	`>`	`score > 70`	score est supérieur à 70
Supérieur ou égal à	`>=`	`score >= 70`	score est supérieur ou égal à 70
Inférieur à	`<`	`count < 5`	count est inférieur à 5
Inférieur ou égal à	`<=`	`count <= 5`	count est inférieur ou égal à 5
ET	`&&`	`score >= 70 && count < 5`	Les deux conditions sont vraies
ou	`\|\|`	`score < 0 \|\| score > 100`	L’une des conditions est vraie
NON	`!`	`!isFinished`	Inverse une valeur booléenne

= affecte une valeur dans un traitement, tandis que== compare des valeurs dans une condition.!isFinished Pour utiliser isFinished enregistrez-la comme variable booléenne. Regroupez les conditions complexes entre parenthèses, par exemple (score + bonus) >= 70 .

Résoudre les erreurs d’exécution

Message d’erreur Les raisons de l’échec apparaissent sous les commandes. Les nœuds concernés sont aussi marqués sur le canevas ; corrigez chaque problème affiché.

En cas d’erreur de structure, vérifiez le nom du nœud et ses connexions.
Cliquez sur le nœud, choisissez Modifier le traitement et corrigez l’expression concernée.
S’il manque une connexion, reliez le port de sortie au port d’entrée cible.
En cas d’erreur pendant l’exécution, choisissez Terminer l’exécution, corrigez, puis vérifiez avec Étape.

Vérifier les connexions et la structure

Utilisez un seul nœud Début et reliez le flux jusqu’à Fin.
Chaque nœud, sauf les décisions et Fin, doit avoir une seule connexion suivante.
Reliez une branche Yes et une branche No à chaque décision.
Associez chaque début et fin de boucle portant le même numéro.

Vérifier les expressions et les valeurs

Utilisez une affectation par ligne et déclarez les variables avant de les utiliser.
Ne mélangez pas les types numériques, textuels et booléens.
Les conditions de décision et de boucle doivent produire true ou false .
Vérifiez les divisions par zéro et les parenthèses ou chaînes non fermées.