Le codage visuel, expliqué

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

Au lieu de saisir de la syntaxe, les élèves du primaire au secondaire relient des nœuds — des blocs qui exécutent chacun une action — dans un graphe qui est le programme. Toute la logique, sans les fautes de frappe.

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

Chaque nœud correspond à une action. Les relier, c’est créer le programme. Tout est là.

À voir : comment le codage visuel par nœuds transforme l’apprentissage · 2 min

Les deux faces de chaque page

Les projets Elementari ressemblent à des diaporamas, avec un secret : chaque page possède un recto pour créer et un verso pour coder.

RECTO · créationcomme créer un diaporama
Recto d’une page Elementari : l’espace de création où le texte d’une histoire est écrit et mis en page

Les élèves écrivent leur histoire et composent chaque page — ils y déposent des textes, des illustrations et des sons parmi des milliers de ressources intégrées.

VERSO · codele graphe d’événements
Verso d’une page Elementari : le graphe d’événements où les nœuds sont reliés pour ajouter de l’interactivité

Retournez la page et reliez les nœuds : des événements comme au clic déclenchent animations, sons et changements de page pour donner vie à l’histoire.

Une vraie pensée informatique, sans syntaxe

01
Pensée algorithmique
Des événements comme au démarrage de la page et au clic enseignent la cause, l’effet et l’enchaînement.
02
Décomposition
Les grands effets se décomposent en petites étapes reliées — un nœud à la fois.
03
Débogage
Le mode Inspection illumine les nœuds à mesure qu’ils s’exécutent : les élèves voient leur logique à l’œuvre et peuvent la corriger.
« 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 fait fonctionner des outils professionnels

Le codage par nœuds n’est pas une version simplifiée de la programmation : des professionnels l’utilisent pour créer des jeux, des films, des œuvres d’art et des bâtiments. Les élèves apprennent un véritable paradigme.

UUnreal EngineJEUX ET CINÉMADerrière Fortnite et les décors virtuels de The Mandalorian : Blueprints permet de coder par nœuds.
HHoudiniEFFETS VISUELSLe feu, l’eau et les foules de La Reine des neiges et d’Avengers sont créés avec des graphes de nœuds.
TTouchDesignerART EN DIRECTLes visuels de scène de Coachella et des sculptures LED qui réagissent au public.
GGrasshopperARCHITECTURELa conception paramétrique utilisée par Zaha Hadid Architects : des bâtiments façonnés par une logique de nœuds.
CComfyUIIMAGE ET VIDÉO PAR IAL’interface de référence pour générer des images par IA : chaque étape du processus est un nœud que l’on peut reconnecter.
n8n8nAGENTS IALa façon dont les entreprises relient leurs agents IA : déclencheurs, modèles et actions dans un flux de nœuds.

Codage par blocs ou par nœuds

Si vos élèves ont déjà utilisé Scratch, ils connaissent le codage par blocs : des commandes empilées pour former un script vertical. Le codage par nœuds est l’étape suivante de la même famille.

Codage par blocs · ex. Scratch
quand le drapeau vert est cliquéavancer de 10 pasdire « bonjour »
Les commandes s’empilent de haut en bas pour former un script. Idéal pour travailler l’enchaînement : un personnage, une liste d’étapes.
Codage par nœuds · Elementari
au cliclancer le sonanimer
Les actions se relient dans un graphe qui peut se ramifier et s’exécuter en parallèle — un fonctionnement plus proche des outils professionnels et des systèmes réels.
ou
Pourquoi le graphe change tout · une page avec narration

Au démarrage de la page, la voix enregistrée se lance et l’effet du texte dans la bulle s’exécute — en même temps. Lorsque la voix se termine, l’enregistrement suivant et son effet de texte démarrent — l’un après l’autre.

Avec des blocs, c’est réellement difficile : il faut simuler le rythme avec des blocs d’attente et compter à la main la durée de chaque enregistrement. Dans un graphe, il suffit de relier la sortie « terminé » de la voix à l’action suivante — en parallèle quand vous le souhaitez, dans l’ordre quand vous en avez besoin.

Un graphe d’événements Elementari montrant des nœuds de voix enregistrée et d’effets de texte reliés pour s’exécuter d’abord en parallèle, puis dans l’ordre

Pourquoi les enseignants choisissent Elementari

Un seul outil, à tous les niveauxLes débutants expriment leurs idées par glisser-déposer ; les élèves avancés ajoutent logique et interactivité sur la même page.
Remplace l’exposé et le diaporamaUn projet de sciences devient une explication animée ; une séquence d’histoire devient un récit dynamique — la même rigueur, devant un vrai public.
Tient dans une heure de coursGrâce à des parcours simplifiés pour l’animation, le son et les transitions, les élèves terminent une vraie création avant la sonnerie.
L’histoire donne envie de se lancerMettre le codage au service d’une histoire attire des élèves qui ne choisiraient jamais un « cours de codage ». 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

Essayez un vrai projet

Animate Your Name — jouez avec le projet, puis activez le mode Inspection pour voir les nœuds s’illuminer à mesure qu’ils s’exécutent.

Le projet se joue directement sur la page, sans compte.

Questions fréquentes

Le codage visuel est-il vraiment du codage ?

Oui. Le codage visuel repose sur les mêmes notions que la programmation textuelle — événements, séquences, conditions, boucles et états — exprimées sous forme de nœuds reliés plutôt que de syntaxe saisie au clavier. Des outils professionnels comme Blueprints d’Unreal Engine permettent de produire de vrais jeux entièrement construits avec des graphes de nœuds.

À quels âges s’adresse le codage visuel ?

Elementari s’utilise du primaire au secondaire. Les lecteurs débutants commencent par des événements simples, comme cliquer pour déclencher une action sur la page de leur histoire ; les plus grands créent des récits à embranchements, des jeux et des simulations avec des variables et de la logique. Les leçons adaptent l’accompagnement et le niveau de difficulté à chaque élève.

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

C’est une excellente porte d’entrée. Les élèves capables de décomposer un problème en événements et en actions transfèrent directement cette façon de penser vers Python ou JavaScript : seule la syntaxe est nouvelle. Les graphes de nœuds les habituent aussi à lire le déroulement d’un programme, une grande partie du travail quotidien des développeurs.

Quelle différence avec Scratch ?

Scratch utilise le codage par blocs : les commandes s’empilent pour former des scripts. Elementari utilise le codage par nœuds : les actions se relient dans des graphes, au service d’une histoire ou d’un jeu écrit par l’élève. Cette approche attire aussi les enfants qui ne se voient pas comme des codeurs.

Passez à la pratique en classe

Générez une leçon — ou choisissez-en une dans la Banque de leçons — et, dès cette semaine, vos élèves coderont leur propre histoire. Aucune expérience nécessaire, ni pour eux ni pour vous.