excalidraw-diagram-generatordi GitHub

Excalidraw Diagram Generator Skill.

Una skill per Claude Code e Codex dedicata a diagrammi e grafici: genera diagrammi e mappe mentali Excalidraw da linguaggio naturale.

Diagrams & Data Visualization
Diagram

Scarica OpenDesign Guida all'uso

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

Front matter e intestazioni di sezione letti dal file upstream il 14/09/2026 · 24.276 caratteri in totale

01 Cosa fa

Cosa fa la skill excalidraw-diagram-generator in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Genera diagrammi in formato Excalidraw a partire da descrizioni in linguaggio naturale. Supporta nove tipi di diagramma: flowchart per processi sequenziali, diagrammi di relazione per connessioni tra entità, mappe mentali per gerarchie di concetti, diagrammi architetturali per il design di sistema, diagrammi di flusso dati per i processi di trasformazione dei dati, diagrammi swimlane di flusso aziendale per workflow interfunzionali, diagrammi di classe per il design orientato agli oggetti, diagrammi di sequenza per le interazioni tra oggetti nel tempo e diagrammi ER per le relazioni tra entità del database.

Genera file JSON in formato .excalidraw con elementi appropriati (rettangoli, ellissi, rombi, freccie, testo) posizionati usando coordinate calcolate e con stili basati su schemi di colore coerenti. I file si aprono direttamente in Excalidraw su excalidraw.com o tramite l'estensione per VS Code.

Che cosa produce

File JSON .excalidraw completo con nome file descrittivo
Riepilogo di quanto creato, incluso il tipo di diagramma e il numero di elementi
Istruzioni per aprire e modificare il diagramma in Excalidraw

Vedi l'esempio di prompt ↗

Come funziona

01
Comprendere la richiesta
Analizza la descrizione dell'utente per determinare il tipo di diagramma (flowchart, relazione, mappa mentale, architettura), gli elementi chiave (entità, passaggi, concetti), le relazioni (flusso, connessioni, gerarchia) e la complessità (numero di elementi).
02
Scegliere il Tipo di Diagramma Appropriato
Fa corrispondere l'intento dell'utente al tipo di diagramma riconoscendo le parole chiave.
03
Estrarre Informazioni Strutturate
Elenca gli elementi in base al tipo di diagramma. Per i flowchart: passaggi sequenziali, punti decisionali, punti di inizio e fine.
04
Generare il JSON Excalidraw
Crea il file .excalidraw con i tipi di elemento appropriati (rettangolo, ellisse, rombo, freccia, testo) e impostA le proprietà principali, tra cui posizione (coordinate x, y), dimensione (width, height), stile (strokeColor, backgroundColor, fillStyle), font (fontFamily: 5 per Excalifont) e connessioni (array points per le frecce).
05
Formattare l'Output
Struttura il file Excalidraw completo con type, version, source, array elements, appState (viewBackgroundColor, gridSize) e oggetto files.
06
Salvare e Fornire le Istruzioni
Salva come descriptive-name.excalidraw e informa l'utente su come aprirlo: visitando excalidraw.com, facendo clic su Open o trascinando il file, oppure usando l'estensione Excalidraw per VS Code.

02 Trova la tua applicazione

Quando usare la skill excalidraw-diagram-generator

Usa la skill excalidraw-diagram-generator in Claude Code o Codex quando il compito riguarda diagrammi e grafici di questo tipo. Idoneità e limiti sono tratti dal file della skill stessa.

Buona applicazione

Processi sequenziali, workflow e alberi decisionali usando i flowchart
Relazioni tra entità, componenti di sistema e dipendenze usando diagrammi di relazione
Gerarchie di concetti, risultati di brainstorming e organizzazione di argomenti usando mappe mentali
Design di sistema, interazioni tra moduli e flusso di dati usando diagrammi di architettura
Workflow cross-funzionali e flussi di processo basati su attori usando diagrammi swimlane di flusso di business

Conosci i limiti

