Compétence Draw.io Diagram

Générez des diagrammes draw.io en tant que fichiers .drawio natifs et exportez-les en images PNG pouvant être intégrées dans des documents Word.

Comment créer un diagramme

1. Générez du XML draw.io au format mxGraphModel pour le diagramme demandé
2. Écrivez le XML dans un fichier .drawio en utilisant l'outil de création/édition de fichier
3. Exportez en PNG en utilisant le script d'export fourni

Script d'export fourni

Cette compétence inclut drawio-to-png.mjs, un script d'export Node.js avec deux moteurs de rendu :

1. draw.io CLI (pixel-parfait, plus rapide) — utilisé automatiquement si draw.io desktop est installé
2. Lecteur draw.io officiel dans navigateur headless (pixel-parfait, nécessite Chromium/Edge) — fallback quand la CLI n'est pas disponible

Utilisation

# Installer les dépendances (une seule fois, depuis le dossier scripts)
cd skills/drawio/scripts && npm install

# Exporter un seul diagramme
node skills/drawio/scripts/drawio-to-png.mjs <input.drawio> [output.png]

# Exporter tous les fichiers .drawio d'un répertoire
node skills/drawio/scripts/drawio-to-png.mjs --dir <directory>

# Forcer un moteur de rendu spécifique
node skills/drawio/scripts/drawio-to-png.mjs --renderer=cli|viewer|auto <input.drawio>

Contenu du dossier Skill

Formats d'export supportés

Conventions de style XML Draw.io

Utilisez ces styles pour des diagrammes cohérents et professionnels :

<!-- Service primaire (en évidence) -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=2;arcSize=12;shadow=1;" />

<!-- Système externe -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" />

<!-- Étape de succès/traitement -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" />

<!-- Portail de qualité/avertissement -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />

<!-- Chemin d'erreur/échec -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" />

<!-- Stockage de données (cylindre) -->
<mxCell style="shape=cylinder3;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />

<!-- Flèche -->
<mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=1;strokeColor=#6c8ebf;strokeWidth=2;" />

Localiser la CLI draw.io

Essayez d'abord drawio (fonctionne s'il est dans le PATH), puis fallback :

• Windows : "C:\Program Files\draw.io\draw.io.exe"
• macOS : /Applications/draw.io.app/Contents/MacOS/draw.io
• Linux : drawio (via snap/apt/flatpak)

Commande d'export CLI

drawio -x -f png -e -b 10 -o <output.png> <input.drawio>

Drapeaux : -x (export), -f (format), -e (intégrer XML du diagramme), -b (bordure), -o (chemin de sortie).