CommunityImagegithub.com

Compétence Draw.io

Créez et modifiez des fichiers de diagrammes draw.io (.drawio) pour des diagrammes d'architecture, des organigrammes, des diagrammes réseau et des illustrations techniques. Utilisez-la lorsque l'utilisateur demande de créer des diagrammes, des visuels d'architecture, des organigrammes, des maquettes, des topologies réseau ou tout visuel modifiable dans draw.io/diagrams.net. Produit des fichiers .drawio au format XML, importables directement dans l'application de bureau ou web draw.io.

Qu'est-ce que Compétence Draw.io ?

Cette compétence permet à un agent IA de générer et de modifier des diagrammes professionnels au format natif XML de draw.io. Elle est idéale pour les développeurs, architectes et ingénieurs souhaitant créer rapidement des diagrammes d'architecture, des organigrammes, des diagrammes réseau, des maquettes ou toute illustration technique directement modifiable dans draw.io (bureau ou web). La compétence structure les fichiers avec des éléments de base comme les formes (rectangles, losanges, cylindres), les conteneurs (swimlanes, groupes), les connecteurs et le texte, en utilisant des propriétés de style communes (couleurs, typographie, bordures). Elle suit des motifs de diagramme standard (architecture en couches, flux de gauche à droite) et prend en charge les icônes des fournisseurs cloud (AWS, Azure, GCP) via des bibliothèques de formes intégrées. La sortie est un fichier .drawio que l'agent sauvegarde dans le répertoire de sortie de l'utilisateur.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/davidodediran/Draw.io-claude-skills/tree/HEAD/drawio-skill

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Compétence Diagramme Draw.io

Créez des fichiers de diagrammes professionnels et modifiables au format XML natif de draw.io.

Format de sortie

Les fichiers Draw.io sont en XML avec cette structure :

<mxfile host="app.diagrams.net" modified="DATE" agent="Claude" version="21.0.0" type="device">
  <diagram name="NOM_DU_DIAGRAMME" id="ID_UNIQUE">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Tous les éléments du diagramme vont ici -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Types d'éléments principaux

Formes de base

<!-- Rectangle -->
<mxCell id="id-unique" value="Texte de l'étiquette" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

<!-- Rectangle arrondi -->
<mxCell id="id-unique" value="Étiquette" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

<!-- Cylindre (Base de données) -->
<mxCell id="id-unique" value="Base de données" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>

<!-- Ellipse -->
<mxCell id="id-unique" value="Nœud" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>

Conteneurs et groupes

<!-- Couloir (Conteneur avec en-tête) -->
<mxCell id="id-unique" value="Titre de la section" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=30;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="200" height="150" as="geometry" />
</mxCell>

<!-- Barre d'en-tête (utilisant la couleur primaire de la marque) -->
<mxCell id="id-unique" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#0066CC;strokeColor=#0066CC;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="400" height="40" as="geometry" />
</mxCell>

Connecteurs et flèches

<!-- Flèche de base -->
<mxCell id="id-unique" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=2;strokeColor=#666666;" edge="1" parent="1" source="id-source" target="id-cible">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

<!-- Flèche bidirectionnelle -->
<mxCell id="id-unique" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;strokeWidth=2;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- Flèche flexible (Flèche de bloc) -->
<mxCell id="id-unique" value="" style="shape=flexArrow;endArrow=classic;html=1;fillColor=#FFB800;strokeColor=#cc9400;width=20;endSize=8;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- Ligne pointillée -->
<mxCell id="id-unique" value="" style="endArrow=classic;html=1;dashed=1;dashPattern=8 8;strokeColor=#999999;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="200" y="200" as="sourcePoint" />
    <mxPoint x="400" y="200" as="targetPoint" />
  </mxGeometry>
</mxCell>

Éléments de texte

<!-- Texte simple -->
<mxCell id="id-unique" value="Texte de l'étiquette" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="100" height="30" as="geometry" />
</mxCell>

