xiaopixuan/drawio-diagram-skill

Compétence Diagramme Draw.io

Présentation

Génère des fichiers XML .drawio et les exporte en PNG/SVG/PDF/JPG localement à l'aide de l'interface en ligne de commande de l'application de bureau draw.io native.

Formats pris en charge : PNG, SVG, PDF, JPG — aucune automatisation de navigateur nécessaire.

Les exportations PNG, SVG et PDF prennent en charge --embed-diagram (-e) — le fichier exporté contient l'intégralité du XML du diagramme, de sorte qu'en l'ouvrant dans draw.io, le diagramme modifiable est récupéré. Utilisez des doubles extensions (nom.drawio.png) pour signaler le XML intégré.

Notes d'installation pour le partage

Lorsque vous partagez cette compétence avec un autre utilisateur, incluez le dossier complet drawio-diagram-skill/, pas seulement SKILL.md, car les scripts/, references/, styles et assistants groupés font partie du flux de travail.

Cette compétence nécessite draw.io Desktop pour l'exportation locale PNG/SVG/PDF. L'application web diagrams.net seule ne suffit pas pour l'exportation locale en ligne de commande.

Installation recommandée :

brew install --cask drawio
drawio --version

Si Homebrew ou les téléchargements en ligne de commande sont lents, téléchargez draw.io Desktop manuellement depuis GitHub Releases :

https://github.com/jgraph/drawio-desktop/releases

Choisissez l'installateur pour votre système d'exploitation :

• macOS : .dmg
• Windows : .exe
• Linux : .deb ou .rpm (évitez snap dans la mesure du possible)

Après installation, vérifiez l'interface en ligne de commande :

drawio --version

Sur macOS, si drawio n'est pas dans le PATH, essayez :

/Applications/draw.io.app/Contents/MacOS/draw.io --version

Graphviz est optionnel et n'est nécessaire que pour certains flux de travail de mise en page automatique :

brew install graphviz

Si l'interface en ligne de commande draw.io est indisponible ou plante dans un environnement cloisonné, cette compétence peut toujours produire du XML .drawio et des liens d'édition diagrams.net, mais l'exportation locale d'images/PDF peut devoir être effectuée en dehors du cloisonnement.

Invite utilisateur draw.io manquant

Lorsque les vérifications de dépendances montrent que draw.io Desktop n'est pas installé ou que la commande drawio / draw.io est introuvable, ne dites pas seulement "exportation indisponible". Dites clairement à l'utilisateur :

Vous n'avez pas draw.io Desktop installé, ou l'environnement actuel ne trouve pas la commande drawio. Je peux envoyer une commande d'installation à votre Agent pour l'installer, ou vous pouvez l'installer manuellement.

Proposez ensuite ces choix :

• Commande d'installation par l'Agent : brew install --cask drawio sur macOS.
• Installation manuelle : téléchargez draw.io Desktop depuis https://github.com/jgraph/drawio-desktop/releases, puis installez le .dmg, .exe, .deb, ou .rpm pour le système d'exploitation de l'utilisateur.
• Continuer sans exportation : générez le XML .drawio et un lien d'édition diagrams.net, puis laissez l'utilisateur exporter en PNG/SVG/PDF après avoir installé draw.io.

Sortie attendue

Retournez le chemin source .drawio enregistré et chaque chemin d'artefact exporté. Lorsque l'exportation est indisponible, retournez le chemin du fichier XML .drawio plus le repli spécifique utilisé. Pour les examens destinés à l'utilisateur, incluez une brève note sur le type de diagramme, les choix de mise en page clés, et toute limitation d'exportation ou de validation.

Quand utiliser / quand NE PAS utiliser

Utilisez cette compétence pour : des diagrammes soignés et précis (architecture, réseau, UML strict, ERD), tout ce qui nécessite des remplis opaques solides, 10 000+ formes de stock / de marque, des couloirs de natation, ou une géométrie personnalisée, exportés sous forme de PNG/SVG/PDF modifiables.

NE l'utilisez PAS — orientez ailleurs — pour :

• Un aspect dessiné à la main / tableau blanc décontracté → excalidraw ou tldraw.
• Des diagrammes sous forme de code qui vivent dans git / s'affichent dans Markdown → mermaid (général) ou plantuml (UML).
• Des croquis libres sur toile infinie ou des traits à main levée → tldraw.

Diagrammes de type Rapport / Exécutif

Utilisez ce mode lorsque l'utilisateur demande 汇报型流程架构图, 方案图, 管理闭环图, 领导汇报图, ou tout diagramme qui explique l'organisation / les rôles / les mécanismes plutôt qu'un système littéral ou un flux de données.

