Faire un chronogramme dans draw.io — Dessiner avec des points et des traits, et là où l'ajout d'un Step casse tout
Dernière mise à jour: 2026-09-24 ／ Catégorie: Chronogrammes, comparaison des méthodes
Un chronogramme draw.io résiste mieux aux Steps ajoutés quand il est dessiné dans l'éditeur puis collé que quand il est dessiné avec des points et des traits. Ce guide s'adresse à ceux qui dessinent le schéma d'architecture dans draw.io et veulent le chronogramme dans le même fichier.
1. Si vous dessinez avec des points et des traits, réglez la grille sur la largeur du Step avant de poser les points
Un chronogramme dans draw.io est une combinaison de points, de traits et de rectangles, car draw.io (diagrams.net) n'a ni modèle ni formes pour aligner des signaux. Les instructions officielles pour les diagrammes de temps UML le construisent aussi à partir de petits points, de traits et de rectangles.
- Réglez la grille sur la largeur du Step La grille est à 10 par défaut ; fixez un Step à quatre carreaux (40). Les formes et les points de brisure des traits s'aimantent à la grille, donc les fronts des différentes lignes s'alignent. Ne maintenez pas Alt en déplaçant un front, sinon il quitte la grille.
- Dessinez les signaux BOOL comme des points reliés par des traits Posez un petit point (forme « waypoint ») à chaque front et reliez-les par des traits droits sans pointe de flèche. Un seul trait avec des points de brisure ajoutés a le même aspect, mais ses brisures de droite ne suivent pas quand on ajoute un Step (section 2) ; posez donc un point à chaque fois.
- Aboutez des hexagones pour les valeurs et les états Une valeur comme le numéro de pièce est un hexagone portant « 12 ». Là où la valeur change, aboutez-le contre l'hexagone suivant ; les pointes se rejoignent et le changement ressemble à un croisement (><).
- Tracez les relations de cause à effet par des flèches de point à point Du point où la demande de prise passe ON au point où « robot en cours » passe ON. Tirez depuis la flèche bleue qui apparaît au-dessus d'un point et relâchez sur le point suivant ; le trait s'y connecte. Une flèche connectée à un point suit ce point quand il bouge.
2. Les corrections et l'export font mal : les points de brisure ne suivent pas un Step ajouté
Un dessin draw.io ne contient que des positions de points ; il ne sait rien des Steps ni des relations entre signaux. Chaque « retarde la prise terminée d'un Step » se traduit par des points et des brisures à déplacer un par un.
- Les brisures d'un trait unique ne suivent pas un Step ajouté — Ajouter un Step, c'est un glisser qui ouvre un espace. Tirez vers la droite en maintenant Alt, Ctrl et Shift, et seules les formes en bas à droite du clic se déplacent. Une forme d'onde faite de points déplace ses points de droite, mais une forme d'onde faite d'un seul trait commence à gauche et ne bouge pas.
- Les signaux qui changent au même Step se déplacent un par un — Le dessin n'a aucune notion de « change au même Step ». Retardez le ON de la prise terminée d'un Step, et vous déplacez aussi le point où « robot en cours » passe OFF à ce Step, puis les points de la demande de prise OFF et de la prise terminée OFF qui suivent. Les flèches connectées aux points suivent, mais le dessin ne dit rien d'un point oublié.
- Les valeurs ne se relisent pas depuis le dessin — Sélectionnez un point : l'onglet Disposition ne montre que des coordonnées. Savoir si la prise terminée passe ON au Step 6 ou 7 demande de recalculer depuis ce nombre ou de compter les carreaux. On peut générer formes et traits depuis un CSV, mais pas les brisures, et les corrections faites dans le dessin ne reviennent jamais dans le CSV.
- Le texte du SVG se dégrade dans d'autres applications — draw.io écrit par défaut le texte du SVG en HTML, et les applications qui ne savent pas l'afficher le remplacent par un substitut grossier. Pour une spécification, cochez « Convertir les étiquettes en SVG » dans l'onglet Texte, ou passez en PNG dans les versions de draw.io qui n'ont pas cette option.
3. Les chronogrammes souvent modifiés : dessinez-les dans l'éditeur et collez-les dans draw.io
Ces chronogrammes se dessinent dans le Timing Chart Editor et se collent dans draw.io. L'export est à sens unique : un chronogramme modifié dans draw.io ne se recharge pas dans l'éditeur. Côté draw.io, on n'ajoute que des annotations et des cadres. L'éditeur avec le chronogramme ci-dessus déjà ouvert (s'ouvre dans un nouvel onglet) permet d'essayer telles quelles les étapes 2 à 4 ci-dessous.
- Alignez les signaux S'ils sont déjà affectés, envoyez nWorkNo et bPickReq depuis l'Address Map Editor avec son « Vers le chronogramme → ». Sinon, collez la liste des signaux dans « Importer… » de la liste des variables à gauche.
- Remplissez les formes d'onde et tracez les flèches Dans les lignes BOOL, tirez latéralement pour peindre le ON ; dans les lignes numériques, double-cliquez pour écrire la valeur. Appuyez sur « Flèche » dans la barre d'outils et tirez du front où le numéro de pièce apparaît au front où la demande de prise passe ON. Les flèches sont mémorisées par numéro de Step, donc l'insertion d'un Step décale ensemble les formes d'onde et les flèches qui suivent.
- Collez dans draw.io Choisissez Draw.io dans l'export, copiez, et collez dans une nouvelle page avec Ctrl+V. Si le XML arrive en texte brut, supprimez-le et ouvrez Extras → Modifier le diagramme… ; sélectionnez le contenu avec Ctrl+A, collez, puis Appliquer.
- Groupez le chronogramme collé et ajoutez des annotations Groupez-le avec Ctrl+G juste après le collage : le remplacer plus tard se résume à une suppression. Les formes collées sont sur la grille (10), donc les textes et cadres aimantés à la grille s'alignent sur les fronts. Les formes d'onde et les flèches ne sont pas connectées : déplacer un front dans draw.io laisse la flèche sur place.
4. Un chronogramme corrigé dans draw.io : reportez la même correction dans le JSON et réexportez
Une forme d'onde corrigée dans draw.io est refaite dans le JSON de l'éditeur avant de remplacer le chronogramme. Remettez le .drawio au roboticien, et il peut revenir avec des formes d'onde corrigées dans draw.io ; cette correction n'est pas dans le JSON, donc le prochain export l'efface. Enregistrez le JSON avec Ctrl+S et gardez-le à côté du .drawio sous le même nom (structure des données JSON).
L'outil utilisé pour la figure de cet article
La figure de cet article a été dessinée dans le Timing Chart Editor et exportée en SVG.
- Timing Chart Editor — Alignez les signaux, peignez les plages ON, tracez les flèches de cause à effet. Choisissez Draw.io comme format d'export pour obtenir un diagramme qui se colle dans draw.io.
Ni installation ni inscription : il fonctionne dans le navigateur.
Articles connexes
yk.builds