Diagrame și ilustrații: explică modul în care funcționează un mecanism

O diagramă arată cum se conectează părțile denumite, ce se mișcă între ele și ce rezultat produc aceste relații. Folosește-o atunci când cititorii au nevoie de mai multe relații simultan, păstrând în același timp explicația disponibilă ca text.

Cum devine o pagină recuperabilă: paginile sursă trec prin extracție și normalizare înainte ca pasajele lor utile să ajungă într-un index de răspunsuri.

1. Paginile sursă oferă HTML, titluri, imagini și câmpuri structurate.
2. Extrage și normalizează elimină zgomotul de prezentare, păstrând în același timp textul, ierarhia, entitățile și relațiile.
3. Indexul de răspunsuri stochează pasaje recuperabile care pot fi potrivite cu o întrebare ulterioară.
4. Prima săgeată transportă reprezentarea paginii în procesare; a doua transportă pasaje normalizate și căutabile în index.

Desenul face fluxul vizibil dintr-o privire. Legenda și explicația numerotată transmit același sens fără imagine. Acest contract pe două canale distinge o diagramă explicativă de o lucrare artistică decorativă.

De ce contează acest element

Textul narativ poate forța cititorii să rețină mai multe părți înainte de a dezvălui cum se relaționează între ele. O diagramă externalizează acel model: nodurile arată părțile, conectorii arată relațiile, iar limitele arată domeniul de aplicare. Este cel mai utilă atunci când ordinea singură este insuficientă. O propoziție poate spune că un crawler preia o pagină, un parser extrage conținutul și un index stochează pasaje; o diagramă poate arăta și puncte de eșec, rute paralele și feedback. Reduce efortul de reconstrucție, nu nevoia de formulări precise.

O diagramă poate induce în eroare mai repede decât textul narativ. O săgeată neetichetată poate însemna cauzalitate, transfer, secvență sau asociere; o buclă poate sugera fals un feedback automat. Fiecare relație are nevoie de un sens explicit și apărabil.

Extractibilitatea automată este capacitatea software-ului de a izola o unitate de conținut fără a-i pierde sensul. Sistemele de căutare, instrumentele de traducere, cititoarele de ecran și sistemele AI de regăsire nu pot fi așteptate să reconstruiască un mecanism din pixeli. Recunoașterea optică a caracterelor poate recupera etichetele, dar nu și ce înseamnă o săgeată sau o limită. Un titlu, o legendă, noduri și conectori structurați și un echivalent textual vizibil fac mecanismul extractibil fără viziune computerizată.

Regulile de redactare a elementelor comune stabilesc regula de precedență: alege un element după funcția pe care o îndeplinește pasajul, nu după titlul sau aspectul său. Această pagină are prioritate pentru câmpurile specifice diagramelor, limitele de densitate, cerințele de echivalent textual și comportamentul de accesibilitate. Dacă scopul conținutului este de a explica un mecanism vizual, folosește elementul diagramă în locul unei imagini generice cu o legendă improvizată.

Când să o folosești

Folosește o diagramă atunci când concluzia depinde de vizualizarea a cel puțin două relații împreună. Utilizări solide includ un proces cu ramificări sau feedback, un sistem ale cărui componente schimbă date, un ciclu de viață care revine la o stare anterioară, un lanț cauzal cu un factor intervenient sau un model conceptual ale cărui limite contează. Cititorul ar trebui să poată răspunde la o întrebare concretă din desen, cum ar fi „Unde poate eșua acest proces?” sau „Care componentă trimite înregistrarea normalizată?”

Aplică mai întâi testul textului narativ: scrie mecanismul în trei până la opt propoziții. Dacă nu are nicio referință încrucișată, ramificare, buclă sau relație spațială, textul narativ este probabil mai potrivit. O diagramă își merită locul atunci când asamblarea unui echivalent textual corect este costisitoare din punct de vedere cognitiv.

Aproape de limită sunt frecvente:

