draw-io-diagram-generatordi GitHub

Draw.io Diagram Generator Skill.

Una skill per Claude Code e Codex dedicata a diagrammi e grafici: crea e modifica file di diagrammi draw.io (.drawio, .drawio.svg, .drawio.png).

Diagrams & Data Visualization
Diagram

Scarica OpenDesign Guida all'uso

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

--- name: draw-io-diagram-generator description: Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file. --- ## 1. When to Use This Skill ## 2. Prerequisites ## 3. Step-by-Step Agent Workflow ## 4. Diagram-Type Recipes ## 5. Multi-Page Diagrams ## 6. Editing Existing Diagrams

Frontespizio e intestazioni di sezione letti dal file upstream il 14/09/2026 · 19.536 caratteri in totale

01 Cosa fa

Cosa Fa la Skill draw-io-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

Una skill per creare, modificare e validare file di diagrammi draw.io (.drawio, .drawio.svg, .drawio.png) generando XML mxGraph corretto. Gestisce flowchart, architetture di sistema, diagrammi di sequenza, diagrammi ER e diagrammi delle classi UML tramite i template in assets/templates/, mentre le topologie di rete, BPMN e le mappe mentali richiedono librerie di forme o lavoro manuale.

L'agente riceve un workflow in sei passaggi, una palette di colori semantica con stringhe di stile pronte all'uso, una checklist di validazione pre-consegna e script Python opzionali (validate-drawio.py, add-shape.py). È pensato per agenti che lavorano in un repository dove i diagrammi si trovano insieme al codice che documentano, e i file generati sono pensati per aprirsi immediatamente nell'estensione VS Code hediet.vscode-drawio.

Che cosa produce

Il file .drawio stesso, scritto nel percorso richiesto.
Un riassunto in una frase di ciò che mostra il diagramma.
Stato di validazione, che riporta se lo script di validazione è stato eseguito e ha avuto successo.
Istruzioni di modifica quando è probabile che l'utente personalizzi il diagramma: clicca su una forma per selezionarla, fai doppio clic per modificare l'etichetta, trascina per riposizionare.

Vedi l'esempio di prompt ↗

Come funziona

01
Definisci con Precisione la Richiesta
Il workflow inizia stabilendo il tipo di diagramma, le entità o gli attori, le relazioni, il percorso di output e se il file è nuovo o una modifica.
02
Riutilizza un Template o lo Scheletro Minimo
Quando il tipo di diagramma corrisponde a uno di quelli in assets/templates/, copia quella struttura e sostituisci i valori segnaposto; per layout inediti parti dallo scheletro mxfile minimo valido con le due celle radice.
03
Pianifica il Layout Prima di Scrivere l'XML
Disegna prima righe o livelli, poi distanzia le forme sulla griglia — 40-60px in orizzontale tra forme sulla stessa riga, 80-120px tra le righe dei livelli, su una tela predefinita A4 orizzontale di 1169 x 827 px.
04
Genera l'XML mxGraph
Scrivi le celle di vertici e archi con id univoci e riferimenti parent corrispondenti, ed esegui l'escape dei caratteri speciali XML nelle etichette affinché il file rimanga ben formato.
05
Applica gli Stili dalla Palette
Le stringhe di stile provengono da una palette semantica fissa — primary/info #dae8fc con #6c8ebf, warning/decision #fff2cc con #d6b656, error/end #f8cecc con #b85450 — così lo stesso scopo mantiene lo stesso colore in tutto il progetto.
06
Salva, Valida, Consegna
Scrivi il file nel percorso richiesto con estensione .drawio, esegui opzionalmente il validatore, poi indica all'utente come aprirlo e riassumi cosa contiene il diagramma.

02 Trova la tua applicazione

Quando Usare lo Skill draw-io-diagram-generator

Usa lo skill draw-io-diagram-generator in Claude Code o Codex quando il lavoro riguarda diagrammi e grafici di questo tipo. Ambito e limiti sono tratti dal file dello skill stesso.

Buona applicazione

La richiesta è di produrre o modificare un file .drawio, .drawio.svg o .drawio.png.
Vuoi un file che si apra immediatamente senza correzioni manuali nell'estensione draw.io di VS Code.
Qualcuno chiede di aggiungere un file .drawio, aggiornare un diagramma esistente o visualizzare un flusso.
Il sistema è sufficientemente complesso da meritare più pagine in un unico file.
Devi inserire una forma in un file esistente senza modificare manualmente l'XML grezzo.

Conosci i limiti

Le topologie di rete e i diagrammi BPMN non hanno un template incluso — il file rimanda invece alla libreria di forme per router, server, firewall e subnet.
Le mappe mentali sono elencate come lavoro manuale: un argomento centrale con rami radiali, senza un template da copiare.
Un diagramma il cui mxGraphModel è codificato in base64 risulta compresso e non viene gestito così com'è; deve essere ri-esportato come XML non compresso dall'app web draw.io.

Cosa fornire

Il tipo di diagrammaIndica il tipo di diagramma desiderato — flowchart, architettura, UML, ER, sequenza, rete — oppure lascia che la skill lo deduca dal contesto.
Entità, attori, classi o tabelleSpecifica i componenti principali che il diagramma dovrebbe contenere, poiché questi diventano le celle dei vertici.
Relazioni, direzione e cardinalitàDescrivi come si collegano i componenti, in quale direzione e con quale cardinalità, in modo da poter scegliere correttamente gli stili degli archi e le frecce crow's foot.
Percorso di outputIndica dove deve essere salvato il file .drawio; i diagrammi sono pensati per stare accanto al codice che documentano.
Se il file esiste giàCreare un nuovo file e modificarne uno esistente sono percorsi diversi — una modifica inizia leggendo le celle, le posizioni e la gerarchia attuali.

