Dans les termes du Skill
Un skill pour créer, éditer et valider des fichiers de diagramme draw.io (.drawio, .drawio.svg, .drawio.png) en générant du XML mxGraph correct. Il gère les organigrammes, l'architecture système, les diagrammes de séquence, les diagrammes ER et les diagrammes de classes UML via des modèles dans assets/templates/, tandis que les topologies réseau, le BPMN et les cartes mentales relèvent des bibliothèques de formes ou d'un travail manuel.
L'agent dispose d'un workflow en six étapes, d'une palette de couleurs sémantique avec des chaînes de style prêtes à l'emploi, d'une checklist de validation avant livraison et de scripts Python facultatifs (validate-drawio.py, add-shape.py). Il est destiné aux agents travaillant dans un dépôt où les diagrammes côtoient le code qu'ils documentent, et les fichiers générés sont censés s'ouvrir immédiatement dans l'extension VS Code hediet.vscode-drawio.
Ce qu'il produit
- Le fichier .drawio lui-même, écrit au chemin que vous avez demandé.
- Un résumé en une phrase de ce que montre le diagramme.
- Le statut de validation, indiquant si le script de validation a été exécuté et s'il a réussi.
- Des instructions d'édition lorsque vous êtes susceptible de personnaliser le diagramme : cliquer sur une forme pour la sélectionner, double-cliquer pour éditer l'étiquette, faire glisser pour repositionner.
Fonctionnement
- 01Cerner la demande
Le workflow commence par établir le type de diagramme, les entités ou acteurs, les relations, le chemin de sortie et s'il s'agit d'un nouveau fichier ou d'une édition.
- 02Réutiliser un modèle ou le squelette minimal
Lorsque le type de diagramme correspond à l'un de ceux d'assets/templates/, copier cette structure et remplacer les valeurs d'espace réservé ; pour des mises en page inédites, partir du squelette mxfile minimal valide avec les deux cellules racines.
- 03Planifier la mise en page avant d'écrire le XML
Esquissez d'abord les rangées ou niveaux, puis espacez les formes sur la grille — 40-60px horizontalement entre les formes d'une même rangée, 80-120px entre les niveaux, sur un canevas A4 paysage par défaut de 1169 x 827 px.
- 04Générer le XML mxGraph
Écrivez les cellules de sommets et d'arêtes avec des ids uniques et des références de parent correspondantes, et échappez les caractères XML spéciaux dans les libellés pour que le fichier reste bien formé.
- 05Appliquer les Styles de la Palette
Les chaînes de style proviennent d'une palette sémantique fixe — primaire/info #dae8fc avec #6c8ebf, avertissement/décision #fff2cc avec #d6b656, erreur/fin #f8cecc avec #b85450 — afin que le même usage garde la même couleur dans un projet.
- 06Enregistrer, Valider, Transmettre
Écrivez le fichier au chemin demandé avec une extension .drawio, exécutez éventuellement le validateur, puis indiquez à l'utilisateur comment l'ouvrir et résumez ce que contient le diagramme.