draw-io

Présentation du skill draw-io

Le skill draw-io propose un workflow ciblé pour créer, modifier et relire des diagrammes .drawio en XML, puis les exporter en .drawio.png pour la documentation ou des slides. Il convient particulièrement aux développeurs, rédacteurs techniques, architectes solution et utilisateurs d’IA qui ont besoin de mises à jour de diagrammes répétables, sans devoir passer manuellement par l’interface draw.io.

Les points forts du skill draw-io

Ce draw-io skill est particulièrement efficace quand vous devez :

• modifier des fichiers .drawio existants de façon sûre
• faire des ajustements de mise en page précis en modifiant les coordonnées XML
• appliquer des standards de diagramme, par exemple les réglages de police
• générer des PNG transparents en haute résolution
• utiliser les icônes d’architecture AWS avec les bons identifiants mxgraph.aws4.*

Le vrai besoin auquel il répond

La plupart des utilisateurs n’ont pas besoin de « génération de diagrammes » au sens abstrait. Ils ont besoin d’un agent capable de mettre à jour des schémas d’architecture de manière fiable, de garder un style cohérent et de produire des assets exportables qui s’intègrent dans une chaîne documentaire. draw-io est utile parce qu’il transforme cela en workflow concret, au lieu de rester au niveau d’un prompt vague.

Ce qui distingue draw-io d’un prompt générique

Un prompt classique peut proposer une idée de diagramme. Ce skill ajoute des règles de fonctionnement concrètes :

• modifier le XML .drawio, pas le .drawio.png généré
• exporter les PNG avec des paramètres CLI connus
• appliquer des réglages explicites de font-family pour la compatibilité avec les slides
• suivre des consignes de mise en page sur les regroupements, le sens de lecture et la lisibilité
• rechercher les icônes AWS dans une référence locale plutôt que deviner les noms d’icônes

Qui a intérêt à l’installer

Installez draw-io si vous travaillez déjà avec des fichiers draw.io dans Git, si vous générez de la documentation ou des slides à partir des sources, ou si vous devez mettre à jour des diagrammes d’architecture de manière programmatique. Si vous voulez seulement faire un brainstorming visuel ponctuel dans une interface graphique, c’est probablement plus structuré que nécessaire.

Comment utiliser le skill draw-io

Installer le skill draw-io

Utilisez votre gestionnaire de skills pour l’ajouter depuis le dépôt :

npx skills add softaworks/agent-toolkit --skill draw-io

Si votre environnement utilise un autre installateur, l’élément important reste le chemin du skill skills/draw-io dans softaworks/agent-toolkit.

Vérifier les prérequis locaux

Avant de vous reposer sur draw-io install, vérifiez que votre environnement dispose de :

• un CLI drawio disponible pour l’export
• bash pour le script de conversion
• git si vous voulez que les PNG générés soient ajoutés automatiquement au staging
• éventuellement mise et pre-commit si votre dépôt s’appuie sur ce workflow

Le script de conversion fourni appelle :

drawio -x -f png -s 2 -t -o output.drawio.png input.drawio

Cela correspond à un export, au format PNG, avec une échelle 2x, un fond transparent et un chemin de sortie explicite.

Lire ces fichiers en priorité

Pour une prise en main rapide, consultez-les dans cet ordre :

1. skills/draw-io/SKILL.md
2. skills/draw-io/README.md
3. skills/draw-io/references/layout-guidelines.md
4. skills/draw-io/references/aws-icons.md
5. skills/draw-io/scripts/convert-drawio-to-png.sh
6. skills/draw-io/scripts/find_aws_icon.py

Cet ordre compte, car le skill est davantage opérationnel que conceptuel : l’essentiel de sa valeur est dans les règles, les conventions de mise en page et les scripts utilitaires.

Comprendre d’abord la règle de fonctionnement principale

La contrainte d’usage la plus importante est simple :

• modifiez les fichiers .drawio
• ne modifiez pas directement les fichiers .drawio.png

Le PNG est traité comme un artefact généré. Si votre dépôt suit à la fois la source et l’export, votre agent doit modifier la source XML puis régénérer le PNG ensuite.

Les entrées dont le skill a besoin

La qualité d’utilisation de draw-io dépend fortement des informations que vous fournissez. Les bonnes entrées incluent généralement :

• le chemin du fichier cible
• s’il s’agit d’une création ou d’une modification
• le type de diagramme : architecture, flowchart, flux de type séquentiel, etc.
• le sens de lecture visé : de gauche à droite ou de haut en bas
• les services, nœuds, labels et connexions requis
• les contraintes liées aux slides ou à la documentation
• si les icônes officielles AWS sont requises
• si l’export PNG est nécessaire immédiatement

Sans ces précisions, l’agent est obligé de deviner la structure, l’espacement et le nommage.

Transformer un objectif vague en prompt draw-io efficace

