Communitygithub.com

Générateur de Diagrammes de Conteneurs C4

Génère des diagrammes de conteneurs C4 suivant les conventions du modèle C4, exportés sous forme de fichiers .drawio XML éditables, compatibles avec draw.io (desktop ou web).

Qu'est-ce que Générateur de Diagrammes de Conteneurs C4 ?

Cette compétence permet à un agent IA (Claude, Codex) de générer des diagrammes d'architecture de conteneurs au format C4, en produisant des fichiers `.drawio` natifs, entièrement éditables dans l'outil draw.io (bureau ou web). Elle suit un processus structuré en plusieurs étapes : identification des éléments (utilisateurs, conteneurs, bases de données, files d'attente, systèmes externes), classification selon une palette de couleurs et de formes standardisées, et mise en page en couches verticales strictes (personnes en haut, conteneurs internes au milieu, systèmes externes en bas). L'agent applique des règles de disposition explicites avec des coordonnées X,Y précises, garantit un espacement minimal entre les éléments, évite les croisements de lignes inutiles, et ajoute automatiquement une légende en bas à droite. Chaque connexion doit comporter une étiquette indiquant le protocole (ex : `[REST/JSON]`, `[SQL]`, `[AMQP]`) et utiliser des traits pleins pour les appels synchrones, des pointillés pour les flux asynchrones. La compétence inclut également une validation finale complète (coordonnées, légende, espacement, lisibilité des textes, validité du fichier XML) et interdit explicitement les anti-patrons comme l'absence de légende, les flèches sans étiquette, ou l'utilisation de formes `mxgraph.c4.*` qui ne sont pas chargées par défaut dans draw.io.

Compatible avec✓Claude Code✓Codex CLI~Cursor
npx skills add ANcpLua/ancplua-skills
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

Que fait Générateur de Diagrammes de Conteneurs C4 ?

Génère des diagrammes de conteneurs C4 suivant les conventions du modèle C4, exportés sous forme de fichiers .drawio XML éditables qui s'ouvrent directement dans draw.io (desktop ou web).

Quand l'utiliser

Déclencheurs explicites :

  • L'utilisateur demande un diagramme C4, un diagramme de conteneurs, ou un diagramme d'architecture
  • L'utilisateur dit "dessine l'architecture", "diagramme système", "montre-moi les composants"
  • L'utilisateur a besoin de visualiser l'architecture d'un système pour une documentation ou une présentation
  • L'utilisateur mentionne draw.io, drawio, ou souhaite un diagramme éditable

Déclencheurs proactifs :

  • Explication d'un système avec 3 composants ou plus qui interagissent
  • Discussion sur des microservices, APIs, bases de données et leurs relations
  • Revue ou conception d'architecture système

Passer quand :

  • L'utilisateur veut un simple organigramme (utiliser Mermaid à la place)
  • L'utilisateur veut des maquettes d'interface utilisateur
  • Le système a moins de 3 composants

Processus

Étape 1 : Recueillir les exigences

Identifier à partir de la conversation ou demander à l'utilisateur :

  • Quel système diagrammons-nous ?
  • Quels sont les utilisateurs/acteurs (Personne) ?
  • Quels conteneurs existent (applications, services, bases de données, files d'attente, stockage de fichiers) ?
  • À quels systèmes externes interagit-il ?
  • Quels sont les flux de données et protocoles clés ?

Si l'utilisateur fournit un cahier des charges, une description de code source, ou un aperçu d'architecture, extraire les éléments automatiquement et confirmer avant de générer.

Étape 2 : Classifier les éléments

Mapper chaque élément à une catégorie C4 :

CatégorieCouleurFormeDescription
Personne#08427B (bleu foncé)shape=actor + étiquette de texteUtilisateurs, acteurs, rôles
Conteneur#438DD5 (bleu)Rectangle arrondiApplications, services, APIs
Base de données#438DD5 (bleu)CylindreTout magasin de données (SQL, NoSQL, fichiers)
File d'attente / Broker#438DD5 (bleu)Rectangle arrondi avec étiquetteFiles de messages, bus d'événements
Système externe#999999 (gris)Rectangle arrondiServices tiers, APIs
Limite systèmeaucun (transparent)Rectangle en pointillésRegroupe les conteneurs internes

Référence : references/element-templates.md pour les modèles XML draw.io exacts.

Étape 3 : Planifier la disposition

Appliquer une disposition en couches stricte (de haut en bas) :

Couche 1 (y ~= 20) :     Éléments Personne (acteurs)
Couche 2 (y ~= 250) :    Limite système contenant les conteneurs internes
Couche 3 (y ~= 700+) :   Systèmes externes

Règles de disposition :

  • Chaque élément reçoit des coordonnées x, y explicites (pas de disposition automatique)
  • 200px d'espace horizontal minimum entre les éléments sur la même couche
  • 200px d'espace vertical minimum entre les couches
  • Limite système = rectangle en pointillés entourant tous les conteneurs internes avec un rembourrage de 40px
  • Ordonner les éléments de gauche à droite en suivant la direction du flux de données principal
  • Grouper les conteneurs apparentés dans des sous-limites si le système comporte des sous-systèmes distincts
  • Garder la largeur du diagramme sous 1600px pour la lisibilité
  • Centrer les éléments horizontalement dans leur couche

Minimiser les croisements de lignes :

  • Placer les éléments qui communiquent fréquemment les uns à côté des autres
  • Router les connexions verticalement quand c'est possible
  • Éviter les lignes diagonales traversant d'autres éléments
  • Pas de flèches traversant des conteneurs non liés : si A se connecte à C, la flèche ne doit PAS passer par B. Corriger en : (a) plaçant A et C adjacents, (b) utilisant des points de sortie/entrée explicites, ou (c) réorganisant la disposition
  • Les étiquettes de flèche ne doivent pas chevaucher le texte du conteneur : utiliser labelBackgroundColor=#ffffff sur toutes les arêtes, et utiliser un décalage perpendiculaire (y dans mxGeometry) pour éloigner les étiquettes des conteneurs

Étape 4 : Définir les connexions

Pour chaque connexion, spécifier :

  • Élément source et cible
  • Étiquette : action + protocole (ex : "Lit/Écrit [SQL/TCP]", "Envoie des événements [AMQP]")
  • Style : trait plein = appel synchrone, trait pointillé = asynchrone (événements, files d'attente, webhooks)
  • Direction : toujours source -> cible (suivre le flux de données)

Règles de connexion :

  • Chaque flèche doit avoir une étiquette (pas de connexions sans étiquette) - si une étiquette chevauche, corriger la disposition ou le décalage, ne jamais supprimer l'étiquette
  • Toujours inclure labelBackgroundColor=#ffffff dans les styles de connexion
  • Utiliser le suffixe [Protocole] : [REST/JSON], [gRPC], [SQL], [AMQP], [WebSocket]
  • Flux bidirectionnels : utiliser deux flèches séparées avec des étiquettes distinctes
  • Auto-référence : éviter (restructurer le diagramme à la place)

Étape 5 : Générer le XML .drawio

Utiliser la structure XML de references/drawio-template.md comme base.

Construire le XML en suivant ces règles :

  1. Commencer par l'enveloppe <mxfile> et <mxGraphModel> avec les dimensions appropriées
  2. Ajouter les cellules racines (id="0" et id="1")
  3. Ajouter d'abord les rectangles de limite système (ils sont parents des éléments contenus)
  4. Ajouter tous les éléments avec une géométrie explicite (x, y, largeur, hauteur)
  5. Ajouter toutes les connexions avec les références source/cible
  6. Ajouter la légende dans le coin inférieur droit

Dimensionnement des éléments :

  • Personne : 40 x 60px pour l'acteur + 220 x 60px pour l'étiquette de texte en dessous
  • Conteneur : 240 x 120px
  • Base de données (cylindre) : 240 x 120px
  • Système externe : 240 x 120px
  • Limite système : calculée pour englober les enfants + rembourrage de 40px de chaque côté

Étape 6 : Ajouter la légende

Chaque diagramme doit inclure une légende. La placer dans le coin inférieur droit.

La légende doit montrer :

  • Personne = bonhomme bâton bleu foncé (#08427B)
  • Conteneur = rectangle arrondi bleu (#438DD5)
  • Base de données = cylindre bleu (#438DD5)
  • Système externe = rectangle arrondi gris (#999999)
  • Flèche pleine = flux synchrone
  • Flèche pointillée = flux asynchrone

Référence : references/legend-template.md pour le XML exact.

Étape 7 : Sauvegarder et valider

Sauvegarder dans le chemin demandé par l'utilisateur, ou par défaut dans ./c4_[nom_du_système].drawio.

Liste de validation :

  • Tous les éléments ont des coordonnées x, y explicites
  • Les couches sont de haut en bas : Personne -> Limite système -> Externe
  • La limite système engloble tous les conteneurs internes
  • La légende est présente dans le coin inférieur droit
  • Pas d'éléments qui se chevauchent (vérifier les coordonnées + dimensions)
  • Croisements de lignes minimaux
  • Chaque connexion a une étiquette avec protocole
  • Traits pleins = synchrone, traits pointillés = asynchrone
  • Les couleurs de police sont blanches (#ffffff) sur les arrière-plans colorés
  • Le fichier s'ouvre correctement dans draw.io (structure XML valide)

Règles du modèle C4

Suivre les contraintes du diagramme de conteneurs C4 :

  • Le diagramme de conteneurs montre les choix technologiques de haut niveau et comment les conteneurs communiquent
  • Chaque conteneur est une unité déployable/exécutable séparément (pas une classe ou un module)
  • Ne pas mélanger les niveaux C4 : cette compétence génère uniquement le niveau Conteneur
  • Pour les détails au niveau Composant à l'intérieur d'un conteneur, créer un diagramme séparé
  • Les éléments Personne représentent des rôles, pas des individus
  • Les systèmes externes sont tout ce qui se trouve en dehors de la limite système et que l'équipe ne possède pas

Anti-patrons

  • PAS de disposition automatique - toujours utiliser des coordonnées x, y explicites pour des résultats prévisibles
  • PAS de flèches sans étiquette - chaque connexion a besoin d'une action et d'un protocole
  • PAS de légende manquante - la légende est obligatoire sur chaque diagramme
  • PAS de disposition trop serrée - maintenir des espacements minimaux entre les éléments
  • PAS de niveaux C4 mélangés - niveau Conteneur uniquement (pas de classes, pas d'infrastructure)
  • PAS de texte invisible - s'assurer que la couleur de la police contraste avec l'arrière-plan
  • PAS de dimensions codées en dur - calculer la taille de la limite système à partir des enfants
  • PAS de formes mxgraph.c4.* - elles nécessitent la bibliothèque de formes C4 qui N'EST PAS chargée par défaut dans draw.io. Utiliser les formes intégrées : shape=actor pour les personnes, shape=cylinder3 pour les bases de données
  • PAS de flèches traversant des conteneurs non liés - réorganiser la disposition pour que chaque flèche ait un chemin clair entre la source et la cible
  • PAS d'étiquettes sans labelBackgroundColor=#ffffff - les étiquettes nues deviennent illisibles lorsqu'elles traversent d'autres éléments
  • PAS de suppression d'étiquettes pour résoudre un chevauchement - si une étiquette chevauche un conteneur, corriger la disposition ou le décalage, ne jamais supprimer d'information

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community