excalidraw-diagram-generator

Par github · awesome-copilot

Génère des diagrammes Excalidraw à partir de descriptions en langage naturel. À utiliser quand on demande de « créer un diagramme », « faire un organigramme », « visualiser un processus », « dessiner une architecture système », « créer une mind map » ou « générer un fichier Excalidraw ». Prend en charge les organigrammes, les diagrammes de relations, les mind maps et les diagrammes d'architecture système. Produit des fichiers JSON `.excalidraw` pouvant être ouverts directement dans Excalidraw.

npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

Générateur de Diagrammes Excalidraw

Une skill pour générer des diagrammes au format Excalidraw à partir de descriptions en langage naturel. Cette skill aide à créer des représentations visuelles de processus, systèmes, relations et idées sans dessin manuel.

Quand Utiliser Cette Skill

Utilisez cette skill quand les utilisateurs demandent :

  • « Crée un diagramme montrant... »
  • « Fais un organigramme pour... »
  • « Visualise le processus de... »
  • « Dessine l'architecture système de... »
  • « Génère une mind map sur... »
  • « Crée un fichier Excalidraw pour... »
  • « Montre la relation entre... »
  • « Diagramme le flux de travail de... »

Types de diagrammes supportés :

  • 📊 Organigrammes : Processus séquentiels, flux de travail, arbres de décision
  • 🔗 Diagrammes de relations : Relations d'entités, composants système, dépendances
  • 🧠 Mind maps : Hiérarchies conceptuelles, résultats de brainstorming, organisation de sujets
  • 🏗️ Diagrammes d'architecture : Conception système, interactions de modules, flux de données
  • 📈 Diagrammes de flux de données (DFD) : Visualisation de flux de données, processus de transformation
  • 🏊 Flux métier (Swimlane) : Flux de travail multi-fonctionnels, flux de processus basés sur les acteurs
  • 📦 Diagrammes de classe : Conception orientée objet, structures de classes et relations
  • 🔄 Diagrammes de séquence : Interactions d'objets dans le temps, flux de messages
  • 🗃️ Diagrammes ER : Relations d'entités de bases de données, modèles de données

Prérequis

  • Description claire de ce qui doit être visualisé
  • Identification des entités, étapes ou concepts clés
  • Compréhension des relations ou du flux entre les éléments

Flux de Travail Étape par Étape

Étape 1 : Comprendre la Demande

