excalidraw-diagram-generatorpar GitHub

Excalidraw Diagram Generator Skill.

Un skill Claude Code et Codex pour diagrammes et graphiques : génère des diagrammes Excalidraw et des cartes mentales à partir de langage naturel.

Diagrammes et visualisation de données
Diagram

Télécharger OpenDesign Voir le guide d'utilisation

github/awesome-copilot · skills/excalidraw-diagram-generator/SKILL.mdSKILL.md

--- name: excalidraw-diagram-generator description: Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw. --- ## When to Use This Skill ## Prerequisites ## Step-by-Step Workflow ## Best Practices ## Example Prompts and Responses ## Advanced Techniques

En-tête et titres de section lus depuis le fichier amont le 14 septembre 2026 · 24 276 caractères au total

01 Ce qu'il fait

Ce que fait le skill excalidraw-diagram-generator dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Génère des diagrammes au format Excalidraw à partir de descriptions en langage naturel. Prend en charge neuf types de diagrammes : les organigrammes pour les processus séquentiels, les diagrammes de relations pour les connexions entre entités, les cartes mentales pour les hiérarchies de concepts, les diagrammes d'architecture pour la conception système, les diagrammes de flux de données pour les processus de transformation de données, les diagrammes en couloirs de flux métier pour les workflows interfonctionnels, les diagrammes de classes pour la conception orientée objet, les diagrammes de séquence pour les interactions entre objets dans le temps, et les diagrammes ER pour les relations entre entités de base de données.

Produit des fichiers JSON .excalidraw avec des éléments appropriés (rectangles, ellipses, losanges, flèches, texte) positionnés à l'aide de coordonnées calculées et stylisés avec des schémas de couleurs cohérents. Les fichiers s'ouvrent directement dans Excalidraw sur excalidraw.com ou via l'extension VS Code.

Ce qu'il produit

Fichier JSON .excalidraw complet avec un nom de fichier descriptif
Résumé de ce qui a été créé, incluant le type de diagramme et le nombre d'éléments
Instructions pour ouvrir et modifier le diagramme dans Excalidraw

Voir l'exemple de prompt ↗

Fonctionnement

01
Comprendre la demande
Analyse la description de l'utilisateur pour déterminer le type de diagramme (organigramme, relation, carte mentale, architecture), les éléments clés (entités, étapes, concepts), les relations (flux, connexions, hiérarchie) et la complexité (nombre d'éléments).
02
Choisir le type de diagramme approprié
Fait correspondre l'intention de l'utilisateur au type de diagramme en reconnaissant des mots-clés.
03
Extraire les informations structurées
Liste les éléments en fonction du type de diagramme. Pour les organigrammes : étapes séquentielles, points de décision, points de début et de fin.
04
Générer le JSON Excalidraw
Crée le fichier .excalidraw avec les types d'éléments appropriés (rectangle, ellipse, losange, flèche, texte) et définit les propriétés clés, notamment la position (coordonnées x, y), la taille (largeur, hauteur), le style (strokeColor, backgroundColor, fillStyle), la police (fontFamily : 5 pour Excalifont) et les connexions (tableau de points pour les flèches).
05
Formater la sortie
Structure le fichier Excalidraw complet avec le type, la version, la source, le tableau d'éléments, appState (viewBackgroundColor, gridSize) et l'objet files.
06
Enregistrer et fournir les instructions
Enregistre le fichier sous descriptive-name.excalidraw et informe l'utilisateur sur la façon de l'ouvrir en visitant excalidraw.com, en cliquant sur Open ou en faisant un glisser-déposer du fichier, ou en utilisant l'extension Excalidraw pour VS Code.

02 Trouvez celui qui vous convient

Quand utiliser le skill excalidraw-diagram-generator

Utilisez le skill excalidraw-diagram-generator dans Claude Code ou Codex lorsqu'il s'agit de diagrammes et graphiques de ce type. Les capacités et limites ci-dessous sont tirées du fichier du skill.

Bon choix

