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 :
- Type de diagramme (organigramme, relation, mind map, architecture)
- Éléments clés (entités, étapes, concepts)
- Relations (flux, connexions, hiérarchie)
- 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, conceptsellipse: Formes alternatives pour l'emphasediamond: Points de décisionarrow: Connexions directionnellestext: 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
pointspour 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
- Enregistrez sous
<nom-descriptif>.excalidraw - 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
- Positions de départ : Centrez les éléments importants, utilisez un espacement cohérent
- Espacement :
- Écart horizontal : 200-300px entre les éléments
- Écart vertical : 100-150px entre les lignes
- 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)
- Éléments principaux : Bleu clair (
- Taille de texte : 16-24px pour la lisibilité
- Police : Utilisez toujours
fontFamily: 5(Excalifont) pour tous les éléments texte - 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 :
- Extraire les étapes : « Entrer l'e-mail » → « Vérifier l'e-mail » → « Définir le mot de passe » → « Complété »
- Créer un organigramme avec 4 rectangles + 3 flèches
- 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 :
- Entités : Utilisateur, Publication, Commentaire
- Relations : Utilisateur → Publication (« crée »), Utilisateur → Commentaire (« écrit »), Publication → Commentaire (« contient »)
- Enregistrer sous
user-content-relationships.excalidraw
Exemple 3 : Mind Map
Utilisateur : « Mind map sur les concepts du machine learning »
L'agent génère :
- Centre : « Machine Learning »
- Branches : Apprentissage supervisé, Apprentissage non supervisé, Apprentissage par renforcement, Deep Learning
- Sous-sujets sous chaque branche
- 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 :
- ✅ Fichier JSON
.excalidrawcomplet - 📊 Résumé de ce qui a été créé
- 📝 Nombre d'éléments
- 💡 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 :
-
Vérifiez si la bibliothèque existe : Recherchez
libraries/<nom-bibliothèque>/reference.md -
Si la bibliothèque existe : Procédez à l'utilisation des icônes (voir Flux de Travail Assistant IA ci-dessous)
-
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 :
-
Créer la structure du diagramme de base :
- Créer un fichier
.excalidrawavec une mise en page de base (titre, boîtes, régions) - Cela établit le canevas et la structure globale
- Créer un fichier
-
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.editest activée par défaut pour éviter les problèmes de remplacement ; passez--no-use-edit-suffixpour 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" - L'édition via
-
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.editest activée par défaut pour éviter les problèmes de remplacement ; passez--no-use-edit-suffixpour 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" - L'édition via
-
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 :
-
Vérifiez les bibliothèques :
Listez le répertoire : skills/excalidraw-diagram-generator/libraries/ Recherchez les sous-répertoires contenant des fichiers reference.md -
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 -
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 -
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 -
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 -
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) :
- Vérifiez :
libraries/aws-architecture-icons/reference.mdexiste → Oui - Lisez reference.md → Trouvez les entrées pour Internet-gateway, VPC, ELB, EC2, RDS
- 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
- Extrayez les éléments de chaque JSON
- Calculez les boîtes englobantes et les décalages pour chaque icône
- Transformez toutes les coordonnées (x, y) pour le positionnement
- Générez des IDs uniques pour tous les éléments
- Ajoutez les flèches montrant le flux de données
- Ajoutez les labels texte
- Générez le fichier
.excalidrawfinal
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
.excalidrawlibvalide 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 completreferences/element-types.md- Spécifications de type d'élément détailléestemplates/flowchart-template.json- Modèle d'organigramme basiquetemplates/relationship-template.json- Modèle de diagramme de relationstemplates/mindmap-template.json- Modèle de mind mapscripts/split-excalidraw-library.py- Outil pour diviser les fichiers.excalidrawlibscripts/README.md- Documentation pour les outils de bibliothèquescripts/.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