Vai alla guida all’uso
diagramdi Garry Tan

Diagram Skill.

Una skill per Claude Code e Codex dedicata a diagrammi e grafici: trasforma una descrizione o un sorgente Mermaid in un file Excalidraw modificabile più SVG e PNG renderizzati.

  • Diagrams & Data Visualization
  • Diagram
garrytan/gstack · diagram/SKILL.mdSKILL.md
--- name: diagram description: Turn an English description (or mermaid source) into a diagram triplet: the source, an editable .excalidraw file you can open on excalidraw.com, and rendered SVG + PNG. (gstack) --- ## When to invoke this skill ## Step 1 — Author the diagram ## Step 2 — Stage the render bundle (once per session) ## Step 3 — Render the triplet ## Step 4 — Show and deliver ## Rules
Frontespizio e intestazioni di sezione letti dal file upstream il 14/09/2026 · 16.276 caratteri in totale

01 Cosa fa

Cosa fa la Skill dei diagrammi 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

Converte una descrizione in inglese o una fonte Mermaid in una tripletta di diagramma: la fonte Mermaid (.mmd), un file Excalidraw modificabile (.excalidraw) che si apre su excalidraw.com, e output resi in SVG + PNG. Il rendering è completamente offline tramite un server loopback locale — usa il browser Aside quando in esecuzione, altrimenti il browser headless proprio di gstack.

Diagrammi di flusso (graph LR/TD) e diagrammi di sequenza producono scene Excalidraw completamente modificabili con box, freccie e testo reali. Altri tipi di diagrammi Mermaid (state, class, gantt) vengono resi in SVG/PNG ed esportati come un singolo elemento immagine nel file Excalidraw — spostabile e annotabile ma non modificabile a livello di elemento. La fonte Mermaid resta l'unica fonte di verità per iterare.

Che cosa produce

  • Un file di fonte Mermaid (.mmd) che serve come formato di interscambio adatto agli LLM e unica fonte di verità.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Scrivere la Fonte Mermaid

    Scrivere Mermaid conforme alla richiesta dell'utente. Preferire graph LR per pipeline/flussi e graph TD per gerarchie.

  2. 02
    Preparare il Render Bundle Una Volta per Sessione

    Preparare diagram-render.html nella directory di staging del render di gstack sotto ${TMPDIR:-/tmp}/gstack-render, indirizzata per contenuto tramite lo SHA del bundle.

  3. 03
    Rendere la Tripletta con Un Solo Comando

    Scrivere il file .mmd, poi eseguire gstack-render con il bundle preparato.

  4. 04
    Mostrare e Consegnare

    Leggi il PNG inline in modo che l'utente veda il diagramma. Elenca i percorsi della tripletta e specifica che il file .excalidraw si apre su excalidraw.com per la modifica.

02 Trova la tua applicazione

Quando Usare la Skill diagram

Usa la skill diagram in Claude Code o Codex quando il lavoro richiede diagrammi e grafici di questo tipo. Idoneità e limiti sono indicati nel file della skill.

Buona applicazione

  • L'utente chiede di creare un diagramma, disegnare l'architettura, creare un flowchart, diagrammare questo o visualizzare un flusso.
  • Produzione di diagrammi vettoriali nitidi per la documentazione, insieme a output raster per chat, issue o README.
  • Generazione di un file Excalidraw modificabile che l'utente può aprire su excalidraw.com, spostare i box e continuare a lavorare.

Conosci i limiti

  • Diagrammi con più di 15 nodi in un'unica scena — dividere in più diagrammi per la leggibilità.
  • I tipi Mermaid state, class, gantt e altri non-flowchart/non-sequence producono un file Excalidraw spostabile ma non modificabile a livello di elemento.

Cosa fornire

  • Descrizione in inglese o sorgente MermaidL'utente fornisce una descrizione del diagramma da creare, oppure un sorgente Mermaid esistente da renderizzare.

03 Dentro la skill

