102.3K+Scarica
Vai alla guida all’uso
Baoyu Diagramdi Jim Liu (Baoyu)

Baoyu Diagram Skill.

Mantieni relazioni, etichette e percorsi dei connettori espliciti in un file vettoriale ispezionabile.

  • Diagrammi
  • SVG
  • Progettazione dell'informazione
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Baoyu DiagramSKILL.md
Attività Diagrammi Produce • Un diagramma SVG scalabile con testo e geometria espliciti • Un'esportazione PNG prodotta dal SVG • Un layout in cui gruppi, flussi e legenda corrispondono al sistema fornito Prima di iniziare Un ambiente di testo/codice per SVG; Bun o Bun tramite npx per lo script di conversione PNG fornito.
Sintesi editoriale · fonte rivista 2026-10-07 · non è un esempio generato

01 Funzionalità

Disegna diagrammi tecnici strutturati come SVG

Un flusso di lavoro per creare diagrammi SVG a tema scuro con layout semantici, stratificazione dei connettori e conversione PNG.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Baoyu Diagram scrive diagrammi SVG autonomi per architetture, diagrammi di flusso, sequenze, timeline e altre spiegazioni strutturali, invece di chiedere a un modello di immagini di dipingere le etichette. La fonte fornisce un sistema visivo scuro con colori semantici, tipografia monospazio e indicazioni di layout specifiche per ogni diagramma.

Un dettaglio implementativo distintivo è l'ordine di stratificazione: i connettori sono disegnati dietro maschere opache e riquadri dei componenti traslucidi, così le linee non si vedono attraverso le etichette. Spaziatura, posizione della legenda e padding del viewBox sono trattati come parte del contratto del diagramma. Uno script incluso può poi produrre un PNG a risoluzione più alta per gli strumenti che non accettano SVG.

Risultati attesi

  • Un diagramma SVG scalabile con testo e geometria espliciti
  • Un'esportazione PNG prodotta dal SVG
  • Un layout in cui gruppi, flussi e legenda corrispondono al sistema fornito
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Scegli il modello di relazione

    Decidi se le informazioni sono una sequenza, un flusso decisionale, una gerarchia, un'architettura o un'altra struttura supportata.

  2. 02
    Pianifica nodi e connessioni

    Elenca entità, confini di raggruppamento e direzione del flusso prima di assegnare le posizioni e instradare le frecce.

  3. 03
    Genera e controlla il grafo

    Scrivi il SVG, controlla sovrapposizioni e spazio attorno alle etichette, poi esporta un PNG e verifica che entrambi i formati restino leggibili.

02 Quando usarlo

Quando usarla

Un ambiente di testo/codice per SVG; Bun o Bun tramite npx per lo script di conversione PNG fornito.

Adatta a

  • Documentazione di architetturaUtile per mostrare confini dei servizi, archivi dati e relazioni direzionali con etichette vettoriali modificabili.
  • Spiegazione di processiAdatta a flussi e sequenze in cui la direzione delle frecce e l'ordine dei messaggi contano più dello stile illustrativo.

Limiti da verificare

  • Tema scuro con scelte preciseLa fonte rivista è progettata attorno a una palette scura. Un diverso trattamento di brand richiede un adattamento esplicito.
  • I font potrebbero essere esterniAnche se l'output è un unico file SVG, l'esempio consente un import da Google Fonts. Verifica l'aspetto offline con il fallback previsto o con una strategia di font incorporati.

Fornisci questi input

  • Entità e relazioniFornisci i nodi effettivi, le direzioni delle connessioni e le etichette; non fare affidamento sull'agente per dedurre comportamenti del sistema non documentati.
  • Scopo del diagrammaIndica a quale domanda deve rispondere il diagramma e qual è il livello tecnico del pubblico.
  • Ambiente di outputSpecifica dove verrà usato SVG o PNG, includendo dimensioni e requisiti offline.

03 Decisioni importanti

Decisioni importanti

  1. Stratificazione leggibile dei connettori

    La fonte impedisce esplicitamente che le frecce traspaiano attraverso i riquadri semitrasparenti.

  2. Semantica per tipo di diagramma

    Messaggi di sequenza, decisioni dei diagrammi di flusso e relazioni strutturali usano convenzioni diverse, anziché semplici schede collegate generiche.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Conserva i riferimenti ai tipi di diagramma e lo script di conversione. Verifica il rendering e la disponibilità dei font nella destinazione prevista.

File sorgente originale
https://github.com/JimLiu/baoyu-skills/blob/1567581c26ec29f4216c6e6835415bf30343b0e3/skills/baoyu-diagram/SKILL.md

Un ambiente di testo/codice per SVG; Bun o Bun tramite npx per lo script di conversione PNG fornito.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa baoyu-diagram per creare un SVG che mostri la nostra pipeline di upload: browser, API, coda, worker e object storage. Usa solo le relazioni che indico, raggruppa i componenti lato server, etichetta separatamente il comportamento dei retry e tieni la legenda fuori dal grafo. Verifica direzioni delle frecce e spazio attorno al testo, poi fornisci le versioni SVG e PNG senza aggiungere servizi inventati.

Controlla il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Ogni freccia e ogni gruppo corrispondono alla descrizione del sistema fornita.
  • Etichette, connettori e legende non si sovrappongono e non vengono tagliati.
  • Il SVG si ridimensiona correttamente e il PNG esportato resta leggibile.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata collegata qui sotto. Il comportamento e i requisiti upstream possono cambiare.

Autore della fonte
Jim Liu (Baoyu)
Repository
JimLiu/baoyu-skills
File della skill
skills/baoyu-diagram/SKILL.md
Licenza
MIT
Snapshot rivisto
2026-10-07 · 1567581c26ec
Sintesi editoriale della fonte
Un flusso di lavoro per creare diagrammi SVG a tema scuro con layout semantici, stratificazione dei connettori e conversione PNG.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un segnale di popolarità datato, non un indicatore di uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Usa un'API di generazione di immagini?

Il flusso di lavoro documentato scrive direttamente SVG e lo converte in PNG, a differenza delle skill di illustrazione basate sulla generazione raster.

Posso modificare le etichette in seguito?

Le etichette restano testo SVG nel file sorgente, quindi possono essere modificate con un editor adatto o tramite codice.

Il SVG è completamente offline per impostazione predefinita?

Controlla la gestione dei font. La fonte consente un import esterno da Google Fonts, anche se gli altri elementi del diagramma sono contenuti in un unico file.

OpenDesign

Fai spazio alla prossima iterazione del design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/JimLiu/baoyu-skills/blob/1567581c26ec29f4216c6e6835415bf30343b0e3/skills/baoyu-diagram/SKILL.md