<!-- Titre en gras -->
<mxCell id="id-unique" value="Titre" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;fontColor=#333333;" vertex="1" parent="1">
  <mxGeometry x="100" y="20" width="300" height="40" as="geometry" />
</mxCell>

<!-- Texte multiligne (utilisez &#xa; pour les sauts de ligne) -->
<mxCell id="id-unique" value="Ligne 1&#xa;Ligne 2&#xa;Ligne 3" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;fontSize=10;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="150" height="60" as="geometry" />
</mxCell>

Propriétés de style courantes

Couleurs (utilisez des codes hexadécimaux)

PropriétéObjectifExemple
fillColorFondfillColor=#dae8fc
strokeColorBordurestrokeColor=#6c8ebf
fontColorTextefontColor=#333333

Palette de couleurs standard

Bleu :    fillColor=#dae8fc;strokeColor=#6c8ebf
Vert :    fillColor=#d5e8d4;strokeColor=#82b366
Jaune :   fillColor=#fff2cc;strokeColor=#d6b656
Orange :  fillColor=#ffe6cc;strokeColor=#d79b00
Rouge :   fillColor=#f8cecc;strokeColor=#b85450
Violet :  fillColor=#e1d5e7;strokeColor=#9673a6
Gris :    fillColor=#f5f5f5;strokeColor=#666666

Typographie

PropriétéValeursExemple
fontSizeNombrefontSize=12
fontStyle0=normal, 1=gras, 2=italique, 3=gras+italiquefontStyle=1
alignleft, center, rightalign=center
verticalAligntop, middle, bottomverticalAlign=middle

Bordures et effets

PropriétéValeursExemple
rounded0 ou 1rounded=1
strokeWidthNombrestrokeWidth=2
dashed0 ou 1dashed=1
dashPatternMotifdashPattern=8 8
shadow0 ou 1shadow=1

Marque de l'entreprise (Personnalisable)

Cette compétence prend en charge une marque spécifique à l'entreprise. Modifiez references/branding.md pour définir les couleurs et les styles de votre organisation.

Espaces réservés de marque par défaut (remplacez par les vôtres) :

Primaire :   fillColor=#0066CC;strokeColor=#0052a3;fontColor=#FFFFFF
Secondaire : fillColor=#FFB800;strokeColor=#cc9400;fontColor=#333333
Foncé :      fillColor=#1a1a2e;strokeColor=#1a1a2e;fontColor=#FFFFFF
Fond clair : fillColor=#f0f4f8;strokeColor=#0066CC

Voir references/branding.md pour les instructions complètes de personnalisation.

Motifs de diagramme

Disposition d'un diagramme d'architecture

  1. Barre de titre en haut (pleine largeur, couleur de la marque)
  2. Sections principales sous forme de couloirs ou de conteneurs arrondis
  3. Composants sous forme de rectangles arrondis à l'intérieur des sections
  4. Bases de données sous forme de cylindres
  5. Systèmes externes sur les bords gauche/droit
  6. Flèches montrant le flux de données/contrôle
  7. Légende dans un coin expliquant les couleurs/symboles
  8. Pied de page avec métadonnées

Architecture en couches (de haut en bas)

┌─────────────────────────────────────┐
│           Utilisateurs / Clients    │  ← Couche supérieure
├─────────────────────────────────────┤
│           API / Interface           │
├─────────────────────────────────────┤
│         Logique métier              │
├─────────────────────────────────────┤
│         Données / Stockage          │  ← Couche inférieure
└─────────────────────────────────────┘

Flux de gauche à droite

┌──────┐     ┌──────────┐     ┌──────────┐
│Source│ ──► │ Trait.   │ ──► │  Cible   │
└──────┘     └──────────┘     └──────────┘

Bonnes pratiques

  1. Identifiants uniques : Chaque mxCell a besoin d'un attribut id unique
  2. Hiérarchie parent : Définissez parent="1" pour les éléments de premier niveau
  3. Positionnement : Utilisez mxGeometry avec x, y, largeur, hauteur
  4. Calques : Les éléments définis plus tard apparaissent au-dessus
  5. Alignement : Utilisez un espacement x/y cohérent (grille de 10-20px)
  6. Couleurs : Utilisez des paires remplissage/bordure coordonnées provenant de la palette
  7. Étiquettes : Gardez le texte concis ; utilisez des éléments de texte séparés pour les descriptions
  8. Espaces blancs : Laissez des marges à l'intérieur des conteneurs (padding de 20-40px)

Flux de travail

  1. Déterminez le type de diagramme et le motif de disposition
  2. Définissez les dimensions de la page dans mxGraphModel (pageWidth, pageHeight)
  3. Créez la structure du conteneur (couloirs, groupes)
  4. Ajoutez les composants avec des identifiants uniques
  5. Ajoutez les connecteurs en référençant les identifiants source/cible
  6. Ajoutez les étiquettes et annotations
  7. Ajoutez une légende si vous utilisez un code couleur
  8. Enregistrez sous forme de fichier .drawio
  9. Copiez dans /mnt/user-data/outputs/ et présentez à l'utilisateur

Icônes des fournisseurs cloud (AWS, Azure, GCP)

Draw.io inclut des bibliothèques de formes intégrées pour les principaux fournisseurs cloud. Utilisez les icônes officielles pour des diagrammes d'architecture professionnels.

Icônes AWS (Référence rapide)

AWS utilise shape=mxgraph.aws4.resourceIcon avec resIcon=mxgraph.aws4.SERVICE :

<mxCell id="lambda-1" value="Lambda" style="sketch=0;outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="78" height="78" as="geometry" />
</mxCell>

Valeurs courantes de resIcon AWS :

  • Calcul : ec2, lambda, ecs, eks, fargate
  • Stockage : s3, elastic_block_store, elastic_file_system
  • Base de données : rds, dynamodb, aurora, elasticache, redshift
  • Réseau : vpc, cloudfront, route_53, api_gateway, elastic_load_balancing
  • Sécurité : iam, cognito, secrets_manager, kms, waf

Couleurs des catégories AWS :

  • Calcul : #ED7100
  • Stockage : #7AA116
  • Base de données : #C925D1
  • Réseau : #8C4FFF
  • Sécurité : #DD344C

Icônes Azure (Référence rapide)

Azure utilise image=img/lib/azure2/CATEGORIE/SERVICE.svg :

<mxCell id="vm-1" value="VM" style="aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="68" height="68" as="geometry" />
</mxCell>

Chemins d'image Azure courants :

  • compute/Virtual_Machine.svg, compute/Function_Apps.svg
  • containers/Kubernetes_Services.svg
  • storage/Storage_Accounts.svg, storage/Blob_Storage.svg
  • databases/SQL_Database.svg, databases/Azure_Cosmos_DB.svg
  • networking/Virtual_Networks.svg, networking/Load_Balancers.svg
  • security/Key_Vaults.svg, identity/Azure_Active_Directory.svg

Conteneurs de groupe AWS

<!-- VPC -->
<mxCell id="vpc" value="VPC" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;dashed=0;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="400" height="300" as="geometry" />
</mxCell>

<!-- Sous-réseau public -->
grIcon=mxgraph.aws4.group_public_subnet;strokeColor=#7AA116;fillColor=#E9F3E6

<!-- Sous-réseau privé -->
grIcon=mxgraph.aws4.group_private_subnet;strokeColor=#00A4A6;fillColor=#E6F6F7

Références

Pour les motifs avancés et les listes d'icônes complètes, voir :

  • references/architecture-patterns.md - Dispositions courantes de diagrammes d'architecture
  • references/style-guide.md - Options de style étendues et placement des icônes
  • references/cloud-icons.md - Référence complète des icônes AWS, Azure, GCP
  • references/branding.md - Guide de personnalisation de la marque de l'entreprise

Skills associés

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More Image skills