03 Dentro la skill

Regole che la Skill draw-io-diagram-generator Fornisce 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.

Le Celle Radice 0 e 1 Sono Non Negoziabili
Gli id 0 e 1 sono sempre richiesti e devono essere le prime due celle in un diagramma, e non devono mai essere riutilizzati per altro.
Un Id Univoco per Cella
Ogni id di cella deve essere univoco a livello globale all'interno del file, quindi le nuove forme aggiunte a un diagramma esistente non devono entrare in conflitto con gli id già in uso.
Ogni Vertice Porta con Sé una Geometria
Una cella vertice non è valida senza una mxGeometry figlia che contenga x, y, width e height con as="geometry".
I Bordi si Collegano a Id Reali
Un bordo richiede attributi source e target che corrispondano a id di vertici esistenti.
Html=1 per le Etichette HTML
Qualsiasi etichetta contenente tag HTML (b, i, br) richiede html=1 nello stile della cella, altrimenti i tag vengono mostrati come testo con escape nel diagramma.
Aggancia alla Griglia da 10px
Tutte le coordinate dovrebbero essere divisibili per 10 in modo che le forme si allineino in modo netto.
Un Titolo per Ogni Pagina, Sempre
Ogni pagina riceve una cella di testo per il titolo in alto, usando lo stile text con fontSize=18 e fontStyle=1 per il grassetto.
Nomina i File in kebab-case
I file dei diagrammi seguono la denominazione kebab-case, come order-service-flow.drawio o database-schema.drawio, e risiedono insieme al codice che documentano in docs/ o architecture/.

04 Mettila al lavoro

Installa draw-io-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 draw-io-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 draw-io-diagram-generator

Forma generica del comando CLI skills per skills/draw-io-diagram-generator/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna allo skill un primo compito su diagrammi e grafici

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Create a .drawio sequence diagram for [the checkout flow]. [Client] should send a synchronous POST /orders message to [API Server], which returns 201 Created — include the lifelines and activation boxes. Save it to [docs/checkout-flow.drawio] with a title cell at the top of the page.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

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

Il file inizia con un elemento radice mxfile.
Tutti i valori id delle celle sono univoci all'interno di ciascun diagramma.
Ogni cella vertice ha vertex="1" e una mxGeometry figlia con as="geometry".
Ogni cella eccetto id=0 ha un parent che punta a un id esistente.
L'XML è ben formato — nessun tag non chiuso e nessuna e commerciale o parentesi angolare senza escape nei valori degli attributi.
Esegui il validatore automatico sul file completato.

In OpenDesign importa draw-io-diagram-generator dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo 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/draw-io-diagram-generator/SKILL.md Checksum del contenuto registrato alla verifica; commit 1899b18
License: MIT Da LICENSE.
Stelle del repository: 38.981 Snapshot GitHub del 14 settembre 2026 per l'intero repository github/awesome-copilot, che contiene 6 skill in questo catalogo. Non è un punteggio o un conteggio di utilizzo per draw-io-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

1. Quando Usare Questa SkillFrasi trigger per caricarla, più una tabella con otto tipi di diagramma e i relativi template.
2. PrerequisitiInstalla hediet.vscode-drawio, le estensioni supportate, e opzionalmente Python 3.8+ per gli script.
3. Workflow dell'Agente Passo per PassoSei passaggi ordinati: comprendere, scegliere il template, pianificare il layout, generare l'XML, applicare lo stile, validare.
4. Ricette per Tipo di DiagrammaSnippet XML e stringhe di stile per flowchart, architettura, sequenza, ER e classi UML.
5. Diagrammi Multi-PaginaDiversi elementi diagramma in un unico mxfile; ogni pagina ha il proprio namespace di id delle celle.
6. Modifica di Diagrammi EsistentiLeggi prima, trova la pagina, assegna id senza collisioni, rispetta i container, verifica gli edge.
7. Best PracticeAllineamento alla griglia, etichette concise, coerenza della palette, dimensione della pagina, denominazione in kebab-case e posizionamento.

Descrizione della skill

«Usa per creare, modificare o generare file di diagrammi draw.io (.drawio, .drawio.svg, .drawio.png). Copre la creazione XML mxGraph, le librerie di forme, le stringhe di stile, i diagrammi di flusso, l'architettura di sistema, i diagrammi di sequenza, i diagrammi ER, i diagrammi di classi UML, la topologia di rete, la strategia di layout, l'estensione VS Code hediet.vscode-drawio e l'intero flusso di lavoro dell'agente dalla richiesta a un file pronto da aprire.»

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

Draw.io Diagram Generator

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

Scarica OpenDesign, importa draw-io-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 draw-io-diagram-generator

Cosa Fa la Skill draw-io-diagram-generator in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Usare lo Skill draw-io-diagram-generator

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che la Skill draw-io-diagram-generator Fornisce a Claude Code e Codex

Le Celle Radice 0 e 1 Sono Non Negoziabili

Un Id Univoco per Cella

Ogni Vertice Porta con Sé una Geometria

I Bordi si Collegano a Id Reali

Html=1 per le Etichette HTML

Aggancia alla Griglia da 10px

Un Titolo per Ogni Pagina, Sempre

Nomina i File in kebab-case