Curve complesse, che vengono semplificate in linee rette o curve di base
Le immagini incorporate nella generazione automatica non sono supportate
Diagrammi con più di 20 elementi, poiché il massimo consigliato è 20 per diagramma
Rilevamento automatico delle collisioni, poiché la skill utilizza invece delle linee guida di spaziatura

Cosa fornire

Descrizione chiara di ciò che deve essere visualizzatoDescrizione in linguaggio naturale del processo, sistema, relazioni o concetti da rappresentare nel diagramma
Identificazione delle entità, dei passaggi o dei concetti chiaveI componenti principali che diventeranno gli elementi del diagramma
Comprensione delle relazioni o del flusso tra gli elementiCome si collegano le entità, la sequenza dei passaggi o la struttura gerarchica

03 Dentro la skill

Regole che la skill excalidraw-diagram-generator impone a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Limiti sul numero di elementi
Passaggi di un diagramma di flusso: 3-10 consigliati, 15 massimo. Entità di relazione: 3-8 consigliate, 12 massimo. Rami di una mappa mentale: 4-6 consigliati, 8 massimo.
Famiglia di font obbligatoria
Tutti gli elementi di testo devono utilizzare fontFamily: 5 (Excalifont) per un aspetto visivo coerente. Questo è obbligatorio nella checklist di validazione.
Linee guida sulla spaziatura
Spazio orizzontale tra gli elementi: 200-300px. Spazio verticale tra le righe: 100-150px. Dimensione del testo: 16-24px per la leggibilità.
Coerenza dello schema colori
Gli elementi primari usano l'azzurro chiaro (#a5d8ff), gli elementi secondari usano il verde chiaro (#b2f2bb), gli elementi importanti/centrali usano il giallo (#ffd43b) e gli avvisi/allarmi usano il rosso chiaro (#ffc9c9).
Gestione della complessità
Se la richiesta dell'utente contiene troppi elementi, suggerire di suddividerla in più diagrammi, concentrarsi prima sugli elementi principali e offrire la creazione di sotto-diagrammi dettagliati.
Direzione del flusso di dati
Nei diagrammi di flusso dati, non rappresentare l'ordine dei processi, ma solo il flusso dei dati. I flussi di dati devono essere mostrati da sinistra a destra o dall'alto a sinistra verso il basso a destra.
Numero massimo di elementi
Il numero di elementi deve essere ragionevole, con meno di 20 elementi per garantire chiarezza. Questo viene verificato nella checklist di validazione prima della consegna.
ID univoci e assenza di sovrapposizioni
Tutti gli elementi devono avere ID univoci e le coordinate devono impedire sovrapposizioni. Questi controlli sono obbligatori prima di consegnare il diagramma.

04 Mettila al lavoro

Installa excalidraw-diagram-generator in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi excalidraw-diagram-generator a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica della CLI skills per skills/excalidraw-diagram-generator/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna allo skill un primo compito su diagrammi e grafici

Adatta questo prompt con i tuoi contenuti e vincoli, poi eseguilo in Claude Code o Codex.

Example prompt

Create a flowchart for user registration

Fonte: esempio SKILL.md (testuale).

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Verificare che tutti gli elementi abbiano ID univoci
Verificare che il testo sia leggibile con dimensione del font di 16 o superiore
Verificare che tutti gli elementi di testo usino fontFamily: 5 (Excalifont)
Confermare che le freccie collegano gli elementi in modo logico e che i colori seguono uno schema coerente