• Folosește o listă de pași pentru acțiuni executabile; săgețile nu pot înlocui prerechizitele, verificările de succes sau instrucțiunile de recuperare.
• Folosește un tabel comparativ pentru atribute repetate între alternative. Un desen pe două axe neetichetat ascunde criteriile.
• Folosește un arbore decizional pentru rute alese prin condiții explicite. Un flux general explică mișcarea, nu o decizie.
• Folosește o captură de ecran adnotată pentru a localiza comenzi într-o interfață reală. O redesenare pierde acea dovadă.
• Folosește un grafic atunci când scara cantitativă codifică valori. O săgeată ascendentă decorativă nu trebuie să sugereze o creștere măsurată.
• Folosește o imagine în linie pentru a reda un obiect, loc sau rezultat, nu un mecanism.

Nu folosi o diagramă ca decor sau repetiție încercuită. Marchează relațiile ipotetice, disputate, condiționate sau simplificate atât în imagine, cât și în text.

Unde să o plasezi

Plasează diagrama după paragraful care introduce mecanismul și întrebarea. Urmează cu echivalentul textual vizibil, apoi interpretarea, dovezile, limitările sau acțiunile.

Păstrează titlul, imaginea, legenda, cheia și echivalentul textual într-o singură regiune de tip figură. Nimic nu poate separa imaginea de explicația sa. Plasează un echivalent mai lung direct după aceasta, sub „În text”.

O diagramă nu poate sta direct lângă o altă diagramă pe toată lățimea, un grafic, un videoclip, o galerie de imagini, un tabel dens sau o captură de ecran. Inserează text explicativ înaintea următorului element vizual dens. Nu o plasa în interiorul unei celule de tabel, al unui element de listă, al unui acordeon, al unui callout, al unui card clicabil sau al unei figuri.

Pentru proceduri, pune o imagine de ansamblu înaintea primei acțiuni, nu între pași cuplați. În argumentări, plaseaz-o după enunțarea mecanismului și înaintea dovezilor. Pe paginile de produs, plaseaz-o după explicația capacității, niciodată deasupra răspunsului direct doar pentru a părea tehnică.

Anatomie

Anatomia descrie sensul, nu stilizarea. Umbrele casetelor, stilul ilustrației, grosimea săgeților, raza colțurilor și culoarea de fundal aparțin instrumentului de redare sau direcției artistice.

1. Titlu: Denumește mecanismul sau întrebarea în trei până la zece cuvinte.
2. Enunț de domeniu: Definește într-o singură propoziție ce include, exclude sau simplifică diagrama.
3. Nod: Reprezintă o componentă, o stare, un actor, o intrare sau un rezultat.
4. Eticheta nodului: Folosește o frază nominală concretă, nu o abreviere neexplicată.
5. Conector: Reprezintă o relație declarată între două noduri.
6. Eticheta conectorului: Denumește acea relație cu un verb sau un obiect transferat, cum ar fi „trimite evenimente” sau „produce pasaje”.
7. Marcator de direcție: Arată direcția de citire sau de transfer fără a se baza doar pe plasare.
8. Limită: Grupează elemente care împart proprietatea, faza, mediul sau domeniul de aplicare.
9. Cheie: Definește orice model de linie, simbol sau culoare care schimbă sensul.
10. Legendă: Enunță concluzia principală, fără a repeta titlul.
11. Notă sursă: Identifică dovada sau proprietarul atunci când modelul este derivat din cercetare, politici sau un sistem proprietar.
12. Echivalent textual: Reformulează fiecare nod purtător de sens, conector, direcție, condiție, limită și excepție într-o ordine lizibilă.

Exemple de proiectare

Fiecare variantă necesită un titlu, o legendă, un echivalent textual și sensuri explicite ale conectorilor. Alege cea mai simplă variantă care răspunde întrebării.

Flux de proces liniar

Folosește între trei și șapte etape atunci când mecanismul se deplasează în principal într-o singură direcție. Etichetează ce se mișcă între etape; nu te baza doar pe săgeți. Dacă cititorul trebuie să execute etapele, asociază imaginea de ansamblu cu o listă separată de pași.

Hartă de sistem

Folosește între trei și nouă componente atunci când proprietatea, interfețele sau schimbul de date contează mai mult decât cronologia. Limitele identifică medii sau echipe; liniile care se intersectează semnalează nevoia de regrupare sau divizare a vederii.

Lanț cauzal