Processus séquentiels, workflows et arbres de décision à l'aide d'organigrammes
Relations entre entités, composants système et dépendances à l'aide de diagrammes de relations
Hiérarchies de concepts, résultats de brainstorming et organisation de sujets à l'aide de cartes mentales
Conception système, interactions entre modules et flux de données à l'aide de diagrammes d'architecture
Workflows transverses et flux de processus par acteur à l'aide de diagrammes en couloirs (swimlane) de flux métier

Connaître les limites

Courbes complexes, qui sont simplifiées en lignes droites ou en courbes basiques
Les images intégrées ne sont pas prises en charge lors de la génération automatique
Diagrammes comportant plus de 20 éléments, le maximum recommandé étant de 20 par diagramme
La détection automatique des collisions, car le skill utilise plutôt des règles d'espacement

Quoi fournir

Description claire de ce qui doit être visualiséDescription en langage naturel du processus, du système, des relations ou des concepts à représenter dans le diagramme
Identification des entités, étapes ou concepts clésLes principaux composants qui deviendront les éléments du diagramme
Compréhension des relations ou du flux entre les élémentsLa façon dont les entités se connectent, la séquence des étapes ou la structure hiérarchique

03 Dans le skill

Règles que le skill excalidraw-diagram-generator donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Limites du nombre d'éléments
Étapes d'organigramme : 3-10 recommandées, 15 maximum. Entités de relation : 3-8 recommandées, 12 maximum. Branches de carte mentale : 4-6 recommandées, 8 maximum.
Police de caractères requise
Tous les éléments de texte doivent utiliser fontFamily: 5 (Excalifont) pour une apparence visuelle cohérente. Ceci est requis dans la liste de contrôle de validation.
Consignes d'espacement
Écart horizontal entre les éléments : 200-300px. Écart vertical entre les rangées : 100-150px. Taille du texte : 16-24px pour la lisibilité.
Cohérence de la palette de couleurs
Les éléments principaux utilisent le bleu clair (#a5d8ff), les éléments secondaires le vert clair (#b2f2bb), les éléments importants/centraux le jaune (#ffd43b), et les alertes/avertissements le rouge clair (#ffc9c9).
Gestion de la complexité
Si la demande de l'utilisateur comporte trop d'éléments, suggérer de la diviser en plusieurs diagrammes, se concentrer d'abord sur les éléments principaux, et proposer de créer des sous-diagrammes détaillés.
Direction du flux de données
Pour les diagrammes de flux de données, ne pas représenter l'ordre des processus, uniquement le flux de données. Les flux de données doivent être présentés de gauche à droite ou du haut-gauche vers le bas-droite.
Nombre maximal d'éléments
Le nombre d'éléments doit être raisonnable, avec moins de 20 éléments pour la clarté. Ceci est vérifié dans la liste de contrôle de validation avant la livraison.
Identifiants uniques et absence de chevauchement
Tous les éléments doivent avoir des identifiants uniques et les coordonnées doivent empêcher tout chevauchement. Ce sont des vérifications de validation requises avant la livraison du diagramme.

04 Mettez-le en pratique

Installer excalidraw-diagram-generator dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter excalidraw-diagram-generator à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

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

Forme générique de la CLI skills pour skills/excalidraw-diagram-generator/SKILL.md ; le dépôt peut documenter son propre chemin.

Confier à la skill une première tâche de diagrammes et graphiques

Adaptez ce prompt avec votre propre contenu et contraintes, puis exécutez-le dans Claude Code ou Codex.

Example prompt

Create a flowchart for user registration

Source : exemple SKILL.md (verbatim).

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Vérifier que tous les éléments ont des identifiants uniques
Vérifier que le texte est lisible avec une taille de police de 16 ou plus
Vérifier que tous les éléments de texte utilisent fontFamily: 5 (Excalifont)
Confirmer que les flèches se connectent logiquement et que les couleurs suivent un schéma cohérent

Dans OpenDesign, importez excalidraw-diagram-generator depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: GitHub
Repository: github.com/github/awesome-copilot Branche main
Fichier du skill: skills/excalidraw-diagram-generator/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 1899b18
License: MIT D'après LICENSE.
Étoiles du dépôt: 38 981 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt github/awesome-copilot, qui contient 6 skills dans ce catalogue. Ce n'est ni une note ni un compteur d'utilisation pour excalidraw-diagram-generator.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand utiliser ce skillRépertorie les phrases déclencheuses et les types de diagrammes pris en charge, notamment les organigrammes, les relations, les cartes mentales, l'architecture, les DFD, les diagrammes en couloirs, de classes, de séquence et ER
PrérequisNécessite une description claire, l'identification des entités ou étapes clés, et la compréhension des relations ou du flux
Workflow étape par étapeProcessus en six étapes, de la compréhension de la demande au choix du type de diagramme, en passant par l'extraction des informations, la génération du JSON, le formatage de la sortie et l'enregistrement avec instructions
Bonnes pratiquesRecommandations sur le nombre d'éléments, conseils de mise en page pour l'espacement et le positionnement, palettes de couleurs, taille du texte et stratégies de gestion de la complexité
Exemples de prompts et de réponsesTrois exemples présentant un organigramme d'inscription utilisateur, des relations utilisateur-publication-commentaire, et une carte mentale sur le machine learning avec les étapes d'extraction
DépannageSolutions pour les éléments qui se chevauchent, les problèmes d'ajustement du texte, un nombre trop élevé d'éléments, une mise en page peu claire et des couleurs incohérentes
Techniques avancéesFormule de mise en page en grille pour les diagrammes de relations, mise en page radiale pour les cartes mentales, et modèle d'ID auto-généré utilisant un horodatage et une chaîne aléatoire
Format de sortieFournit toujours un fichier JSON .excalidraw complet, un résumé avec le nombre d'éléments, et des instructions pour l'ouvrir sur excalidraw.com ou dans VS Code
Liste de vérificationHuit contrôles avant livraison, notamment des ID uniques, l'absence de coordonnées qui se chevauchent, un texte lisible, la police Excalifont, des flèches logiques, des couleurs cohérentes, un JSON valide et un nombre raisonnable d'éléments
Bibliothèques d'icônes (amélioration optionnelle)Workflow de script Python pour ajouter des icônes de services cloud provenant des bibliothèques Excalidraw, incluant les instructions de configuration et l'utilisation de add-icon-to-diagram.py et add-arrow.py
RéférencesDocumentation de schéma intégrée, spécifications des types d'éléments, huit modèles de diagrammes, trois scripts Python pour l'intégration d'icônes et de flèches, et le README des scripts
LimitationsCourbes simplifiées, pas d'images intégrées, 20 éléments maximum recommandés, pas de détection automatique des collisions

Description du skill lui-même

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

Description du front-matter issue de SKILL.md. Le fichier complet fait environ 24 276 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill excalidraw-diagram-generator

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Comment ouvrir le fichier de diagramme généré ?

Rendez-vous sur excalidraw.com et cliquez sur Ouvrir, ou faites un glisser-déposer du fichier .excalidraw. Vous pouvez également utiliser l'extension Excalidraw pour VS Code afin de l'ouvrir directement dans votre éditeur.

Puis-je utiliser des icônes AWS ou de services cloud dans mes diagrammes ?

Oui, le skill prend en charge les bibliothèques d'icônes d'excalidraw.com/libraries. Vous téléchargez un fichier .excalidrawlib, exécutez le script split-excalidraw-library.py pour le diviser en icônes individuelles, puis utilisez les scripts Python add-icon-to-diagram.py et add-arrow.py pour ajouter des icônes et des connexions à votre diagramme.

Cette approche évite la consommation de tokens et fournit des transformations de coordonnées précises avec une génération automatique d'UUID.

Excalidraw Diagram Generator

Exécutez excalidraw-diagram-generator sur une tâche réelle de diagrammes et graphiques.

Téléchargez OpenDesign, importez excalidraw-diagram-generator depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills

Terminal

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

Ce que fait le skill excalidraw-diagram-generator dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le skill excalidraw-diagram-generator

Bon choix

Connaître les limites

Quoi fournir

Règles que le skill excalidraw-diagram-generator donne à Claude Code et Codex

Limites du nombre d'éléments

Police de caractères requise

Consignes d'espacement

Cohérence de la palette de couleurs

Gestion de la complexité

Direction du flux de données

Nombre maximal d'éléments

Identifiants uniques et absence de chevauchement