Règles :

• Traitez le diagramme comme un récit en sections, pas comme un simple organigramme.
• Planifiez 2 à 4 bandes horizontales avant de dessiner, telles que résumé, flux de rôles, base partagée, et mécanismes.
• Utilisez des tailles de cartes uniformes au sein de chaque bande ; alignez les positions x/y des cartes et maintenez un espacement cohérent.
• Séparez le titre de la carte, la description, les puces et le texte des puces dans des cellules alignées au lieu d'un grand paragraphe.
• Réservez des couloirs de flèches explicites entre les lignes et les colonnes avant de placer les cartes.
• Acheminez les flèches entre les lignes à travers la bande vide entre les lignes, avec des points de passage qui maintiennent les lignes à l'écart des étiquettes et du contenu des cartes.
• Validez la hiérarchie visuelle avant l'exportation : titre de la page > titre de la section > titre de la carte > corps > puce.
• Préférez un style de rapport sobre : remplis propres, marqueurs de section clairs, texte grand et lisible, et pas d'encombrement décoratif.

Ressources groupées

Lorsque le flux de travail en référence une, lisez-la à la demande — aucune d'entre elles n'a besoin d'être en contexte au départ.

Fichier	Lisez-le quand
references/toolbox.md	Vous n'êtes pas sûr de quel script groupé correspond à une demande, ou souhaitez en enchaîner plusieurs — une carte de tous les 31 scripts regroupés par cas d'utilisation (auteur / import de code / import IaC / import de spécification API / infrastructure en direct / comparer / annoter / exporter inversé / utilitaires) avec un guide "J'ai X, je veux Y → utilisez Z"
references/xml-authoring.md	Vous êtes sur le point d'écrire à la main du XML .drawio (étape 3 du flux de travail) — squelette de fichier, cellules de forme/arête, conteneurs, distribution de connexions, palette, règles d'espacement/grille. Non nécessaire lorsqu'un générateur groupé écrit le XML
references/mermaid-authoring.md	Le diagramme est un type standard sans besoins de style/icône personnalisé (organigramme, état, gantt, mindmap, timeline, parcours, camembert, …) et l'interface en ligne de commande est ≥ v30 — rédigez-le sous forme de texte Mermaid et laissez l'interface en ligne de commande le convertir en .drawio natif (structure uniquement, mise en page libre). Documente également le passage --layout ELK de l'interface en ligne de commande pour le XML
references/diagram-types.md	L'utilisateur nomme un type de diagramme spécifique (ERD, classe UML, séquence, C4, architecture, ML/DL, organigramme, SysML, BPMN, topologie réseau, couloir de natation)
references/shapes.md + scripts/shapesearch.py	Le diagramme nécessite une forme spécifique — une icône de cloud (AWS/Azure/GCP), un symbole Cisco/Kubernetes/réseau, un élément UML/BPMN/ER/électrique/P&ID — ou chaque fois que vous devineriez autrement une chaîne style=. shapesearch.py "<mots-clés>" renvoie le style officiel exact pour plus de 10 000 formes
scripts/aiicons.py	Le diagramme implique une marque IA/LLM (OpenAI, Claude, Gemini, Mistral, Llama, HuggingFace, Ollama, LangChain, …) — aiicons.py "<marque>" renvoie un style image draw.io pour le logo de la marque (lobe-icons via CDN ; --embed pour intégrer). draw.io n'a pas de logos IA intégrés. Voir references/shapes.md → "Logos de marque IA / LLM"
references/style-presets.md	L'utilisateur demande à apprendre / sauvegarder / lister / définir par défaut / supprimer un préréglage de style, ou vous avez résolu un préréglage actif et avez besoin des règles d'application
references/style-extraction.md	Vous êtes dans le flux d'apprentissage et avez besoin de la procédure d'extraction (appelée depuis style-presets.md)
references/troubleshooting.md	Une exportation échoue, la vision rejette un PNG, ou un rendu semble incorrect
scripts/repair_png.py	Après chaque exportation PNG -e — corrige le morceau IEND tronqué de draw.io (problème #8)
scripts/encode_drawio_url.py	L'interface en ligne de commande est indisponible et vous avez besoin d'une URL diagrams.net de repli pour navigateur (--edit pour une URL d'éditeur modifiable)
references/autolayout.md	Le diagramme est volumineux ou lourd en mise en page (graphe de dépendances/appels, structure de code, >~15 nœuds) et vous souhaitez que Graphviz place les nœuds + route les arêtes au lieu de placer manuellement les coordonnées
scripts/pyimports.py · jsimports.py · goimports.py · rustimports.py	L'utilisateur souhaite visualiser une structure de projet Python, JS/TS, Go ou Rust — extrait le graphe d'importations (transitivement réduit, conteneurs --group optionnels, imbriqué par sous-paquet) pour une mise en page automatique
scripts/pyclasses.py	L'utilisateur veut un diagramme de hiérarchie/classe Python — extrait les classes + arêtes d'héritage (encadré par module avec --group) pour une mise en page automatique
scripts/tfimports.py · k8simports.py · composeimports.py	L'utilisateur veut visualiser l'infrastructure déclarée (Terraform .tf, Kubernetes manifests, ou docker-compose) — extrait le graphe de référence des ressources/services (icônes officielles AWS/Azure/GCP/K8s pour tf/k8s ; boîtes de service + cylindres de volume pour compose) pour une mise en page automatique
scripts/tfstate.py · dockerimports.py (+ k8simports.py)	L'utilisateur veut dessiner ce qui EST RÉELLEMENT en cours d'exécution / déployé — pipe terraform show -json (état déployé), docker inspect $(docker ps -q) (conteneurs en direct), ou kubectl get all,ing,cm,secret,pvc -o json (cluster en direct, via k8simports) et obtenez la topologie réelle avec les mêmes icônes officielles. Voir references/live-infra.md
scripts/drawiodiff.py	L'utilisateur veut comparer / différencier deux diagrammes ou deux instantanés ("ce qui a changé", dérive d'infrastructure) — drawiodiff.py old.drawio new.drawio -o diff.json émet un graphe colorisé (ajouté=vert, supprimé=rouge, changé=orange, identique=gris) pour une mise en page automatique. Correspond par identifiant de cellule (sortie d'importateur/instantané en direct) ou --by-label (dessiné à la main)
scripts/timelapse.py	L'utilisateur veut un time-lapse d'architecture / voir comment la structure d'une base de code a évolué au fil de l'historique git — timelapse.py <rép> --importer pyimports réexécute un importateur à chaque commit échantillonné et assemble un lecteur HTML autonome (images intégrées, contrôles de lecture/pas). Meilleur sur un paquet avec de vraies arêtes d'importation (pointez <rép> vers la racine du module)
scripts/explain.py	L'utilisateur veut décrire / documenter / résumer un .drawio existant en mots (l'inverse d'en générer un) — explain.py diagram.drawio émet du Markdown structuré : composants groupés par conteneur/niveau, relations (A —étiquette→ B), sections par page pour les diagrammes multi-page/C4. Bon pour un résumé de README/PR ou une lecture textuelle uniquement
scripts/drawio2pptx.py	L'utilisateur veut un diaporama PowerPoint / des diapositives à partir d'un diagramme — drawio2pptx.py diagram.drawio -o deck.pptx place chaque page sur sa propre diapositive 16:9 (nom de la page comme titre), de sorte qu'un modèle C4 multi-page devienne un diaporama prêt à présenter. Nécessite python-pptx (pip install python-pptx) + l'interface en ligne de commande draw.io
scripts/drawiohtml.py	L'utilisateur veut une visionneuse interactive partageable pour un diagramme (panoramique / zoom / recherche, sans draw.io nécessaire) — drawiohtml.py diagram.drawio -o viewer.html intègre le SVG de chaque page dans UN SEUL fichier HTML autonome avec onglets de page, panoramique par glisser, zoom par molette, recherche de nœud (Enter fait défiler et centre les correspondances) et liens de drill-down fonctionnels (les liens data:page/id d'un modèle C4 changent d'onglet). Pas de serveur, pas de requêtes externes — envoyez le fichier à n'importe qui
scripts/svgflow.py	L'utilisateur veut un diagramme animé / "fluide" (flux de données, arêtes en mouvement) — svgflow.py diagram.drawio -o flow.svg exporte en SVG et transforme chaque arête en une animation de fourmis en marche (les tirets se déplacent le long des flèches). .svg en boucle autonome qui s'affiche sur GitHub / tout navigateur ; --speed / --dash / --reverse
scripts/drawio2mermaid.py	L'utilisateur veut convertir un .drawio en texte Mermaid (diagrammes sous forme de code pour un fichier Markdown que GitHub rend) — drawio2mermaid.py diagram.drawio émet un flowchart (conteneurs → subgraphs, étiquettes d'arêtes conservées, formes cylindre/rhombe mappées) ; --fenced encapsule dans ```mermaid, multi-page → un graphe par page. Structurel uniquement (le style/les icônes ne survivent pas)
scripts/sqlerd.py	L'utilisateur veut un diagramme ER à partir de DDL SQL — analyse les instructions CREATE TABLE en nœuds par table (colonnes avec marqueurs PK/FK) et arêtes FK en patte d'oie pour une mise en page automatique
scripts/ciimports.py	L'utilisateur veut un diagramme de pipeline CI (workflows GitHub Actions ou GitLab CI) — ciimports.py <racine-du-dépôt> lit .github/workflows/*.yml + .gitlab-ci.yml et émet des jobs (runner, taille de matrice, appels de workflow réutilisable), arêtes de dépendance needs:, nœuds de déclencheur par workflow, et conteneurs d'étape/workflow pour une mise en page automatique. Nécessite PyYAML
scripts/openapiimports.py	L'utilisateur veut un diagramme API à partir d'une spécification OpenAPI / Swagger — openapiimports.py spec.yaml mappe chaque opération à un nœud coloré par méthode HTTP (GET bleu, POST vert, PUT/PATCH orange, DELETE rouge) plus un nœud par schéma de composant, avec des arêtes des opérations vers les schémas qu'elles utilisent et entre schémas imbriqués. --group encadre par balise, --no-schemas montre uniquement la surface des points de terminaison ; alimente la mise en page automatique
scripts/heatmap.py	L'utilisateur veut colorer un .drawio existant par des données (une carte de chaleur de coût / latence / trafic / taux d'erreur) — heatmap.py diagram.drawio -m metrics.csv fait correspondre chaque métrique (CSV key,value ou JSON {key:value}) à un nœud par identifiant ou étiquette et le recolore le long d'un dégradé (--palette heat|cool|warm, --reverse), en redimensionnant éventuellement la taille du nœud (--size) et en ajoutant une légende. Post-traite tout diagramme ; exportez comme d'habitude
scripts/seqlayout.py	L'utilisateur veut un diagramme de séquence — décrivez les participants + messages comme JSON et le script calcule toute la géométrie des lignes de vie/activations/flèches de manière déterministe (pas de coordonnées placées à la main, pas besoin de Graphviz)
scripts/c4.py	L'utilisateur veut un modèle C4 (Contexte système / Conteneur / Composant) — niveaux JSON en entrée, un fichier .drawio multi-page en sortie avec les formes/couleurs C4 officielles et des liens click-to-drill-down entre les niveaux
scripts/relabel.py	L'utilisateur veut une variante linguistique ou un échange de texte en masse d'un .drawio existant (par exemple, un diagramme EN réétiqueté en chinois pour un README bilingue) — relabel.py diagram.drawio --extract -o labels.json vide chaque étiquette comme une carte JSON d'identité ; traduisez les valeurs (conservez les clés), puis relabel.py diagram.drawio --map labels.json -o diagram_cn.drawio les échange sans toucher à la mise en page, aux styles ni aux identifiants
scripts/restyle.py	L'utilisateur veut re-thématiser un .drawio EXISTANT ("mets ça en sombre", "applique mon style d'entreprise à ce diagramme") — restyle.py diagram.drawio --preset <nom> remappe chaque remplissage/trait de sommet à la palette de préréglage par teinte, applique la police/les extras (couleur de police sombre, couleur d'arête, fond), et laisse la mise en page, les formes et le routage des arêtes intacts. Les préréglages se résolvent comme à l'étape 0 (répertoire utilisateur, puis intégrés)
scripts/validate.py	Vous avez généré un .drawio (surtout via la mise en page automatique ou pour un grand diagramme placé à la main) et souhaitez un lint structurel déterministe rapide (arêtes pendantes, identifiants en double/réservés, parents cassés, chevauchements) avant l'exportation — validate.py diagram.drawio signale les problèmes sous forme de messages structurés (niveau, chemin de cellule, description) et quitte avec un code 1 en cas de problèmes, 0 sinon ; --fix répare les identifiants en double en les renommant, --strict échoue également sur les styles inconnus. Fonctionne sur les fichiers exportés avec -e et sur les diagrammes créés dans draw.io GUI

Références

Logos de marque IA / LLM (scripts/aiicons.py)

Pour les diagrammes mettant en vedette des marques IA, utilisez aiicons.py pour récupérer le style d'image exact du logo à partir de lobe-icons. Voir references/shapes.md pour plus de détails.

Dépannage

Si une exportation échoue ou qu'un rendu semble incorrect, consultez references/troubleshooting.md. Si un PNG exporté avec -e ne s'ouvre pas correctement, exécutez scripts/repair_png.py <fichier> pour le corriger.