Le codage visuel, expliqué

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

Au lieu de taper de la syntaxe, les élèves de la maternelle à la terminale relient des nœuds — des blocs qui font chacun une chose — pour former un graphe qui est le programme. Toute la logique, aucune faute de frappe.

EVENT
On click: word 📖
ACTION
Play sound: read aloud
ANIMATE
Meaning → fades in
Un vrai programme Elementari : toucher un mot difficile dans l’histoire, l’entendre lu à voix haute, voir son sens apparaître en fondu. Trois nœuds.

Chaque nœud est une action. Les relier, c’est le programme. Voilà toute l’idée.

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

Deux faces pour chaque diapositive

Les projets Elementari fonctionnent comme un diaporama avec un secret : chaque diapositive a une face avant pour concevoir, et une face arrière pour coder.

AVANT · designcomme créer un diaporama
Face avant d’une diapositive Elementari — la mise en page de design où une page d’histoire est écrite et organisée

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

ARRIÈRE · codele graphe d’événements
Face arrière d’une diapositive Elementari — le graphe d’événements où les nœuds sont reliés pour ajouter de l’interactivité

Retournez la diapositive et reliez les nœuds — des événements comme on click 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 on page start et on click enseignent cause, effet et séquence.
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 pendant leur exécution, afin que les élèves voient leur logique fonctionner et puissent la corriger.
« Nous sommes absolument conquis par le codage Elementari ! Tous les apprenants ont pu se lancer immédiatement et créer avec le code ! »
Coach Victor Hicks · fondateur de Coding with Culture

La même idée anime des outils professionnels

Le codage par nœuds n’est pas une version simplifiée de la programmation — c’est ainsi que des professionnels créent jeux, films, art et architecture. Les élèves apprennent un vrai paradigme.

UUnreal EngineJEUX ET CINÉMADerrière Fortnite et les plateaux virtuels de The Mandalorian — Blueprints, c’est du codage par nœuds.
HHoudiniVFXLe feu, l’eau et les foules dans Frozen et The Avengers sont des graphes de nœuds.
TTouchDesignerART LIVEDes visuels de scène à Coachella et des sculptures LED qui réagissent au public.
GGrasshopperARCHITECTURELe design paramétrique derrière Zaha Hadid Architects — des bâtiments façonnés par la logique des nœuds.
CComfyUIIMAGE ET VIDÉO IAL’interface de référence pour générer des images par IA — chaque étape du pipeline est un nœud reconnectable.
n8n8nAGENTS IAComment les entreprises connectent des agents IA — déclencheurs, modèles et actions sous forme de workflow à nœuds.

Codage par blocs ou codage par nœuds

Si vos élèves ont utilisé Scratch, ils ont déjà fait du codage par blocs — empiler des commandes dans un script vertical. Le codage par nœuds est l’étape suivante de la même famille.

Codage par blocs · ex. Scratch
when flag clickedmove 10 stepssay “hello”
Les commandes s’empilent de haut en bas dans un script. Idéal pour séquencer — un sprite, une liste d’étapes.
Codage par nœuds · Elementari
on clickplay soundanimate
Les actions se relient en graphe, avec des branches et des exécutions en parallèle — plus proche du fonctionnement des outils professionnels et des vrais systèmes.
vs
Pourquoi le graphe compte · une page narrée

On page start, la voix enregistrée se lance et l’effet de texte de la bulle s’exécute — en même temps. Quand la voix se termine, la voix enregistrée suivante et son effet de texte commencent — dans l’ordre.

En codage par blocs, c’est vraiment difficile : il faut simuler le rythme avec des blocs d’attente, en comptant à la main le nombre de secondes de chaque enregistrement. Dans un graphe, il suffit de relier le « terminé » de la voix à l’action suivante — en parallèle quand vous le voulez, en séquence quand vous en avez besoin.

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

Pourquoi les enseignants choisissent Elementari

Tous les niveaux, un seul outilLes 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 — même exigence, vrai public.
Tient dans une période de coursDes workflows simplifiés pour l’animation, le son et les transitions permettent aux élèves de terminer quelque chose de réel avant la sonnerie.
Le récit est l’accrocheCoder au service d’une histoire attire des élèves qui ne choisiraient jamais un « cours de code ». Pourquoi le creative coding →
« Les illustrations et les animations codées ont immédiatement capté l’attention des enfants. Même sans aucune expérience préalable en codage, j’ai trouvé l’interface facile à utiliser — Elementari est une façon incroyable d’initier au code celles et ceux qui peuvent s’en sentir intimidés ! »
Julexus Cappell · Boys and Girls Club, Petersburg

Essayez un vrai projet

Animate Your Name — lancez-le, puis activez le mode inspection pour voir les nœuds s’illuminer pendant leur exécution.

Se lance directement sur la page, sans compte.

Questions fréquentes

Le codage visuel est-il du vrai codage ?

Oui. Le codage visuel utilise les mêmes concepts que la programmation textuelle — événements, séquences, conditions, boucles et état — exprimés en nœuds reliés plutôt qu’en syntaxe tapée. Des outils professionnels comme Blueprints d’Unreal Engine publient de vrais jeux entièrement construits avec des graphes de nœuds.

À quels âges s’adresse le codage visuel ?

Elementari est utilisé de la maternelle à la terminale. Les jeunes lecteurs commencent avec de simples événements cliquer-et-jouer sur leurs pages d’histoire ; les élèves plus âgés créent des récits à embranchements, des jeux et des simulations avec variables et logique. Les leçons ajustent l’aide et le défi selon le niveau des élèves.

Le codage visuel mène-t-il au codage textuel ?

C’est une excellente rampe d’accès. Les élèves capables de décomposer un problème en événements et en actions transfèrent directement cette pensée vers Python ou JavaScript — seule la syntaxe est nouvelle. Les graphes de nœuds habituent aussi à lire le flux d’un programme, ce qui représente une grande part du travail des développeurs professionnels.

En quoi est-ce différent de Scratch ?

Scratch est du codage par blocs : les commandes s’empilent en scripts. Elementari est du codage par nœuds : les actions se relient en graphes — et le code sert une histoire ou un jeu que l’élève écrit, ce qui attire des enfants qui ne se voient pas comme codeurs.

Voyez-le dans votre classe

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