In OpenDesign importi excalidraw-diagram-generator dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
File della skill: skills/excalidraw-diagram-generator/SKILL.md Checksum del contenuto registrato alla verifica; commit 1899b18
License: MIT Da LICENSE.
Stelle del repository: 38.981 Snapshot GitHub acquisita il 2026-09-14 per l'intero repository github/awesome-copilot, che contiene 6 skill in questo catalogo. Non è una valutazione o un conteggio di utilizzo per excalidraw-diagram-generator.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Quando usare questa skillElenca le frasi di attivazione e i tipi di diagramma supportati, tra cui diagrammi di flusso, relazioni, mappe mentali, architetture, DFD, swimlane, classi, sequenze e diagrammi ER
PrerequisitiRichiede una descrizione chiara, l'identificazione delle entità o dei passaggi principali e la comprensione delle relazioni o del flusso
Workflow passo dopo passoProcesso in sei passaggi che va dalla comprensione della richiesta alla scelta del tipo di diagramma, all'estrazione delle informazioni, alla generazione del JSON, alla formattazione dell'output e al salvataggio con le istruzioni
Best practiceLinee guida sul numero di elementi, consigli di layout per spaziatura e posizionamento, schemi di colore, dimensionamento del testo e strategie di gestione della complessità
Esempi di prompt e risposteTre esempi che mostrano un diagramma di flusso per la registrazione utente, le relazioni tra utente-post-commento e una mappa mentale sul machine learning con i passaggi di estrazione
Risoluzione dei problemiSoluzioni per elementi sovrapposti, problemi di adattamento del testo, troppi elementi, layout poco chiaro e colori incoerenti
Tecniche avanzateFormula per il layout a griglia nei diagrammi di relazione, layout radiale per le mappe mentali e schema di generazione automatica degli ID con timestamp e stringa casuale
Formato di outputFornisce sempre il file JSON .excalidraw completo, un riepilogo con il conteggio degli elementi e le istruzioni per l'apertura su excalidraw.com o in VS Code
Checklist di validazioneOtto controlli prima della consegna, tra cui ID univoci, assenza di coordinate sovrapposte, testo leggibile, famiglia di font Excalifont, freccette logiche, colori coerenti, JSON valido e numero di elementi ragionevole
Librerie di icone (miglioramento opzionale)Workflow con script Python per aggiungere icone di servizi cloud dalle librerie Excalidraw, comprese le istruzioni di configurazione e l'uso di add-icon-to-diagram.py e add-arrow.py
RiferimentiDocumentazione dello schema in bundle, specifiche dei tipi di elemento, otto modelli di diagramma, tre script Python per l'integrazione di icone e freccette, e il README degli script
LimitazioniCurve semplificate, nessuna immagine incorporata, massimo 20 elementi consigliati, nessuna rilevazione automatica delle collisioni

Descrizione della skill

Genera diagrammi Excalidraw da descrizioni in linguaggio naturale. Da usare quando viene chiesto di "creare un diagramma", "fare un diagramma di flusso", "visualizzare un processo", "disegnare un'architettura di sistema", "creare una mappa mentale" o "generare un file Excalidraw". Supporta diagrammi di flusso, diagrammi di relazioni, mappe mentali e diagrammi di architettura di sistema. Produce file JSON .excalidraw che possono essere aperti direttamente in Excalidraw.

Descrizione front-matter da SKILL.md. Il file completo è di circa 24.276 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla skill excalidraw-diagram-generator

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Come si apre il file del diagramma generato?

Visiti excalidraw.com e clicchi su Open oppure trascini il file .excalidraw. In alternativa, può usare l'estensione Excalidraw per VS Code per aprirlo direttamente nel suo editor.

Posso usare icone AWS o di servizi cloud nei miei diagrammi?

Sì, la skill supporta le librerie di icone da excalidraw.com/libraries. Scarica un file .excalidrawlib, esegue lo script split-excalidraw-library.py per suddividerlo in icone singole, quindi usa gli script Python add-icon-to-diagram.py e add-arrow.py per aggiungere icone e connessioni al suo diagramma.

Questo approccio evita il consumo di token e garantisce trasformazioni di coordinate precise con generazione automatica di UUID.

Excalidraw Diagram Generator

Esegui excalidraw-diagram-generator su un'attività reale di diagrammi e grafici.

Scarica OpenDesign, importa excalidraw-diagram-generator dal suo link SKILL.md, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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

Cosa fa la skill excalidraw-diagram-generator in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando usare la skill excalidraw-diagram-generator

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che la skill excalidraw-diagram-generator impone a Claude Code e Codex

Limiti sul numero di elementi

Famiglia di font obbligatoria

Linee guida sulla spaziatura

Coerenza dello schema colori

Gestione della complessità

Direzione del flusso di dati

Numero massimo di elementi

ID univoci e assenza di sovrapposizioni