En autonomie
15min
Vous savez lire et écrire un arbre de décision sur papier. Voici comment le dessiner à l’écran avec draw.io, qui est gratuit et ne demande aucun compte. Le but n’est pas de connaître tout l’outil, mais de savoir produire un arbre propre et de savoir le rendre.
Allez sur draw.io, vous allez être redirigé vers app.diagrams.net. Rien à installer, aucun compte à créer.
Si la feuille devant vous n’est pas vierge, parce qu’un ancien document est resté ouvert, faites Fichier > Nouveau pour repartir de zéro, puis choisissez Diagramme vierge.
Vous arrivez sur la feuille de travail. Trois zones à repérer, et ce sont les seules dont nous nous servirons.
Quatre raccourcis à connaître avant de commencer, ils vous éviteront de tout recommencer.
Le problème principal n’a ni cadre ni flèche. Ce n’est donc pas une forme, c’est du texte posé sur la feuille.
Tapez texte dans le champ de recherche, en haut du panneau de gauche. La forme Texte apparaît dans la liste.
Faites-la glisser sur la feuille, puis tapez votre énoncé.
Les deux formes dont vous avez besoin sont déjà là, dans le bloc Général du panneau de gauche. Survolez-en une pour lire son nom.
Le rectangle sert aux actions.
Faites-le glisser sur la feuille, puis tapez votre texte. Pour le redimensionner, tirez sur les poignées bleues des coins.
Le losange sert aux conditions. Attention si vous le cherchez par son nom : draw.io l’appelle Diamond, en anglais.
Écrivez vos conditions avant de tracer les flèches. Une fois les flèches en place, agrandir une boîte devient plus pénible, et un texte trop long qui déborde de son losange se corrige mal.
Une flèche doit relier deux formes. Survolez le milieu d’une arête de la forme de départ, sans cliquer : un rond vert apparaît. C’est un point de connexion.
Partez de ce rond, tirez jusqu’à l’autre forme, et relâchez quand un rond vert y apparaît à son tour. La flèche est alors accrochée aux deux formes.
C’est le point sur lequel les arbres se dégradent le plus souvent. Si vous relâchez sans ce rond vert, la flèche est simplement posée à cet endroit de la feuille. Elle a l’air correcte, mais elle n’est reliée à rien.
Le test qui ne trompe pas : déplacez une boîte. Si les flèches la suivent, elles sont accrochées. Si elles restent sur place, elles ne le sont pas, et il faut les retracer. Faites ce test une fois votre arbre terminé, avant de l’exporter.
Pour écrire OUI ou NON sur une flèche, double-cliquez dessus. Un mot provisoire apparaît, sélectionné : tapez le vôtre par-dessus. L’étiquette se déplacera ensuite avec la flèche.
Un lecteur qui découvre votre arbre doit savoir par où commencer. Sur papier, on double le trait du premier losange. Dans draw.io, on lui met une ombre : sélectionnez-le, dépliez Effets en bas du panneau de droite, et cochez Ombre.
L’ombre ne va que sur la première condition, jamais sur les autres, jamais sur une action. Si tout est en relief, plus rien ne l’est, et on a perdu le point d’entrée.
Avant d’exporter, donnez un nom à votre document : cliquez sur Diagramme sans nom.drawio en haut à gauche. C’est ce nom que draw.io proposera pour le fichier que vous rendrez.
Ensuite, deux formats, deux usages.
Fichier > Exporter en tant que > PNG. C’est l’image que l’on regarde, que l’on colle dans un document ou que l’on imprime.
Dans les options, cochez Inclure une copie de mon diagramme. Le fichier reste une image ordinaire, mais il contient aussi votre arbre modifiable : vous pourrez le rouvrir plus tard dans draw.io et continuer à travailler dessus. Un seul fichier au lieu de deux.
Une seconde fenêtre demande le nom du fichier et sa destination. Ouvrez la liste « Où » et choisissez « Télécharger », sinon le fichier part sur Google Drive, qui est le choix par défaut.
Nommez enfin le fichier, puis validez par OK. Gardez la terminaison .drawio.png que draw.io ajoute : c’est elle qui signale que l’image transporte aussi le diagramme.
C’est ce fichier que vous rendrez : un PNG exporté avec la copie de son diagramme. Je vois votre arbre comme une image, et je peux l’ouvrir pour comprendre comment vous l’avez construit. Si la case n’est pas cochée, je ne récupère qu’une image morte.
Nommez-le NOM_Exercice.drawio.png, avec votre nom de famille en majuscules. Trente fichiers appelés « Diagramme sans nom » ne se corrigent pas.
Même chemin, autre format : Fichier > Exporter en tant que > XML. Ce fichier est la description de votre arbre, pas son image. C’est ce format que l’on s’échange pour travailler à plusieurs sur le même arbre.
Laissez les trois cases décochées, Compressé en particulier : un XML compressé devient une longue suite de caractères illisibles, alors que c’est justement sa lisibilité qui fait son intérêt.
La suite est identique au PNG : choisissez Télécharger dans la liste « Où », nommez le fichier, et validez. Il se terminera cette fois par .drawio.xml.
Tous les arbres de ce site sont récupérables. Sous chaque figure : Ouvrir affiche l’image dans un nouvel onglet, Télécharger l’enregistre, et Modifier l’affiche en grand avec un bouton pour passer à l’édition. Les images du site sont exportées avec leur copie, comme la vôtre : une fois téléchargées, elles se rouvrent dans draw.io.
Pour rouvrir un fichier, faites Fichier > Ouvrir depuis > Périphérique, puis choisissez votre .png exporté avec sa copie, ou n’importe quelle image téléchargée depuis ce site.
Une fois le fichier choisi, draw.io demande où l’afficher. Ouvrir dans cette fenêtre remplace le dessin en cours ; Ouvrir dans une nouvelle fenêtre garde les deux, à condition que votre navigateur autorise les pop-ups.
Si vous ouvrez dans cette fenêtre alors que le dessin en cours n’est pas enregistré, un dernier avertissement apparaît. Son bouton est mal nommé : Rejeter les changements ne rejette pas l’ouverture, c’est lui qui ouvre le fichier, en abandonnant ce qui est à l’écran. Pour garder votre dessin, prenez Annuler, exportez-le, et recommencez.
Ouvrir un arbre du cours est le moyen le plus rapide de comprendre comment il est construit. Ouvrez celui de la bibliothèque, déplacez ses boîtes, changez son texte : vous ne casserez rien, le site garde sa propre copie.
L’outil dessine, il ne relit pas. Il vous laissera sans broncher :
Les règles du cours restent donc entièrement à votre charge. Un arbre dessiné proprement à l’écran n’est pas un arbre juste.
Vous savez tout ce qu’il faut. La page suivante propose trois exercices pour s’en servir, du plus simple au plus complet.