Analysez la description de l'utilisateur pour déterminer :

  1. Type de diagramme (organigramme, relation, mind map, architecture)
  2. Éléments clés (entités, étapes, concepts)
  3. Relations (flux, connexions, hiérarchie)
  4. Complexité (nombre d'éléments)

Étape 2 : Choisir le Type de Diagramme Approprié

Intention utilisateur Type de diagramme Mots-clés exemple
Flux de processus, étapes, procédures Organigramme « flux de travail », « processus », « étapes », « procédure »
Connexions, dépendances, associations Diagramme de relations « relation », « connexions », « dépendances », « structure »
Hiérarchie conceptuelle, brainstorming Mind Map « mind map », « concepts », « idées », « décomposition »
Conception système, composants Diagramme d'architecture « architecture », « système », « composants », « modules »
Flux de données, processus de transformation Diagramme de flux de données (DFD) « flux de données », « traitement de données », « transformation de données »
Processus multi-fonctionnels, responsabilités d'acteurs Flux métier (Swimlane) « processus métier », « swimlane », « acteurs », « responsabilités »
Conception orientée objet, structures de classes Diagramme de classe « classe », « héritage », « POO », « modèle d'objet »
Séquences d'interaction, flux de messages Diagramme de séquence « séquence », « interaction », « messages », « chronologie »
Conception de base de données, relations d'entités Diagramme ER « base de données », « entité », « relation », « modèle de données »

Étape 3 : Extraire les Informations Structurées

Pour les Organigrammes :

  • Liste des étapes séquentielles
  • Points de décision (le cas échéant)
  • Points de début et de fin

Pour les Diagrammes de Relations :

  • Entités/nœuds (nom + description optionnelle)
  • Relations entre entités (de → vers, avec label)

Pour les Mind Maps :

  • Sujet central
  • Branches principales (3-6 recommandées)
  • Sous-sujets pour chaque branche (optionnel)

Pour les Diagrammes de Flux de Données (DFD) :

  • Sources et destinations de données (entités externes)
  • Processus (transformations de données)
  • Magasins de données (bases de données, fichiers)
  • Flux de données (flèches montrant le mouvement de données de gauche à droite ou de haut-gauche à bas-droite)
  • Important : Ne représentez pas l'ordre de traitement, seulement le flux de données

Pour le Flux Métier (Swimlane) :

  • Acteurs/rôles (départements, systèmes, personnes) - affichés comme colonnes d'en-tête
  • Lanes de processus (lanes verticales sous chaque acteur)
  • Boîtes de processus (activités dans chaque lane)
  • Flèches de flux (connectant les boîtes de processus, incluant les transferts entre lanes)

Pour les Diagrammes de Classe :

  • Classes avec noms
  • Attributs avec visibilité (+, -, #)
  • Méthodes avec visibilité et paramètres
  • Relations : héritage (ligne solide + triangle blanc), implémentation (ligne pointillée + triangle blanc), association (ligne solide), dépendance (ligne pointillée), agrégation (ligne solide + losange blanc), composition (ligne solide + losange rempli)
  • Notations de multiplicité (1, 0..1, 1.., )

Pour les Diagrammes de Séquence :

  • Objets/acteurs (alignés horizontalement en haut)
  • Lignes de vie (lignes verticales de chaque objet)
  • Messages (flèches horizontales entre les lignes de vie)
  • Messages synchrones (flèche solide), messages asynchrones (flèche pointillée)
  • Valeurs de retour (flèches pointillées)
  • Boîtes d'activation (rectangles sur les lignes de vie pendant l'exécution)
  • Le temps s'écoule de haut en bas

Pour les Diagrammes ER :

  • Entités (rectangles avec noms d'entité)
  • Attributs (listés à l'intérieur des entités)
  • Clés primaires (soulignées ou marquées avec PK)
  • Clés étrangères (marquées avec FK)
  • Relations (lignes connectant les entités)
  • Cardinalité : 1:1 (un-à-un), 1:N (un-à-plusieurs), N:M (plusieurs-à-plusieurs)
  • Entités de jonction/associatives pour les relations plusieurs-à-plusieurs (rectangles pointillés)

Étape 4 : Générer le JSON Excalidraw

Créez le fichier .excalidraw avec les éléments appropriés :

Types d'éléments disponibles :

  • rectangle : Boîtes pour les entités, étapes, concepts
  • ellipse : Formes alternatives pour l'emphase
  • diamond : Points de décision
  • arrow : Connexions directionnelles
  • text : Labels et annotations

Propriétés clés à définir :

  • Position : Coordonnées x, y
  • Taille : width, height
  • Style : strokeColor, backgroundColor, fillStyle
  • Police : fontFamily: 5 (Excalifont - requis pour tous les éléments texte)
  • Texte : Texte intégré pour les labels
  • Connexions : Tableau points pour les flèches

Important : Tous les éléments texte doivent utiliser fontFamily: 5 (Excalifont) pour une apparence visuelle cohérente.

Étape 5 : Formater la Sortie

Structurez le fichier Excalidraw complet :

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    // Tableau d'éléments du diagramme
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": 20
  },
  "files": {}
}

Étape 6 : Enregistrer et Fournir des Instructions

  1. Enregistrez sous <nom-descriptif>.excalidraw
  2. Informez l'utilisateur comment ouvrir :
    • Visitez https://excalidraw.com
    • Cliquez sur « Open » ou glissez-déposez le fichier
    • Ou utilisez l'extension Excalidraw VS Code

Meilleures Pratiques

Directives de Nombre d'Éléments

Type de diagramme Nombre recommandé Maximum
Étapes d'organigramme 3-10 15
Entités de relation 3-8 12
Branches de mind map 4-6 8
Sous-sujets par branche 2-4 6

Conseils de Mise en Page

  1. Positions de départ : Centrez les éléments importants, utilisez un espacement cohérent
  2. Espacement :
    • Écart horizontal : 200-300px entre les éléments
    • Écart vertical : 100-150px entre les lignes
  3. Couleurs : Utilisez un schéma de couleurs cohérent
    • Éléments principaux : Bleu clair (#a5d8ff)
    • Éléments secondaires : Vert clair (#b2f2bb)
    • Important/Central : Jaune (#ffd43b)
    • Alertes/Avertissements : Rouge clair (#ffc9c9)
  4. Taille de texte : 16-24px pour la lisibilité
  5. Police : Utilisez toujours fontFamily: 5 (Excalifont) pour tous les éléments texte
  6. Style de flèche : Utilisez des flèches droites pour les flux simples, courbes pour les relations complexes

Gestion de la Complexité

Si la demande de l'utilisateur contient trop d'éléments :

  • Suggérez de diviser en plusieurs diagrammes
  • Concentrez-vous d'abord sur les éléments principaux
  • Proposez de créer des sous-diagrammes détaillés

Exemple de réponse :

« Votre demande inclut 15 composants. Pour plus de clarté, je recommande :
1. Diagramme d'architecture de haut niveau (6 composants principaux)
2. Diagramme détaillé pour chaque sous-système

Voulez-vous que je commence par la vue de haut niveau ? »

Exemples de Prompts et Réponses

Exemple 1 : Organigramme Simple

Utilisateur : « Crée un organigramme pour l'enregistrement d'utilisateur »

L'agent génère :

  1. Extraire les étapes : « Entrer l'e-mail » → « Vérifier l'e-mail » → « Définir le mot de passe » → « Complété »
  2. Créer un organigramme avec 4 rectangles + 3 flèches
  3. Enregistrer sous user-registration-flow.excalidraw

Exemple 2 : Diagramme de Relations

Utilisateur : « Diagramme les relations entre les entités Utilisateur, Publication et Commentaire »

L'agent génère :

  1. Entités : Utilisateur, Publication, Commentaire
  2. Relations : Utilisateur → Publication (« crée »), Utilisateur → Commentaire (« écrit »), Publication → Commentaire (« contient »)
  3. Enregistrer sous user-content-relationships.excalidraw

Exemple 3 : Mind Map

Utilisateur : « Mind map sur les concepts du machine learning »

L'agent génère :

  1. Centre : « Machine Learning »
  2. Branches : Apprentissage supervisé, Apprentissage non supervisé, Apprentissage par renforcement, Deep Learning
  3. Sous-sujets sous chaque branche
  4. Enregistrer sous machine-learning-mindmap.excalidraw

Dépannage

Problème Solution
Éléments qui se chevauchent Augmentez l'espacement entre les coordonnées
Le texte ne rentre pas dans les boîtes Augmentez la largeur de la boîte ou réduisez la taille de police
Trop d'éléments Divisez en plusieurs diagrammes
Mise en page peu claire Utilisez une mise en page en grille (lignes/colonnes) ou radiale (mind maps)
Couleurs incohérentes Définissez une palette de couleurs d'avance selon les types d'éléments

Techniques Avancées

Mise en Page en Grille (pour les Diagrammes de Relations)

const columns = Math.ceil(Math.sqrt(entityCount));
const x = startX + (index % columns) * horizontalGap;
const y = startY + Math.floor(index / columns) * verticalGap;

Mise en Page Radiale (pour les Mind Maps)

const angle = (2 * Math.PI * index) / branchCount;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);

IDs Générés Automatiquement

Utilisez timestamp + chaîne aléatoire pour les IDs uniques :

const id = Date.now().toString(36) + Math.random().toString(36).substr(2);

Format de Sortie

Fournissez toujours :

  1. ✅ Fichier JSON .excalidraw complet
  2. 📊 Résumé de ce qui a été créé
  3. 📝 Nombre d'éléments
  4. 💡 Instructions pour ouvrir/éditer

Exemple de résumé :

Créé : user-workflow.excalidraw
Type : Organigramme
Éléments : 7 rectangles, 6 flèches, 1 texte de titre
Total : 14 éléments

Pour afficher :
1. Visitez https://excalidraw.com
2. Glissez-déposez user-workflow.excalidraw
3. Ou utilisez Fichier → Ouvrir dans l'extension Excalidraw VS Code

Checklist de Validation

Avant de livrer le diagramme :

  • [ ] Tous les éléments ont des IDs uniques
  • [ ] Les coordonnées évitent le chevauchement
  • [ ] Le texte est lisible (taille de police 16+)
  • [ ] Tous les éléments texte utilisent fontFamily: 5 (Excalifont)
  • [ ] Les flèches se connectent logiquement
  • [ ] Les couleurs suivent un schéma cohérent
  • [ ] Le fichier est un JSON valide
  • [ ] Le nombre d'éléments est raisonnable (<20 pour la clarté)

Bibliothèques d'Icônes (Amélioration Optionnelle)

Pour les diagrammes spécialisés (par ex., diagrammes d'architecture AWS/GCP/Azure), vous pouvez utiliser des bibliothèques d'icônes pré-créées d'Excalidraw. Cela fournit des icônes professionnelles et standardisées au lieu de formes basiques.

Quand l'Utilisateur Demande des Icônes

Si l'utilisateur demande des diagrammes d'architecture AWS/cloud ou mentionne vouloir utiliser des icônes spécifiques :

  1. Vérifiez si la bibliothèque existe : Recherchez libraries/<nom-bibliothèque>/reference.md

  2. Si la bibliothèque existe : Procédez à l'utilisation des icônes (voir Flux de Travail Assistant IA ci-dessous)

  3. Si la bibliothèque N'EXISTE PAS : Répondez avec les instructions de configuration :

    Pour utiliser les icônes d'architecture [AWS/GCP/Azure/etc.], veuillez suivre ces étapes :
    
    1. Visitez https://libraries.excalidraw.com/
    2. Recherchez « [Icônes d'architecture AWS/etc.] » et téléchargez le fichier .excalidrawlib
    3. Créez le répertoire : skills/excalidraw-diagram-generator/libraries/[nom-ensemble-icônes]/
    4. Placez le fichier téléchargé dans ce répertoire
    5. Exécutez le script de division :
       python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/[nom-ensemble-icônes]/
    
    Cela divisera la bibliothèque en fichiers d'icônes individuels pour une utilisation efficace.
    Une fois la configuration terminée, je peux créer votre diagramme en utilisant les vraies icônes AWS/cloud.
    
    Sinon, je peux créer le diagramme maintenant en utilisant des formes simples (rectangles, ellipses)
    que vous pouvez ensuite remplacer par des icônes manuellement dans Excalidraw.

Instructions de Configuration Utilisateur (Détaillées)

Étape 1 : Créer le Répertoire de Bibliothèque

mkdir -p skills/excalidraw-diagram-generator/libraries/aws-architecture-icons

Étape 2 : Télécharger la Bibliothèque

  • Visitez : https://libraries.excalidraw.com/
  • Recherchez l'ensemble d'icônes souhaité (par ex., « AWS Architecture Icons »)
  • Cliquez sur télécharger pour obtenir le fichier .excalidrawlib
  • Catégories d'exemple (la disponibilité varie ; confirmez sur le site) :
    • Icônes de service cloud
    • Icônes UI/Material
    • Symboles d'organigramme

Étape 3 : Placer le Fichier de Bibliothèque

  • Renommez le fichier téléchargé pour correspondre au nom du répertoire (par ex., aws-architecture-icons.excalidrawlib)
  • Déplacez-le vers le répertoire créé à l'Étape 1

Étape 4 : Exécuter le Script de Division

python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/

Étape 5 : Vérifier la Configuration Après l'exécution du script, vérifiez que la structure suivante existe :

skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/
  aws-architecture-icons.excalidrawlib  (original)
  reference.md                          (généré - tableau de consultation des icônes)
  icons/                                (généré - fichiers d'icônes individuels)
    API-Gateway.json
    CloudFront.json
    EC2.json
    Lambda.json
    RDS.json
    S3.json
    ...

Flux de Travail Assistant IA

Quand les bibliothèques d'icônes sont disponibles dans libraries/ :

APPROCHE RECOMMANDÉE : Utiliser les Scripts Python (Efficace et Fiable)

Le dépôt inclut des scripts Python qui gèrent l'intégration des icônes automatiquement :

  1. Créer la structure du diagramme de base :

    • Créer un fichier .excalidraw avec une mise en page de base (titre, boîtes, régions)
    • Cela établit le canevas et la structure globale
  2. Ajouter les icônes en utilisant le script Python :

    python skills/excalidraw-diagram-generator/scripts/add-icon-to-diagram.py \
      <chemin-diagramme> <nom-icône> <x> <y> [--label "Texte"] [--library-path CHEMIN]
    • L'édition via .excalidraw.edit est activée par défaut pour éviter les problèmes de remplacement ; passez --no-use-edit-suffix pour désactiver.

    Exemples :

    # Ajouter icône EC2 à la position (400, 300) avec label
    python scripts/add-icon-to-diagram.py diagram.excalidraw EC2 400 300 --label "Serveur Web"
    
    # Ajouter icône VPC à la position (200, 150)
    python scripts/add-icon-to-diagram.py diagram.excalidraw VPC 200 150
    
    # Ajouter icône d'une autre bibliothèque
    python scripts/add-icon-to-diagram.py diagram.excalidraw Compute-Engine 500 200 \
      --library-path libraries/gcp-icons --label "Serveur API"
  3. Ajouter les flèches de connexion :

    python skills/excalidraw-diagram-generator/scripts/add-arrow.py \
      <chemin-diagramme> <de-x> <de-y> <vers-x> <vers-y> [--label "Texte"] [--style solid|dashed|dotted] [--color HEX]
    • L'édition via .excalidraw.edit est activée par défaut pour éviter les problèmes de remplacement ; passez --no-use-edit-suffix pour désactiver.

    Exemples :

    # Flèche simple de (300, 250) à (500, 300)
    python scripts/add-arrow.py diagram.excalidraw 300 250 500 300
    
    # Flèche avec label
    python scripts/add-arrow.py diagram.excalidraw 300 250 500 300 --label "HTTPS"
    
    # Flèche pointillée avec couleur personnalisée
    python scripts/add-arrow.py diagram.excalidraw 400 350 600 400 --style dashed --color "#7950f2"
  4. Résumé du flux de travail :

    # Étape 1 : Créer le diagramme de base avec titre et structure
    # (Créer un fichier .excalidraw avec les éléments initiaux)
    
    # Étape 2 : Ajouter les icônes avec labels
    python scripts/add-icon-to-diagram.py my-diagram.excalidraw "Internet-gateway" 200 150 --label "Passerelle Internet"
    python scripts/add-icon-to-diagram.py my-diagram.excalidraw VPC 250 250
    python scripts/add-icon-to-diagram.py my-diagram.excalidraw ELB 350 300 --label "Équilibreur de charge"
    python scripts/add-icon-to-diagram.py my-diagram.excalidraw EC2 450 350 --label "Instance EC2"
    python scripts/add-icon-to-diagram.py my-diagram.excalidraw RDS 550 400 --label "Base de données"
    
    # Étape 3 : Ajouter les flèches de connexion
    python scripts/add-arrow.py my-diagram.excalidraw 250 200 300 250  # Internet → VPC
    python scripts/add-arrow.py my-diagram.excalidraw 300 300 400 300  # VPC → ELB
    python scripts/add-arrow.py my-diagram.excalidraw 400 330 500 350  # ELB → EC2
    python scripts/add-arrow.py my-diagram.excalidraw 500 380 600 400  # EC2 → RDS

Avantages de l'Approche Script Python :

  • Pas de consommation de tokens : Les données JSON des icônes (200-1000 lignes chacune) n'entrent jamais dans le contexte IA
  • Transformations exactes : Les calculs de coordonnées gérés de manière déterministe
  • Gestion d'IDs : Génération UUID automatique évite les conflits
  • Fiable : Pas de risque d'erreur de calcul de coordonnées ou de collision d'ID
  • Rapide : Manipulation de fichiers directe, pas de surcharge d'analyse
  • Réutilisable : Fonctionne avec n'importe quelle bibliothèque Excalidraw que vous fournissez

ALTERNATIVE : Intégration Manuelle des Icônes (Non recommandée)

Utilisez ceci seulement si les scripts Python ne sont pas disponibles :

  1. Vérifiez les bibliothèques :

    Listez le répertoire : skills/excalidraw-diagram-generator/libraries/
    Recherchez les sous-répertoires contenant des fichiers reference.md
  2. Lisez reference.md :

    Ouvrez : libraries/<nom-bibliothèque>/reference.md
    C'est léger (généralement <300 lignes) et liste toutes les icônes disponibles
  3. Trouvez les icônes pertinentes :

    Recherchez dans le tableau reference.md les noms d'icônes correspondant aux besoins du diagramme
    Exemple : Pour un diagramme AWS avec EC2, S3, Lambda → Trouvez « EC2 », « S3 », « Lambda » dans le tableau
  4. Chargez des données d'icônes spécifiques (AVERTISSEMENT : Fichiers volumineux) :

    Lisez UNIQUEMENT les fichiers d'icônes nécessaires :
    - libraries/aws-architecture-icons/icons/EC2.json (200-300 lignes)
    - libraries/aws-architecture-icons/icons/S3.json (200-300 lignes)
    - libraries/aws-architecture-icons/icons/Lambda.json (200-300 lignes)
    Note : Chaque fichier d'icône fait 200-1000 lignes - cela consomme des tokens importants
  5. Extrayez et transformez les éléments :

    Chaque JSON d'icône contient un tableau « elements »
    Calculez la boîte englobante (min_x, min_y, max_x, max_y)
    Appliquez un décalage à toutes les coordonnées x/y
    Générez de nouveaux IDs uniques pour tous les éléments
    Mettez à jour les références groupIds
    Copiez les éléments transformés dans votre diagramme
  6. Positionnez les icônes et ajoutez les connexions :

    Ajustez les coordonnées x/y pour positionner correctement les icônes dans le diagramme
    Mettez à jour les IDs pour assurer l'unicité dans le diagramme
    Ajoutez les flèches de connexion et les labels selon les besoins

Défis de l'Intégration Manuelle :

  • ⚠️ Consommation de tokens élevée (200-1000 lignes par icône × nombre d'icônes)
  • ⚠️ Calculs de transformation de coordonnées complexes
  • ⚠️ Risque de collision d'ID s'il n'est pas géré correctement
  • ⚠️ Consommation de temps pour les diagrammes avec beaucoup d'icônes

Exemple : Créer un Diagramme AWS avec des Icônes

Demande : « Crée un diagramme d'architecture AWS avec Passerelle Internet, VPC, ELB, EC2 et RDS »

Flux de Travail Recommandé (utilisant les scripts Python) :

# Étape 1 : Créer le fichier du diagramme de base avec titre
# Créer my-aws-diagram.excalidraw avec la structure de base (titre, etc.)

# Étape 2 : Vérifier la disponibilité des icônes
# Lire : libraries/aws-architecture-icons/reference.md
# Confirmer l'existence des icônes : Internet-gateway, VPC, ELB, EC2, RDS

# Étape 3 : Ajouter les icônes avec le script Python
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw "Internet-gateway" 150 100 --label "Passerelle Internet"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw VPC 200 200
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw ELB 350 250 --label "Équilibreur de charge"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw EC2 500 300 --label "Serveur Web"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw RDS 650 350 --label "Base de données"

# Étape 4 : Ajouter les flèches de connexion
python scripts/add-arrow.py my-aws-diagram.excalidraw 200 150 250 200  # Internet → VPC
python scripts/add-arrow.py my-aws-diagram.excalidraw 265 230 350 250  # VPC → ELB
python scripts/add-arrow.py my-aws-diagram.excalidraw 415 280 500 300  # ELB → EC2
python scripts/add-arrow.py my-aws-diagram.excalidraw 565 330 650 350 --label "SQL" --style dashed

# Résultat : Diagramme complet avec icônes AWS professionnels, labels et connexions

Avantages :

  • Pas de calcul de coordonnées manuel
  • Pas de consommation de tokens pour les données d'icônes
  • Résultats fiables et déterministes
  • Facile à itérer et ajuster les positions

Flux de Travail Alternative (manuel, si les scripts ne sont pas disponibles) :

  1. Vérifiez : libraries/aws-architecture-icons/reference.md existe → Oui
  2. Lisez reference.md → Trouvez les entrées pour Internet-gateway, VPC, ELB, EC2, RDS
  3. Chargez :
    • icons/Internet-gateway.json (298 lignes)
    • icons/VPC.json (550 lignes)
    • icons/ELB.json (363 lignes)
    • icons/EC2.json (231 lignes)
    • icons/RDS.json (taille similaire) Total : ~2000+ lignes de JSON à traiter
  4. Extrayez les éléments de chaque JSON
  5. Calculez les boîtes englobantes et les décalages pour chaque icône
  6. Transformez toutes les coordonnées (x, y) pour le positionnement
  7. Générez des IDs uniques pour tous les éléments
  8. Ajoutez les flèches montrant le flux de données
  9. Ajoutez les labels texte
  10. Générez le fichier .excalidraw final

Défis de l'approche manuelle :

  • Consommation de tokens élevée (~2000-5000 lignes)
  • Maths de coordonnées complexes
  • Risque de conflits d'ID

Bibliothèques d'Icônes Supportées (Exemples — vérifiez la disponibilité)

  • Ce flux de travail fonctionne avec n'importe quel fichier .excalidrawlib valide que vous fournissez.
  • Exemples de catégories de bibliothèques que vous pouvez trouver sur https://libraries.excalidraw.com/ :
    • Icônes de services cloud
    • Icônes Kubernetes / infrastructure
    • Icônes UI / Material
    • Symboles d'organigramme / diagramme
    • Icônes de diagramme réseau
  • La disponibilité et la dénomination peuvent changer ; vérifiez les noms de bibliothèque exacts sur le site avant d'utiliser.

Secours : Aucune Icône Disponible

Si aucune bibliothèque d'icônes n'est configurée :

  • Créez des diagrammes en utilisant des formes basiques (rectangles, ellipses, flèches)
  • Utilisez la codification par couleur et les labels texte pour distinguer les composants
  • Informez l'utilisateur qu'il peut ajouter des icônes plus tard ou configurer des bibliothèques pour les futurs diagrammes
  • Le diagramme sera toujours fonctionnel et clair, juste moins visuellement poli

Références

Voir les références groupées pour :

  • references/excalidraw-schema.md - Schéma JSON Excalidraw complet
  • references/element-types.md - Spécifications de type d'élément détaillées
  • templates/flowchart-template.json - Modèle d'organigramme basique
  • templates/relationship-template.json - Modèle de diagramme de relations
  • templates/mindmap-template.json - Modèle de mind map
  • scripts/split-excalidraw-library.py - Outil pour diviser les fichiers .excalidrawlib
  • scripts/README.md - Documentation pour les outils de bibliothèque
  • scripts/.gitignore - Empêche les artefacts Python locaux d'être validés

Limitations

  • Les courbes complexes sont simplifiées en lignes droites/courbes basiques
  • La rugosité dessinée à la main est définie par défaut (1)
  • Pas de support des images intégrées dans la génération automatique
  • Nombre maximum d'éléments recommandé : 20 par diagramme
  • Pas de détection automatique de collision (utilisez les directives d'espacement)

Améliorations Futures

Améliorations potentielles :

  • Algorithmes d'optimisation de mise en page automatique
  • Import à partir de la syntaxe Mermaid/PlantUML
  • Expansion de la bibliothèque de modèles
  • Édition interactive après génération

Skills similaires