Folosește acest tip pentru o cauză, un mecanism intermediar și un rezultat. Marchează condițiile și incertitudinea. Săgețile nu trebuie să transforme niciodată corelația în cauzalitate; textul narativ și sursele trebuie să susțină fiecare afirmație cauzală.

Buclă de ciclu de viață

Folosește o buclă numai atunci când ieșirea devine o intrare ulterioară. Numerotează etapele și enunță declanșatorul de repornire; un cerc decorativ sugerează fals o repetiție.

Imagine de ansamblu cu detaliu în inset

Folosește un inset atunci când o componentă are nevoie de detaliu, dar depinde de contextul sistemului. Repetă eticheta acesteia. Mai mult de un inset necesită de obicei o diagramă separată.

Pe mobil, stivuiește diagramele liniare în ordinea lecturii. O hartă de sistem poate deveni o imagine de ansamblu simplificată plus relații numerotate. Nu solicita niciodată derulare orizontală a paginii sau zoom pentru înțelegere.

Parametri

Modelul de conținut stochează mecanismul. Coordonatele, culorile, dimensiunile fonturilor, alegerile de pictograme, rutarea conectorilor și punctele de întrerupere responsive aparțin instrumentului de redare sau operei artistice sursă.

source este obligatoriu pentru cercetare externă, standarde, procese reglementate sau modele adaptate. Fiecare nod și conector trebuie să apară în echivalentul textual; textul narativ poate combina repetiția.

Sintaxă și exemple de cod

Cele trei mapări păstrează aceleași câmpuri. Căile de active din exemple descriu contractul de producție; nu trebuie să apară ca referințe de imagine live până când acele fișiere nu există.

Directivă portabilă Markdown