Prompt faible :

« Update our AWS diagram. »

Meilleur prompt :

« Edit assets/system.drawio. Add Amazon S3 on the left as the ingestion source, route data to AWS Lambda, then to Amazon RDS. Keep a left-to-right flow. Preserve existing group structure. Use official AWS icons, avoid crossing arrows, and regenerate assets/system.drawio.png. »

Pourquoi cela fonctionne mieux :

• le fichier est nommé
• les composants à ajouter sont précisés
• le sens du flux est défini
• la fidélité des icônes est demandée
• un objectif de mise en page est indiqué
• l’artefact d’export est demandé

Utiliser draw-io pour des modifications précises, pas seulement pour générer

Ce skill est particulièrement utile quand vous avez déjà un diagramme et que vous devez faire des ajustements ciblés, par exemple :

• déplacer un cluster pour éviter que des lignes se chevauchent
• aligner horizontalement des blocs de services
• remplacer un label générique par un nom officiel de service AWS
• changer les polices pour assurer la compatibilité avec des slides
• régénérer le PNG après modification du XML

C’est dans ce type de cas que la modification directe du XML est souvent plus rapide et plus reproductible qu’un travail manuel dans l’interface.

Respecter les réglages de police si les slides comptent

Si le diagramme est utilisé dans des slides Quarto ou dans des environnements sujets à des problèmes de rendu des polices, le skill recommande de définir :

• defaultFontFamily sur mxGraphModel
• fontFamily sur les éléments de texte individuels

Le dépôt cite explicitement Noto Sans JP comme police recommandée pour le support du japonais. Même si vous n’avez pas besoin du japonais, la leçon plus générale reste importante : indiquez explicitement les polices dès que vous avez besoin d’un rendu cohérent entre machines et étapes d’export.

Choisir les chemins de conversion adaptés à votre dépôt

Le skill prend en charge plusieurs façons d’exporter les PNG :

• tous les fichiers via pre-commit : mise exec -- pre-commit run --all-files
• un seul fichier via pre-commit : mise exec -- pre-commit run convert-drawio-to-png --files assets/my-diagram.drawio
• utilisation directe du script : bash ~/.claude/skills/draw-io/scripts/convert-drawio-to-png.sh assets/diagram1.drawio

Choisissez selon le workflow de votre dépôt. Si votre projet utilise déjà pre-commit, prenez cette voie. Si vous avez juste besoin d’un export local ponctuel, le script est le chemin le plus rapide.

Utiliser la référence d’icônes AWS au lieu de deviner

Si vous utilisez draw-io for Design Implementation sur des diagrammes fortement orientés AWS, la référence d’icônes est l’une des parties les plus précieuses du skill. Elle documente :

• les noms de services officiels comme Amazon ECS et AWS Lambda
• les conventions actuelles de style d’icônes basées sur mxgraph.aws4.*
• les schémas d’icônes de ressources et de produits

Le script utilitaire inclus permet de rechercher dans cette référence :

python ~/.claude/skills/draw-io/scripts/find_aws_icon.py lambda

C’est bien plus sûr que d’inventer des noms resIcon de mémoire.

Appliquer volontairement les consignes de mise en page

Les recommandations de mise en page du dépôt ne sont pas là pour faire joli. Elles fournissent des réglages par défaut très concrets qui améliorent la qualité du rendu :

• regrouper clairement les frontières cloud et les subnets
• garder le flux principal de gauche à droite quand c’est possible
• utiliser des styles de lignes différents selon le type de flux
• garder les éléments liés proches les uns des autres
• réduire les croisements de flèches
• laisser suffisamment d’espace blanc pour la lisibilité

Si vous voulez un premier résultat utile, indiquez à l’agent quels principes comptent le plus pour votre diagramme.

FAQ du skill draw-io

Le skill draw-io convient-il aux débutants ?

Oui, si vous avez déjà des fichiers draw.io et souhaitez être aidé pour les modifier. Le skill réduit les approximations grâce à des règles et des scripts concrets. Il convient moins à un débutant complet qui veut seulement découvrir les concepts de diagramme sans workflow basé sur des fichiers.

Quand draw-io est-il préférable à un prompt IA classique ?

draw-io est préférable quand vous avez besoin de modifications reproductibles, d’une bonne gestion des fichiers, d’étapes d’export ou d’une utilisation correcte des icônes AWS. Un prompt classique peut bien décrire un diagramme, mais il n’imposera généralement ni l’édition de la source .drawio, ni les commandes d’export, ni les réglages de police, ni l’usage des scripts utilitaires.

Draw-io nécessite-t-il l’interface graphique draw.io ?

Pas forcément. Le skill est conçu autour de l’édition des fichiers source et de l’export PNG via CLI. Cela le rend utile dans des workflows centrés sur le code, avec des diffs relisibles et des pipelines documentaires.

