Le codage visuel, expliqué

Qu’est-ce que le codage visuel par nœuds ?

Les élèves relient des nœuds, chacun associé à une action : le graphe est le programme. Toute la logique, sans syntaxe à taper.

ÉVÉNEMENT
Au clic : mot 📖
ACTION
Lancer le son : lecture à voix haute
ANIMER
Définition → apparaît en fondu
Un vrai programme Elementari en trois nœuds : toucher un mot, l’entendre et afficher sa définition.

Un nœud, une action. Les connexions forment le programme.

Vidéo · Le codage visuel par nœuds au service des apprentissages · 2 min

Chaque page a deux faces

Un projet Elementari ressemble à un diaporama à deux faces : recto pour créer, verso pour coder.

RECTO · créationcomme dans un diaporama
Recto d’une page Elementari : espace de conception du texte et de la mise en page

Au recto, les élèves écrivent et composent chaque page avec textes, illustrations et sons intégrés.

VERSO · codele graphe d’événements
Verso d’une page Elementari : graphe d’événements reliant des nœuds pour ajouter de l’interactivité

Au verso, reliez les nœuds : au clic, animations, sons et changements de page se déclenchent.

Une vraie pensée informatique, sans syntaxe

01
Pensée algorithmique
Des événements comme au démarrage de la page ou au clic rendent visibles cause, effet et séquence.
02
Décomposition
Chaque effet se décompose en petites actions reliées, un nœud à la fois.
03
Débogage
Le mode Inspection éclaire les nœuds en cours d’exécution : la logique se voit et se corrige.
« Nous sommes complètement conquis par le codage avec Elementari ! Tous les élèves ont pu se lancer immédiatement et laisser libre cours à leur créativité avec le code ! »
Coach Victor Hicks · fondateur de Coding with Culture

Le même principe est utilisé par des outils professionnels

Le codage par nœuds n’est pas une version simplifiée : il sert déjà à créer des jeux, des films, des œuvres et des bâtiments. Les élèves apprennent ainsi une véritable méthode de programmation.

UUnreal EngineJEUX ET CINÉMAFortnite et les décors virtuels de The Mandalorian reposent sur Blueprints, le codage par nœuds d’Unreal.
HHoudiniEFFETS VISUELSLes effets de feu, d’eau et de foule dans La Reine des neiges et Avengers sont créés avec des graphes de nœuds.
TTouchDesignerART EN DIRECTVisuels de Coachella et sculptures LED réactives au public.
GGrasshopperARCHITECTUREConception paramétrique de Zaha Hadid Architects : bâtiments façonnés par des graphes de nœuds.
CComfyUIIMAGES ET VIDÉOS PAR IAInterface de référence pour l’image générée par IA : chaque étape est un nœud reconnectable.
n8n8nAGENTS IAEn entreprise, les agents d’IA s’assemblent ainsi : déclencheurs, modèles et actions reliés en nœuds.

Codage par blocs et codage par nœuds : quelles différences ?

Après Scratch et ses blocs empilés, le codage par nœuds prolonge la même logique : les actions se relient dans un graphe.

Codage par blocs · ex. Scratch
quand le drapeau vert est cliquéavancer de 10 pasdire « bonjour »
Les commandes s’empilent en script vertical : idéal pour une suite d’actions linéaire.
Codage par nœuds · Elementari
au cliclancer le sonanimer
Les actions se relient, se ramifient et s’exécutent en parallèle, comme dans les outils professionnels.
VS
Pourquoi le graphe change tout · une page avec narration

Au démarrage de la page, la voix se lance et l’effet de texte démarre — en même temps. À la fin de la voix, l’enregistrement et l’effet suivants commencent — l’un après l’autre.

Avec des blocs, il faut simuler le minutage avec des blocs d’attente et compter les secondes. Dans un graphe, la sortie « terminé » lance simplement l’action suivante, en parallèle ou à la suite.

Graphe d’événements Elementari : voix enregistrées et effets de texte exécutés en parallèle puis en séquence

Pourquoi les enseignants choisissent Elementari

Un même outil, à tous les niveauxLes débutants créent par glisser-déposer ; les plus avancés ajoutent logique et interactivité sur la même page.
Remplace l’exposé et le diaporamaUn projet scientifique devient une explication animée ; une séquence d’histoire, un récit interactif. Même rigueur, vrai public.
Tient en une séanceAnimation, son et transitions simplifiés : un vrai projet terminé avant la fin du cours.
L’histoire donne envie de se lancerUne histoire donne envie de coder à ceux qui n’auraient jamais choisi un cours de programmation. Pourquoi le codage créatif compte →
« Les illustrations et les animations codées ont immédiatement captivé les enfants. Même sans aucune expérience préalable du codage, j’ai trouvé l’interface facile à utiliser — Elementari est un formidable moyen de faire découvrir le codage à celles et ceux qu’il peut intimider ! »
Julexus Cappell · Boys and Girls Club, Petersburg

Testez un vrai projet

Animate Your Name — jouez, puis activez l’inspection pour voir les nœuds s’allumer pendant l’exécution.

Jouable directement sur la page, sans compte.

Questions fréquentes

Le codage visuel est-il vraiment du codage ?

Oui. Le codage visuel mobilise les mêmes notions que la programmation textuelle — événements, séquences, conditions, boucles et état — sous forme de nœuds reliés. Des jeux entiers sont même produits avec les Blueprints d’Unreal Engine.

À quels âges s’adresse le codage visuel ?

Du primaire au secondaire : clics simples pour les plus jeunes ; récits à embranchements, jeux et simulations avec variables pour les plus grands. Aides et défis s’adaptent au niveau.

Le codage visuel prépare-t-il à la programmation textuelle ?

Décomposer un problème en événements et actions prépare au passage à Python ou JavaScript : seule la syntaxe change. Les graphes apprennent aussi à suivre l’exécution d’un programme.

Quelle différence avec Scratch ?

Scratch empile des blocs en scripts. Elementari relie des actions en graphes, au service d’une histoire ou d’un jeu écrit par l’élève — une autre porte d’entrée dans le code.

À tester en classe

Générez une leçon ou choisissez-en une dans la Banque de leçons : une histoire codée par les élèves dès cette semaine, sans expérience préalable.