:::diagram{variant=process src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Three-stage flow from source pages through extraction and normalization to an answer index"}
## How a page becomes retrievable

The model covers content processing after a page has been fetched.

::item{id=source-pages}
### Source pages

Provide HTML, headings, images, and structured fields.
::
::item{id=extract-normalize}
### Extract and normalize

Preserve useful text, hierarchy, entities, and relationships.
::
::item{id=answer-index}
### Answer index

Stores passages that can be matched to a question.
::
::relationship{from=source-pages to=extract-normalize label="sends page representation" kind=flow}
::relationship{from=extract-normalize to=answer-index label="produces retrievable passages" kind=flow}

Normalized passages reach the answer index only after useful structure is preserved.

### In text

Source pages send their page representation to extraction and normalization. That stage preserves useful text, hierarchy, entities, and relationships, then produces retrievable passages for the answer index.
:::

Primul titlu se mapează la title; următorul paragraf se mapează la scope; directivele de element definesc nodurile; directivele de relație definesc conectorii; paragraful de după ele se mapează la caption; iar secțiunea In text se mapează la textEquivalent.

Mapare shortcode Hugo

{{< diagram variant="process" src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Three-stage flow from source pages through extraction and normalization to an answer index" >}}
## How a page becomes retrievable
{{< diagram-node id="source-pages" label="Source pages" >}}Provides page content.{{< /diagram-node >}}
{{< diagram-node id="extract-normalize" label="Extract and normalize" >}}Preserves useful structure.{{< /diagram-node >}}
{{< diagram-node id="answer-index" label="Answer index" >}}Stores passages.{{< /diagram-node >}}
{{< diagram-relationship from="source-pages" to="extract-normalize" label="sends page representation" kind="flow" >}}
{{< diagram-relationship from="extract-normalize" to="answer-index" label="produces retrievable passages" kind="flow" >}}
### In text
Source pages send content for extraction and normalization, which produces passages for the answer index.
{{< /diagram >}}

Parametrii denumiți sunt folosiți exclusiv. Aceasta este o specificație de adaptor portabil, nu o afirmație că aceste shortcode-uri sunt înregistrate în tema curentă. Până când există un instrument de redare aprobat, publică o figură semantică prin fluxul de imagini stabilit și păstrează echivalentul său textual în conținutul normal al paginii.

Bloc WordPress

<!-- wp:amicited/diagram {"variant":"process","src":"/cdn-assets/seo-playbook/examples/content-pipeline.svg","alt":"Three-stage flow from source pages through extraction and normalization to an answer index"} -->
<figure>
  <h2>How a page becomes retrievable</h2>
  <img src="/cdn-assets/seo-playbook/examples/content-pipeline.svg"
       alt="Three-stage flow from source pages through extraction and normalization to an answer index">
  <figcaption>Normalized passages reach the answer index only after useful structure is preserved.</figcaption>
  <div class="diagram-text-equivalent">
    <h3>In text</h3>
    <p>Source pages send content for extraction and normalization, which produces passages for the answer index.</p>
  </div>
</figure>
<!-- /wp:amicited/diagram -->

Stochează nodurile și conectorii ca atribute ale blocului. Exportul trebuie să le rețină pe acestea și echivalentul textual; o imagine simplificată nu este conținut portabil.

Exemple

Bine: desenul și textul narativ fac aceeași afirmație

Versiunea bună răspunde la o singură întrebare: cum o întrebare trimisă devine un răspuns susținut. Patru noduri concrete urmează o direcție clară. Etichetele conectorilor fac distincția între rutare, regăsire și compoziție. O cale de feedback punctată este definită în cheie ca revizuire umană opțională, deci nu sugerează o buclă automată. Legenda enunță concluzia, iar textul alăturat numește fiecare etapă și transfer.

Acest lucru oferă cititorilor vizuali un model rapid, în timp ce textul poartă același mecanism și aceleași calificări. Mașinile primesc relații denumite fără a ghici din coordonate.

Rău: o încâlcire persuasivă fără sens declarat

Versiunea rea pune „AI” în centru și îl înconjoară cu substantive vagi precum conținut, date, utilizatori, încredere, venituri și creștere. Săgeți neetichetate indică în ambele sensuri, dar cititorul nu poate spune dacă ele înseamnă cauzalitate, schimb, secvență sau asociere. Culoarea pare semnificativă, dar nu are cheie. Săgeata de creștere sugerează îmbunătățire fără date. Etichetele mici devin ilizibile pe mobil, iar niciun text narativ nu explică mecanismul pretins.

Repar-o alegând o singură întrebare, eliminând nodurile irelevante, denumind conectorii, separând cauzele de asocieri și adăugând domeniu, legendă, echivalent textual și surse. Dacă rămân doar beneficii, scrie o listă.

Marcare Schema și accesibilitate

O diagramă nu are un tip Schema.org dedicat sau o eligibilitate independentă pentru rezultate îmbogățite. O diagramă cu sens poate popula Article.image sau un ImageObject cu URL, legendă, dimensiuni, creator, credit, drepturi de autor și date de licență corecte. Nu inventa metadate sau un vocabular de relații; nodurile și conectorii rămân conținut vizibil.

Folosește <figure> pentru imagine și legendă. Textul alternativ identifică mecanismul și concluzia, fără a le transcrie. Țintește 40–180 de caractere și evită „diagramă a”. Exemplu: „Flux în trei etape de la paginile sursă prin extracție și normalizare către un index de răspunsuri.”

Echivalentul textual vizibil include fiecare nod semnificativ, conector, condiție, declanșator de feedback, limită, cheie și excepție. Nu îl ascunde în ARIA, text la hover, metadate sau într-un acordeon închis.

Asociază culoarea, pictogramele, modelele, forma și poziția cu etichete text. Menține contrastul, vârfurile de săgeată vizibile și o ordine de lectură care se potrivește cu echivalentul textual. Textul SVG real este util, dar nu înlocuiește textul narativ vizibil.

La 320 de pixeli CSS, stivuiește, simplifică sau redă o vedere mobilă din aceleași date. Nu elimina niciodată noduri, nu tăia conectori și nu schimba ordinea de lectură. Textul din apropiere trebuie să rețină tot sensul esențial fără zoom.

Reguli de redactare

Scrie și verifică mai întâi textul, apoi desenează doar relațiile pe care acesta le conține. Acest lucru împiedică lustruirea vizuală să introducă afirmații.

• Oferă diagramei o singură întrebare sau mecanism. Nu combina arhitectură, flux de lucru, beneficii și foaie de parcurs într-o singură pânză.
• Folosește 3–9 noduri principale, cu maxim 12. Împarte un model supraîncărcat în figuri de ansamblu și de detaliu.
• Etichetează nodurile cu 1–6 cuvinte concrete. Definește abrevierile la prima utilizare în textul paginii și evită numele interne de echipă pe care cititorii nu le pot interpreta.
• Etichetează fiecare conector purtător de sens cu o frază verbală sau un obiect transferat de 1–6 cuvinte. „Trimite evenimente” este mai clar decât „integrare”.
• Păstrează legenda la 8–30 de cuvinte și fă-o să enunțe concluzia sau relația pe care cititorul ar trebui să o rețină.
• Păstrează enunțul de domeniu la o singură propoziție. Enunță excluderile sau simplificările atunci când omiterea lor ar putea schimba interpretarea.
• Păstrează echivalentul textual la 50–250 de cuvinte, dacă acuratețea nu necesită mai mult.
• Folosește un ton explicativ, neutru. Separă ceea ce face sistemul de ceea ce poate face, ar trebui să facă sau se presupune că face.
• Marchează incertitudinea cu cuvinte precum „poate”, „condiționat” sau „propus” și definește căile punctate sau întrerupte în cheie.
• Nu pune niciodată paragrafe, citări, URL-uri brute, sloganuri promoționale, dovezi precise sau instrucțiuni complete în interiorul operei artistice. Pune-le în text selectabil al paginii.
• Nu folosi niciodată pictograme fără etichete, culoare fără un al doilea indiciu sau săgeți fără sens declarat.
• Nu sugera niciodată scară, cantitate, putere cauzală, certitudine sau creștere măsurată prin dimensiune sau direcție, dacă dovezile și cheia nu susțin acea codificare.
• Nu publica niciodată o cale de activ inexistentă; păstrează opera artistică în așteptare ca un comentariu de captură cu screenshotsPending = true.

Tipuri de postări care îl folosesc

postTypes din frontmatter este înregistrarea de asociere. Fiecare tip de postare listat folosește același contract de diagramă, dar la un prag diferit.

Listă de verificare QA

• Scop: Un mecanism sau flux este mai ușor de înțeles vizual decât doar din text narativ.
• Textul mai întâi: Explicația revizuită precede opera artistică; nu a fost adăugată nicio relație nesprijinită.
• Domeniu: Titlul și domeniul fac limitele, simplificările și excluderile clare.
• Noduri: Există de obicei 3–9, fiecare concret și necesar.
• Conectori: Fiecare are direcție și etichetă; stilurile și culorile au o cheie.
• Afirmații: Cauzalitatea, automatizarea, scara, puterea, certitudinea și creșterea sunt prezentate numai când dovezile le susțin.
• Echivalent textual: Textul vizibil include fiecare nod, relație, condiție, limită, cheie și excepție.
• Legendă: Enunță concluzia în 8–30 de cuvinte.
• Accesibilitate: Culoarea nu este singurul indiciu; contrastul, vârfurile de săgeată, textul alternativ și ordinea de lectură funcționează.
• Mobil: Sensul supraviețuiește la 320 de pixeli CSS fără derulare la nivel de pagină sau zoom necesar.
• Plasare: Contextul introductiv precede diagrama; legenda și echivalentul textual rămân atașate; elementele vizuale dense concurente nu stau lângă ea.
• Sursă: Cercetarea, standardele, procesele reglementate și modelele adaptate au o sursă vizibilă corectă sau o notă de proprietate.
• Portabilitate: Toate mapările păstrează titlul, nodurile, conectorii, legenda și echivalentul textual.
• Siguranța activelor: Fișierul există înainte ca o cale live să fie publicată, drepturile sunt documentate, iar opera artistică în așteptare rămâne un comentariu SCREENSHOT.
• Precedență: Blocul este tipizat ca diagramă deoarece scopul său se potrivește cu acest element, nu pentru că o imagine generică s-a întâmplat să arate similar.

FAQ

Șablonul academy redă cele cinci întrebări revizuite stocate în frontmatter-ul [[faq]] al acestei pagini. Acestea acoperă pragul pentru utilizarea unei diagrame, echivalentul textual obligatoriu, domeniul textului alternativ, datele structurate și limitele nodurilor.