Quand ne faut-il pas utiliser draw-io ?

Évitez ce draw-io guide si vous avez besoin de :

• whiteboarding libre
• maquettes design soignées en dehors de draw.io
• édition purement visuelle dans une interface graphique
• génération de diagrammes pour des formats sans rapport avec .drawio

Ce skill est spécialisé autour du XML draw.io et des opérations d’export, pas autour du design graphique au sens large.

Draw-io peut-il aider pour des diagrammes d’architecture AWS ?

Oui. C’est même l’un de ses points forts les plus nets. La référence d’icônes AWS et le script de recherche vous aident à utiliser les noms officiels et les icônes mxgraph.aws4.*, ce qui est précieux quand la cohérence et la reconnaissance visuelle comptent.

Draw-io corrige-t-il automatiquement une mauvaise mise en page ?

Pas automatiquement au sens magique du terme. Le skill fournit une méthode pour ajuster volontairement les coordonnées et la mise en page. Les résultats sont meilleurs quand vous donnez une intention de placement claire, par exemple sur les regroupements, le sens du flux, l’espacement et les priorités de chevauchement.

Comment améliorer le skill draw-io

Donner au skill draw-io des entrées structurelles plus solides

Le moyen le plus rapide d’améliorer l’usage de draw-io est d’apporter de la structure, pas des adjectifs. Au lieu de dire « rends-le plus propre », dites :

• place la base de données sous la couche applicative
• garde toutes les sources d’ingestion dans la colonne de gauche
• fais en sorte que les flèches ne se croisent pas si possible
• regroupe séparément les ressources des subnets publics et privés
• garde des labels assez courts pour éviter d’agrandir les blocs

Ce type d’instruction se traduit directement en décisions XML et de mise en page.

Partir d’un diagramme existant quand c’est possible

Le skill donne de meilleurs résultats quand il peut modifier un fichier .drawio existant au lieu de tout inventer à partir de zéro. Les fichiers existants lui fournissent :

• les IDs actuels des éléments
• des schémas de mise en page
• des conventions de style
• la structure de regroupement
• les cibles d’export connues

Pour les équipes, cela produit généralement des résultats plus fiables que de demander un diagramme entièrement nouveau à chaque fois.

Être explicite sur le nommage et la fidélité des icônes

Un mode d’échec fréquent vient d’un nommage vague des services, comme « ECS » ou « Lambda », sans décider si les labels doivent reprendre les noms complets officiels des services. Si les diagrammes AWS sont importants, précisez les deux :

• labels affichés : Amazon ECS, AWS Lambda, Amazon RDS
• exigence d’icônes : utiliser les icônes de service officielles mxgraph.aws4.*

Cela évite les styles de nommage mélangés et les mauvais mappings d’icônes.

Demander modification puis export dans un seul workflow

Si vous voulez des sorties réellement exploitables, demandez à la fois la modification de la source et l’étape d’export dans une seule instruction. Exemple :

« Update docs/arch.drawio, then regenerate docs/arch.drawio.png with the skill’s standard PNG export settings. »

Cela réduit un écart fréquent : le XML est bien modifié, mais l’artefact de prévisualisation reste obsolète.

Surveiller les principaux modes d’échec

Les problèmes courants avec draw-io sont généralement pratiques, pas conceptuels :

• modifier le PNG au lieu du .drawio
• oublier les réglages de police et obtenir un rendu de texte incohérent
• utiliser des identifiants d’icônes AWS devinés
• trop tasser les nœuds au point que les labels se chevauchent
• créer des connecteurs croisés qui nuisent à la lisibilité
• faire évoluer la mise en page sans préserver le flux d’ensemble

Vous pouvez éviter la plupart de ces problèmes en mentionnant directement les scripts et guides fournis dans votre prompt.

Itérer par petites modifications faciles à relire

Pour des diagrammes complexes, ne demandez pas tout d’un coup. Une meilleure approche consiste à :

1. ajuster la structure et les regroupements
2. relire l’espacement et les connecteurs
3. corriger les labels et les polices
4. exporter le PNG
5. faire une dernière passe de lisibilité

Cela produit des diffs plus propres et facilite l’identification de l’origine d’un problème de mise en page : regroupement, choix d’icône ou taille du texte.

Orienter l’agent vers les utilitaires du dépôt par leur nom

Si votre agent prend en charge les prompts conscients des fichiers, mentionnez les références exactes :

• references/layout-guidelines.md pour l’espacement et le flux
• references/aws-icons.md pour le nommage AWS et les icônes
• scripts/find_aws_icon.py pour la recherche d’icônes
• scripts/convert-drawio-to-png.sh pour l’export

Cette petite étape améliore souvent la qualité du premier résultat, car l’agent s’appuie alors sur les conventions du dépôt plutôt que sur des conseils génériques de diagrammation.