Regole che la skill del diagramma 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.

  1. Non Consegnare Mai Senza Renderizzare

    Un file .mmd da solo non è un diagramma. Se il rendering è impossibile (bundle mancante o nessun browser disponibile), segnala il blocco e interrompi.

  2. I Flowchart e i Diagrammi di Sequenza Sono Completamente Modificabili

    I flowchart (graph LR/TD) e i diagrammi di sequenza vengono convertiti in scene Excalidraw completamente modificabili con box, freccce e testo reali. Gli altri tipi Mermaid vengono esportati come un unico elemento immagine.

  3. Codifica in Base64 il Sorgente per il Trasporto nel Browser

    Invia il sorgente Mermaid alla pagina di rendering tramite base64 per evitare di interpretare backtick, ${ } e backslash nel sorgente. Non inserire mai il contenuto del file in un template literal JS.

  4. La Directory di Output Segue il Contesto Git

    Scrivi in ./diagrams/ quando la cwd è un repository git (artefatti che l'utente può commit-are), altrimenti in /tmp/gstack-diagrams/. Deriva lo slug dall'argomento in kebab-case, massimo 40 caratteri.

  5. La Larghezza del PNG È Fissa a 1950px

    Il PNG rasterizzato è sempre largo 1950 pixel, equivalente a 300dpi per un posizionamento di 6,5 pollici.

  6. Il Rendering È Completamente Offline

    Il bundle diagram-render è autonomo e servito da loopback. Nessun CDN, nessuna rete.

  7. Ri-renderizza l'Excalidraw Modificato Senza Toccare Mermaid

    Quando l'utente modifica un file .excalidraw e vuole ri-renderizzare, carica il file della scena ed esporta direttamente SVG/PNG — non rigenerare dal sorgente Mermaid.

  8. Preferisci Incorporare .mmd per Obiettivi PDF

    Per i diagrammi destinati a un PDF, ricorda all'utente che make-pdf renderizza nativamente i blocchi Mermaid — incorporare il .mmd in markdown è meglio che incorporare il PNG.

04 Mettila al lavoro

Installare diagram in Claude Code o Codex

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

Aggiungere diagram a Claude Code, Codex o al Proprio Agente

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

Terminal
npx skills add https://github.com/garrytan/gstack --skill diagram

Forma generica del comando CLI skills per diagram/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 flowchart showing the build pipeline for [my TypeScript project]. Include lint, test, build, and deploy stages with their dependencies. Use graph LR layout and output to ./diagrams/.

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:

  • Leggere l'output PNG in linea per verificare che il diagramma sia stato renderizzato correttamente e corrisponda alla richiesta dell'utente.
  • Controllare l'output di gstack-render per righe ERROR: che indicano errori di parsing Mermaid — correggere il .mmd e riprovare se presenti.
  • Ispezionare l'output di PAGE_ERRORS per 'Error processing Mermaid diagram' per confermare quando il convertitore Excalidraw è tornato a un singolo elemento immagine.
  • Verificare che tutte le tre righe OK <path> appaiano nell'output di gstack-render, confermando che i file SVG, PNG ed Excalidraw sono stati scritti.
  • Per i re-render di Excalidraw modificati, ignorare il benigno WorkerInTheMainChunkError in PAGE_ERRORS — l'SVG/PNG sono corretti.

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

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
Garry Tan
Repository
github.com/garrytan/gstack Branch main
File della skill
diagram/SKILL.md Checksum del contenuto registrato alla verifica; commit 71f6048
License
MIT Da LICENSE.
Stelle del repository
132.921 Snapshot GitHub del 14 settembre 2026 per l'intero repository garrytan/gstack, che contiene 7 skill in questo catalogo. Non è un punteggio o un conteggio di utilizzo per diagram.
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 invocare questa skillDa usare per richieste di diagrammi, architetture, flowchart o visualizzazioni; SVG/PNG usano lo stile Mermaid, Excalidraw ha un'estetica disegnata a mano.
  2. Passo 1 — Scrivere il diagrammaScriva il sorgente Mermaid; flowchart e sequence diagram diventano Excalidraw completamente editabili; altri tipi vengono esportati come immagine singola.
  3. Passo 2 — Preparare il bundle di rendering (una volta per sessione)Copi diagram-render.html nella directory di staging di rendering di gstack, indirizzata per contenuto tramite SHA, senza mai sovrascrivere sessioni concorrenti.
  4. Passo 3 — Renderizzare la triplettaScriva il .mmd, esegua gstack-render con il sorgente codificato in base64, generando SVG/PNG/Excalidraw; verifichi la presenza di errori di parsing e PAGE_ERRORS.
  5. Passo 4 — Mostrare e consegnareLegga il PNG in linea, elenchi i percorsi della tripletta, segnali l'editabilità di Excalidraw; per le modifiche, modifichi il .mmd e rirenderizzi.
  6. RegoleNon consegnare mai senza renderizzare; per gli obiettivi PDF ricordi all'utente che make-pdf renderizza i blocchi Mermaid in modo nativo.
  7. Stato di completamentoDONE quando la tripletta è stata consegnata; BLOCKED se il bundle è assente o non è disponibile un browser.
Descrizione della skill
«Trasforma una descrizione in inglese (o codice mermaid) in una tripletta di diagrammi: il codice sorgente, un file .excalidraw modificabile che puoi aprire su excalidraw.com, e il rendering SVG + PNG. (gstack)»

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

06 Prima di installare

Domande sulla skill diagram

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

Cosa succede se il bundle di rendering è assente o non è disponibile un browser?

La skill si interrompe e le indica di costruire il bundle eseguendo bun run build:diagram-render nel repository gstack, oppure di aprire Aside (macOS 15+) se il browser di gstack non è compilato. La skill non installa mai Aside per lei né sostituisce con una CDN o un altro renderer.

Diagram

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

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

Terminale
npx skills add https://github.com/garrytan/gstack --skill diagram

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows