Diagrammi e Illustrazioni: Spiegare il Funzionamento di un Meccanismo

Un diagramma mostra come parti denominate si collegano, cosa si muove tra di esse e quale risultato producono queste relazioni. Usalo quando i lettori hanno bisogno di diverse relazioni simultaneamente, mantenendo comunque la spiegazione disponibile come testo.

Come una pagina diventa recuperabile: le pagine sorgente attraversano estrazione e normalizzazione prima che i loro passaggi utili raggiungano un indice delle risposte.

1. Pagine sorgente forniscono HTML, intestazioni, immagini e campi strutturati.
2. Estrazione e normalizzazione rimuove il rumore di presentazione preservando testo, gerarchia, entità e relazioni.
3. Indice delle risposte memorizza passaggi recuperabili che possono essere abbinati a una domanda successiva.
4. La prima freccia porta la rappresentazione della pagina in elaborazione; la seconda trasporta passaggi normalizzati e ricercabili nell’indice.

Il disegno rende il flusso visibile a colpo d’occhio. La didascalia e la spiegazione numerata veicolano lo stesso significato senza l’immagine. Questo contratto a due canali distingue un diagramma esplicativo da un’illustrazione decorativa.

Perché questo elemento è importante

La prosa può costringere i lettori a ricordare diverse parti prima di rivelare come si relazionano. Un diagramma esternalizza quel modello: i nodi mostrano le parti, i connettori mostrano le relazioni e i confini mostrano l’ambito. È più utile quando l’ordine da solo è insufficiente. Una frase può dire che un crawler recupera una pagina, un parser estrae il contenuto e un indice memorizza i passaggi; un diagramma può anche mostrare punti di errore, percorsi paralleli e feedback. Riduce lo sforzo di ricostruzione, non la necessità di una formulazione precisa.

Un diagramma può anche trarre in inganno più rapidamente della prosa. Una freccia non etichettata può significare causalità, trasferimento, sequenza o associazione; un ciclo può far falsamente pensare a un feedback automatico. Ogni relazione necessita di un significato esplicito e difendibile.

L’estraibilità automatica è la capacità del software di isolare un’unità di contenuto senza perderne il significato. Non ci si può aspettare che i sistemi di ricerca, gli strumenti di traduzione, i lettori di schermo e i sistemi di recupero AI ricostruiscano un meccanismo dai pixel. Il riconoscimento ottico dei caratteri può recuperare le etichette, ma non ciò che significa una freccia o un confine. Un titolo, una didascalia, nodi e connettori strutturati e un equivalente testuale visibile rendono il meccanismo estraibile senza visione artificiale.

Le regole di scrittura degli elementi condivise stabiliscono la regola di precedenza: scegli un elemento in base al compito che il passaggio svolge, non al suo titolo o aspetto. Questa pagina ha precedenza per i campi specifici dei diagrammi, i limiti di densità, i requisiti di equivalente testuale e il comportamento di accessibilità. Se il compito del contenuto è spiegare visivamente un meccanismo, usa l’elemento diagramma piuttosto che un’immagine generica con una didascalia improvvisata.

Quando usarlo

Usa un diagramma quando la conclusione dipende dalla visione di almeno due relazioni insieme. Usi validi includono un processo con ramificazioni o feedback, un sistema i cui componenti scambiano dati, un ciclo di vita che ritorna a uno stato precedente, una catena causale con un fattore interveniente, o un modello concettuale i cui confini sono rilevanti. Il lettore dovrebbe essere in grado di rispondere a una domanda concreta dal disegno, come “Dove può fallire questo processo?” oppure “Quale componente invia il record normalizzato?”

Applica prima il test della prosa: scrivi il meccanismo in tre-otto frasi. Se non ha rinvii incrociati, ramificazioni, cicli o relazioni spaziali, probabilmente la prosa è migliore. Un diagramma si guadagna il suo spazio quando un equivalente testuale accurato è cognitivamente costoso da assemblare.

Quasi errori sono comuni:

• Usa un elenco di passaggi per azioni eseguibili; le frecce non possono sostituire prerequisiti, controlli di successo o istruzioni di recupero.
• Usa una tabella comparativa per attributi ripetuti tra alternative. Un’immagine non etichettata a due assi nasconde i criteri.
• Usa un albero decisionale per percorsi scelti da condizioni esplicite. Un flusso generale spiega il movimento, non una decisione.
• Usa uno screenshot annotato per individuare i controlli in un’interfaccia reale. Una ridisegnazione perde quella evidenza.
• Usa un grafico quando la scala quantitativa codifica valori. Una freccia decorativa verso l’alto non deve implicare una crescita misurata.
• Usa un’immagine in linea per raffigurare un oggetto, un luogo o un risultato piuttosto che un meccanismo.

Non usare un diagramma come decorazione o ripetizione racchiusa in una scatola. Segnala le relazioni ipotetiche, contestate, condizionali o semplificate sia nell’immagine che nel testo.

Dove posizionarlo

Posiziona il diagramma dopo il paragrafo che introduce il meccanismo e la domanda. Seguilo con l’equivalente testuale visibile, quindi interpretazione, evidenze, limitazioni o azioni.

Mantieni titolo, immagine, didascalia, legenda ed equivalente testuale in un’unica area figura. Nulla deve separare l’immagine dalla sua spiegazione. Metti un equivalente più lungo direttamente dopo di essa sotto “In testo”.

Un diagramma non può essere posizionato direttamente accanto a un altro diagramma a larghezza intera, grafico, video, galleria di immagini, tabella densa o screenshot. Inserisci della prosa esplicativa prima del successivo elemento visivo denso. Non posizionarlo all’interno di una cella di tabella, voce di elenco, pannello a soffietto, callout, scheda cliccabile o figura.

Per le procedure, metti una panoramica prima della prima azione, non tra passaggi accoppiati. Negli argomenti, posizionalo dopo l’affermazione del meccanismo e prima dell’evidenza. Nelle pagine di prodotto, posizionalo dopo la spiegazione della funzionalità, mai sopra la risposta diretta solo per sembrare tecnico.

Anatomia

L’anatomia descrive il significato, non lo stile. Ombre dei riquadri, stile dell’illustrazione, spessore delle frecce, raggio degli angoli e colore di sfondo appartengono al renderer o alla direzione artistica.

1. Titolo: Nomina il meccanismo o la domanda in tre-dieci parole.
2. Dichiarazione di ambito: Definisce ciò che il diagramma include, esclude o semplifica in una frase.
3. Nodo: Rappresenta un componente, stato, attore, input o risultato.
4. Etichetta del nodo: Usa un sintagma nominale concreto, non un’abbreviazione non spiegata.
5. Connettore: Rappresenta una relazione dichiarata tra due nodi.
6. Etichetta del connettore: Nomina quella relazione con un verbo o un oggetto trasferito, come “invia eventi” o “produce passaggi”.
7. Indicatore di direzione: Mostra la direzione di lettura o trasferimento senza affidarsi solo al posizionamento.
8. Confine: Raggruppa elementi che condividono proprietà, fase, ambiente o ambito.
9. Legenda: Definisce qualsiasi modello di linea, simbolo o colore che cambia significato.
10. Didascalia: Indica la conclusione principale anziché ripetere il titolo.
11. Nota sulla fonte: Identifica l’evidenza o il proprietario quando il modello deriva da ricerca, policy o un sistema proprietario.
12. Equivalente testuale: Ripete ogni nodo, connettore, direzione, condizione, confine ed eccezione che veicola significato, in ordine leggibile.

Esempi di progettazione

Ogni variante richiede un titolo, una didascalia, un equivalente testuale e significati espliciti dei connettori. Scegli la variante più semplice che risponde alla domanda.

Flusso di processo lineare

Usa da tre a sette fasi quando il meccanismo si muove principalmente in una direzione. Etichetta ciò che si muove tra le fasi; non affidarti solo alle frecce. Se il lettore deve eseguire le fasi, abbina la panoramica a un elenco di passaggi separato.

Mappa di sistema

Usa da tre a nove componenti quando proprietà, interfacce o scambio di dati sono più importanti della cronologia. I confini identificano ambienti o team; le linee che si incrociano segnalano la necessità di raggruppare o dividere la vista.

Catena causale

Usala per una causa, un meccanismo intermedio e un risultato. Segnala condizioni e incertezza. Le frecce non devono mai trasformare la correlazione in causalità; la prosa e le fonti devono supportare ogni affermazione causale.

Ciclo di vita

Usa un ciclo solo quando l’output diventa un input successivo. Numera le fasi e indica il trigger di riavvio; un cerchio decorativo implica falsamente ripetizione.

Panoramica con riquadro di dettaglio

Usa un riquadro quando un componente necessita di dettaglio ma dipende dal contesto del sistema. Ripeti la sua etichetta. Più di un riquadro di solito richiede un diagramma separato.

Su mobile, impila i diagrammi lineari in ordine di lettura. Una mappa di sistema può diventare una panoramica semplificata più relazioni numerate. Non richiedere mai scorrimento orizzontale della pagina o zoom per comprendere il significato.

Parametri

Il modello di contenuto memorizza il meccanismo. Coordinate, colori, dimensioni dei caratteri, scelte di icone, instradamento dei connettori e punti di interruzione reattivi appartengono al renderer o all’opera grafica sorgente.

source è obbligatorio per ricerche esterne, standard, processi regolamentati o modelli adattati. Ogni nodo e connettore deve apparire nell’equivalente testuale; la prosa può combinare ripetizioni.

Sintassi ed esempi di codice

Le tre mappature preservano gli stessi campi. I percorsi delle risorse di esempio descrivono il contratto di produzione; non devono apparire come riferimenti a immagini reali finché quei file non esistono.

Direttiva Markdown portabile

:::diagram{variant=process src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Flusso a tre fasi dalle pagine sorgente attraverso estrazione e normalizzazione fino a un indice delle risposte"}
## Come una pagina diventa recuperabile

Il modello copre l'elaborazione dei contenuti dopo che una pagina è stata recuperata.

::item{id=source-pages}
### Pagine sorgente

Forniscono HTML, intestazioni, immagini e campi strutturati.
::
::item{id=extract-normalize}
### Estrazione e normalizzazione

Preservano testo utile, gerarchia, entità e relazioni.
::
::item{id=answer-index}
### Indice delle risposte

Memorizza passaggi che possono essere abbinati a una domanda.
::
::relationship{from=source-pages to=extract-normalize label="invia rappresentazione della pagina" kind=flow}
::relationship{from=extract-normalize to=answer-index label="produce passaggi recuperabili" kind=flow}

I passaggi normalizzati raggiungono l'indice delle risposte solo dopo che la struttura utile è stata preservata.

### In testo

Le pagine sorgente inviano la loro rappresentazione della pagina all'estrazione e normalizzazione. Questa fase preserva testo utile, gerarchia, entità e relazioni, quindi produce passaggi recuperabili per l'indice delle risposte.
:::

La prima intestazione corrisponde a title; il paragrafo successivo corrisponde a scope; le direttive degli elementi definiscono i nodi; le direttive delle relazioni definiscono i connettori; il paragrafo dopo di esse corrisponde a caption; e la sezione In testo corrisponde a textEquivalent.

Mappatura shortcode Hugo

{{< diagram variant="process" src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Flusso a tre fasi dalle pagine sorgente attraverso estrazione e normalizzazione fino a un indice delle risposte" >}}
## Come una pagina diventa recuperabile
{{< diagram-node id="source-pages" label="Pagine sorgente" >}}Fornisce il contenuto della pagina.{{< /diagram-node >}}
{{< diagram-node id="extract-normalize" label="Estrazione e normalizzazione" >}}Preserva la struttura utile.{{< /diagram-node >}}
{{< diagram-node id="answer-index" label="Indice delle risposte" >}}Memorizza passaggi.{{< /diagram-node >}}
{{< diagram-relationship from="source-pages" to="extract-normalize" label="invia rappresentazione della pagina" kind="flow" >}}
{{< diagram-relationship from="extract-normalize" to="answer-index" label="produce passaggi recuperabili" kind="flow" >}}
### In testo
Le pagine sorgente inviano contenuti per l'estrazione e la normalizzazione, che produce passaggi per l'indice delle risposte.
{{< /diagram >}}

I parametri nominati vengono utilizzati esclusivamente. Questa è una specifica di adattatore portabile, non un’affermazione che questi shortcode siano registrati nel tema corrente. Fino a quando non esiste un renderer approvato, pubblica una figura semantica attraverso il canale di immagini consolidato e mantieni il suo equivalente testuale nel contenuto normale della pagina.

Blocco WordPress

<!-- wp:amicited/diagram {"variant":"process","src":"/cdn-assets/seo-playbook/examples/content-pipeline.svg","alt":"Flusso a tre fasi dalle pagine sorgente attraverso estrazione e normalizzazione fino a un indice delle risposte"} -->
<figure>
  <h2>Come una pagina diventa recuperabile</h2>
  <img src="/cdn-assets/seo-playbook/examples/content-pipeline.svg"
       alt="Flusso a tre fasi dalle pagine sorgente attraverso estrazione e normalizzazione fino a un indice delle risposte">
  <figcaption>I passaggi normalizzati raggiungono l'indice delle risposte solo dopo che la struttura utile è stata preservata.</figcaption>
  <div class="diagram-text-equivalent">
    <h3>In testo</h3>
    <p>Le pagine sorgente inviano contenuti per l'estrazione e la normalizzazione, che produce passaggi per l'indice delle risposte.</p>
  </div>
</figure>
<!-- /wp:amicited/diagram -->

Memorizza nodi e connettori come attributi del blocco. L’esportazione deve conservarli insieme all’equivalente testuale; un’immagine appiattita non è un contenuto portabile.

Esempi

Buono: il disegno e la prosa sostengono la stessa affermazione

La versione buona risponde a una domanda: come una domanda inviata diventa una risposta supportata. Quattro nodi concreti seguono una direzione chiara. Le etichette dei connettori distinguono l’instradamento dal recupero e dalla composizione. Un percorso di feedback tratteggiato è definito nella legenda come revisione umana opzionale, quindi non implica un ciclo automatico. La didascalia indica la conclusione e il testo adiacente nomina ogni fase e trasferimento.

Questo offre ai lettori visivi un modello rapido mentre il testo veicola lo stesso meccanismo e la stessa qualificazione. Le macchine ricevono relazioni nominate senza dover indovinare dalle coordinate.

Cattivo: un groviglio persuasivo senza significato dichiarato

La versione cattiva mette “AI” al centro e lo circonda con nomi vaghi come contenuto, dati, utenti, fiducia, entrate e crescita. Frecce non etichettate puntano in entrambe le direzioni, ma il lettore non può capire se significano causalità, scambio, sequenza o associazione. Il colore sembra significativo ma non ha legenda. La freccia di crescita implica miglioramento senza dati. Le piccole etichette diventano illeggibili su mobile e nessuna prosa spiega il meccanismo presunto.

Riparalo scegliendo una domanda, rimuovendo i nodi irrilevanti, nominando i connettori, separando le cause dalle associazioni e aggiungendo ambito, didascalia, equivalente testuale e fonti. Se rimangono solo benefici, scrivi un elenco.

Markup Schema e accessibilità

Un diagramma non ha un tipo Schema.org dedicato né idoneità indipendente per risultati avanzati. Un diagramma significativo può popolare Article.image o un ImageObject con URL accurato, didascalia, dimensioni, creatore, credito, copyright e dati di licenza. Non inventare metadati o un vocabolario di relazioni; nodi e connettori rimangono contenuto visibile.

Usa <figure> per immagine e didascalia. Il testo alternativo identifica il meccanismo e la conclusione anziché trascriverli. Punta a 40–180 caratteri ed evita “diagramma di.” Esempio: “Flusso a tre fasi dalle pagine sorgente attraverso estrazione e normalizzazione fino a un indice delle risposte.”

L’equivalente testuale visibile include ogni nodo, connettore, condizione, trigger di feedback, confine, legenda ed eccezione significativi. Non nasconderlo in ARIA, testo al passaggio del mouse, metadati o un pannello a soffietto chiuso.

Abbina colore, icone, pattern, forma e posizione a etichette testuali. Mantieni contrasto, punte di freccia visibili e un ordine di lettura corrispondente all’equivalente testuale. Il testo SVG reale è utile, ma non sostituisce la prosa visibile.

A 320 pixel CSS, impila, semplifica o renderizza una vista mobile dagli stessi dati. Non rimuovere mai nodi, ritagliare connettori o cambiare l’ordine di lettura. Il testo circostante deve mantenere tutto il significato essenziale senza zoom.

Regole di scrittura

Scrivi e verifica prima il testo, poi disegna solo le relazioni che esso contiene. Questo impedisce che la rifinitura visiva introduca affermazioni non supportate.

• Dai al diagramma una sola domanda o meccanismo. Non combinare architettura, flusso di lavoro, benefici e roadmap in un’unica tela.
• Usa 3–9 nodi primari, con 12 come massimo. Suddividi un modello sovraccarico in figure di panoramica e dettaglio.
• Etichetta i nodi con 1–6 parole concrete. Definisci le abbreviazioni al primo utilizzo nel testo della pagina ed evita nomi interni di team che i lettori non possono interpretare.
• Etichetta ogni connettore che veicola significato con una frase verbale o un oggetto trasferito di 1–6 parole. “Invia eventi” è più chiaro di “integrazione”.
• Mantieni la didascalia tra 8–30 parole e falla indicare la conclusione o relazione che il lettore dovrebbe trattenere.
• Mantieni la dichiarazione di ambito in una frase. Indica esclusioni o semplificazioni quando ometterle potrebbe cambiare l’interpretazione.
• Mantieni l’equivalente testuale tra 50–250 parole a meno che la precisione non richieda di più.
• Usa un tono esplicativo e neutro. Separa ciò che il sistema fa da ciò che potrebbe fare, dovrebbe fare o si ipotizza faccia.
• Segnala l’incertezza con parole come “potrebbe”, “condizionale” o “proposto”, e definisci i percorsi tratteggiati nella legenda.
• Non inserire mai paragrafi, citazioni, URL grezzi, slogan promozionali, evidenze precise o istruzioni complete all’interno dell’opera grafica. Mettili nel testo selezionabile della pagina.
• Non usare mai icone senza etichette, colore senza un secondo segnale, o frecce senza significato dichiarato.
• Non implicare mai scala, quantità, forza causale, certezza o crescita misurata attraverso dimensione o direzione a meno che l’evidenza e la legenda supportino quella codifica.
• Non pubblicare mai un percorso di risorsa inesistente; mantieni le opere in sospeso come commento di acquisizione con screenshotsPending = true.

Tipi di articolo che lo utilizzano

Il frontmatter postTypes è il collegamento registrato. Ogni tipo di articolo elencato utilizza lo stesso contratto del diagramma ma con una soglia diversa.

Lista di controllo QA

• Scopo: Un meccanismo o flusso è più facile da comprendere visivamente che dalla sola prosa.
• Testo prima: La spiegazione revisionata precede l’opera grafica; nessuna relazione non supportata è stata aggiunta.
• Ambito: Titolo e ambito rendono chiari confini, semplificazioni ed esclusioni.
• Nodi: Di solito sono 3–9, ciascuno concreto e necessario.
• Connettori: Ciascuno ha una direzione e un’etichetta; stili e colori hanno una legenda.
• Affermazioni: Causalità, automazione, scala, forza, certezza e crescita sono mostrate solo quando l’evidenza le supporta.
• Equivalente testuale: Il testo visibile include ogni nodo, relazione, condizione, confine, legenda ed eccezione.
• Didascalia: Indica la conclusione in 8–30 parole.
• Accessibilità: Il colore non è l’unico segnale; contrasto, punte di freccia, testo alternativo e ordine di lettura funzionano.
• Mobile: Il significato è preservato a 320 pixel CSS senza scorrimento a livello di pagina o zoom obbligatorio.
• Posizionamento: Il contesto introduttivo precede il diagramma; didascalia ed equivalente testuale rimangono allegati; elementi visivi densi concorrenti non sono affiancati.
• Fonte: Ricerca, standard, processi regolamentati e modelli adattati hanno una nota visibile accurata sulla fonte o sulla proprietà.
• Portabilità: Tutte le mappature preservano titolo, nodi, connettori, didascalia ed equivalente testuale.
• Sicurezza della risorsa: Il file esiste prima che un percorso live sia pubblicato, i diritti sono documentati e le opere in sospeso rimangono come commento SCREENSHOT.
• Precedenza: Il blocco è tipizzato come diagramma perché il suo scopo corrisponde a questo elemento, non perché un’immagine generica sembrava simile.

FAQ

Il template dell’academy rende le cinque domande revisionate memorizzate nel frontmatter [[faq]] di questa pagina. Coprono la soglia per l’uso di un diagramma, l’equivalente testuale obbligatorio, l’ambito del testo alternativo, i dati strutturati e i limiti dei nodi.