Diagramy a ilustrácie: Ako vysvetliť fungovanie mechanizmu

Diagram zobrazuje, ako sa pomenované časti spájajú, čo sa medzi nimi presúva a aký výsledok tieto vzťahy prinášajú. Použite ho, keď čitatelia potrebujú vidieť niekoľko vzťahov naraz, pričom vysvetlenie musí zostať dostupné aj ako text.

Ako sa stránka stáva vyhľadateľnou: zdrojové stránky prechádzajú extrakciou a normalizáciou, kým sa ich užitočné pasáže dostanú do indexu odpovedí.

1. Zdrojové stránky poskytujú HTML, nadpisy, obrázky a štruktúrované polia.
2. Extrahovať a normalizovať odstraňuje prezentačný šum, pričom zachováva text, hierarchiu, entity a vzťahy.
3. Index odpovedí ukladá vyhľadateľné pasáže, ktoré je možné priradiť k neskoršej otázke.
4. Prvá šípka nesie reprezentáciu stránky do spracovania; druhá nesie normalizované, vyhľadateľné pasáže do indexu.

Kresba robí tok viditeľným na prvý pohľad. Popis a očíslované vysvetlenie nesú rovnaký význam bez obrázka. Táto dvojkanálová dohoda odlišuje vysvetľujúci diagram od dekoratívneho grafického diela.

Prečo na tomto prvku záleží

Próza môže nútiť čitateľov zapamätať si niekoľko častí skôr, než odhalí, ako spolu súvisia. Diagram tento model externalizuje: uzly zobrazujú časti, spojnice zobrazujú vzťahy a hranice zobrazujú rozsah. Je najužitočnejší, keď samotné poradie nestačí. Veta môže povedať, že crawler načíta stránku, extraktor extrahuje obsah a index ukladá pasáže; diagram môže tiež ukázať miesta zlyhania, paralelné cesty a spätnú väzbu. Znižuje úsilie pri rekonštrukcii, nie potrebu presného formulovania.

Diagram však môže zavádzať rýchlejšie ako próza. Neoznačená šípka môže znamenať príčinnosť, prenos, postupnosť alebo asociáciu; slučka môže falošne implikovať automatickú spätnú väzbu. Každý vzťah potrebuje explicitný, obhájiteľný význam.

Strojová extrahovateľnosť je schopnosť softvéru izolovať obsahovú jednotku bez straty jej významu. Vyhľadávacie systémy, prekladové nástroje, čítače obrazovky a systémy umelej inteligencie na vyhľadávanie nemožno očakávať, že zrekonštruujú mechanizmus z pixelov. Optické rozpoznávanie znakov môže obnoviť popisky, ale nie to, čo znamená šípka alebo hranica. Názov, popis, štruktúrované uzly a spojnice a viditeľný textový ekvivalent robia mechanizmus extrahovateľným bez počítačového videnia.

Spoločné pravidlá písania prvkov stanovujú pravidlo priority: vyberte prvok podľa úlohy, ktorú pasáž vykonáva, nie podľa jej nadpisu alebo vzhľadu. Táto stránka má prioritu pre polia špecifické pre diagram, limity hustoty, požiadavky na textový ekvivalent a správanie prístupnosti. Ak je úlohou obsahu vysvetliť mechanizmus vizuálne, použite prvok diagramu namiesto všeobecného obrázka s improvizovaným popisom.

Kedy ho použiť

Použite diagram, keď záver závisí od súčasného videnia aspoň dvoch vzťahov. Silné použitie zahŕňa proces s vetvami alebo spätnou väzbou, systém, ktorého komponenty si vymieňajú dáta, životný cyklus, ktorý sa vracia do skoršieho stavu, kauzálny reťazec s intervenujúcim faktorom alebo koncepčný model, ktorého hranice sú dôležité. Čitateľ by mal byť schopný odpovedať na konkrétnu otázku z kresby, napríklad „Kde môže tento proces zlyhať?“ alebo „Ktorý komponent odosiela normalizovaný záznam?“

Najprv aplikujte prózový test: napíšte mechanizmus v troch až ôsmich vetách. Ak nemá krížový odkaz, vetvu, slučku alebo priestorový vzťah, próza je pravdepodobne lepšia. Diagram si zaslúži svoje miesto, keď je presný textový ekvivalent kognitívne náročný na zostavenie.

Časté sú hraničné prípady:

• Použite zoznam krokov na vykonateľné akcie; šípky nemôžu nahradiť predpoklady, kontroly úspechu alebo inštrukcie na obnovenie.
• Použite porovnávaciu tabuľku na opakované atribúty naprieč alternatívami. Neoznačený dvojosový obrázok skrýva kritériá.
• Použite rozhodovací strom na cesty zvolené podľa explicitných podmienok. Všeobecný tok vysvetľuje pohyb, nie rozhodnutie.
• Použite anotovanú snímku obrazovky na lokalizáciu ovládacích prvkov v reálnom rozhraní. Prekreslenie stráca tento dôkaz.
• Použite graf, keď kvantitatívna škála kóduje hodnoty. Dekoratívna stúpajúca šípka nesmie implikovať nameraný rast.
• Použite vložený obrázok na zobrazenie objektu, miesta alebo výsledku, nie mechanizmu.

Nepoužívajte diagram ako dekoráciu alebo orámované opakovanie. Označte hypotetické, sporné, podmienené alebo zjednodušené vzťahy v obrázku aj v texte.

Kam ho umiestniť

Umiestnite diagram po odseku, ktorý uvádza mechanizmus a otázku. Nasledujte ho viditeľným textovým ekvivalentom, potom interpretáciou, dôkazmi, obmedzeniami alebo akciami.

Uchovávajte názov, obrázok, popis, legendu a textový ekvivalent v jednej oblasti figúry. Nič nesmie oddeľovať obrázok od jeho vysvetlenia. Dlhší ekvivalent umiestnite priamo zaň pod nadpis „V texte“.

Diagram nesmie byť umiestnený priamo vedľa iného celošírkového diagramu, grafu, videa, galérie obrázkov, hustej tabuľky alebo snímky obrazovky. Vložte vysvetľujúcu prózu pred ďalší hustý vizuálny prvok. Neumiestňujte ho do bunky tabuľky, položky zoznamu, accordionu, calloutu, klikateľnej karty alebo figúry.

Pri postupoch vložte prehľad pred prvú akciu, nie medzi spojené kroky. Pri argumentoch ho umiestnite po tvrdení o mechanizme a pred dôkazy. Na stránkach produktov ho umiestnite po vysvetlení schopnosti, nikdy nie nad priamu odpoveď len kvôli technickému vzhľadu.

Anatómia

Anatómia opisuje význam, nie štýl. Tieňovanie boxov, štýl ilustrácie, hrúbka šípok, polomer rohov a farba pozadia patria do vykresľovača alebo umeleckého smerovania.

1. Názov: Pomenúva mechanizmus alebo otázku v troch až desiatich slovách.
2. Vyhlásenie o rozsahu: Definuje, čo diagram zahŕňa, vylučuje alebo zjednodušuje v jednej vete.
3. Uzol: Predstavuje jeden komponent, stav, aktéra, vstup alebo výsledok.
4. Popisok uzla: Používa konkrétnu podstatnú frázu, nie nevysvetlenú skratku.
5. Spojnica: Predstavuje jeden deklarovaný vzťah medzi dvoma uzlami.
6. Popisok spojnice: Pomenúva tento vzťah slovesom alebo prenášaným objektom, napríklad „odosiela udalosti“ alebo „vytvára pasáže“.
7. Označenie smeru: Zobrazuje smer čítania alebo prenosu bez spoliehania sa len na umiestnenie.
8. Hranica: Zoskupuje položky, ktoré zdieľajú vlastníctvo, fázu, prostredie alebo rozsah.
9. Legenda: Definuje akýkoľvek vzor čiar, symbol alebo farbu, ktorá mení význam.
10. Popis: Uvádza hlavný záver, nie opakovanie názvu.
11. Poznámka o zdroji: Identifikuje dôkaz alebo vlastníka, keď je model odvodený z výskumu, politiky alebo proprietárneho systému.
12. Textový ekvivalent: Opakuje každý význam nesúci uzol, spojnicu, smer, podmienku, hranicu a výnimku v čitateľnom poradí.

Príklady návrhov

Každý variant vyžaduje názov, popis, textový ekvivalent a explicitné významy spojníc. Vyberte najjednoduchší variant, ktorý odpovedá na otázku.

Lineárny procesný tok

Použite tri až sedem etáp, keď sa mechanizmus pohybuje prevažne jedným smerom. Označte, čo sa presúva medzi etapami; nespoliehajte sa len na šípky. Ak musí čitateľ etapy vykonať, spárujte prehľad so samostatným zoznamom krokov.

Systémová mapa

Použite tri až deväť komponentov, keď na vlastníctve, rozhraniach alebo výmene údajov záleží viac ako na chronológii. Hranice identifikujú prostredia alebo tímy; kríženie čiar signalizuje potrebu preskupiť alebo rozdeliť pohľad.

Kauzálny reťazec

Použite na príčinu, sprostredkujúci mechanizmus a výsledok. Označte podmienky a neistotu. Šípky nikdy nesmú zmeniť koreláciu na príčinnosť; próza a zdroje musia podporovať každé kauzálne tvrdenie.

Slučka životného cyklu

Použite slučku len vtedy, keď sa výstup stáva neskorším vstupom. Očíslujte etapy a uveďte spúšťač reštartu; dekoratívny kruh falošne implikuje opakovanie.

Prehľad s detailným výrezom

Použite jeden výrez, keď komponent potrebuje detail, ale závisí od kontextu systému. Zopakujte jeho popisok. Viac ako jeden výrez zvyčajne vyžaduje samostatný diagram.

Na mobile ukladajte lineárne diagramy v poradí čítania. Systémová mapa sa môže stať zjednodušeným prehľadom plus očíslovanými vzťahmi. Nikdy nevyžadujte horizontálne posúvanie stránky alebo zväčšenie pre pochopenie významu.

Parametre

Obsahový model ukladá mechanizmus. Súradnice, farby, veľkosti písma, výbery ikon, vedenie spojníc a responzívne zlomové body patria do vykresľovača alebo zdrojového grafického diela.

source je povinný pre externý výskum, normy, regulované procesy alebo adaptované modely. Každý uzol a spojnica sa musí objaviť v textovom ekvivalente; próza môže kombinovať opakovanie.

Syntax a príklady kódu

Tri mapovania zachovávajú rovnaké polia. Príklady ciest assetov opisujú produkčný kontrakt; nesmú sa objaviť ako živé odkazy na obrázky, kým tieto súbory neexistujú.

Prenosná direktíva 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.
:::

Prvý nadpis sa mapuje na title; nasledujúci odsek na scope; direktívy položiek definujú uzly; direktívy vzťahov definujú spojnice; odsek po nich sa mapuje na caption; a sekcia V texte sa mapuje na textEquivalent.

Mapovanie Hugo shortcode

{{< 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 >}}

Pomenované parametre sa používajú výhradne. Toto je prenosná špecifikácia adaptéra, nie tvrdenie, že tieto shortcode sú registrované v aktuálnej téme. Kým neexistuje schválený vykresľovač, publikujte sémantickú figúru prostredníctvom zavedenej pipeline obrázkov a uchovávajte jej textový ekvivalent v bežnom obsahu stránky.

WordPress blok

<!-- 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 -->

Ukladajte uzly a spojnice ako atribúty bloku. Export ich musí zachovať spolu s textovým ekvivalentom; plochý obrázok nie je prenosný obsah.

Príklady

Dobrý: kresba a próza tvoria rovnaké tvrdenie

Dobrá verzia odpovedá na jednu otázku: ako sa zadaná otázka stáva podloženou odpoveďou. Štyri konkrétne uzly nasledujú jasný smer. Popisky spojníc odlišujú smerovanie od vyhľadávania a skladania. Prerušovaná cesta spätnej väzby je v legende definovaná ako voliteľná ľudská kontrola, takže neimplikuje automatickú slučku. Popis uvádza záver a susedný text pomenúva každú etapu a prenos.

To dáva vizuálnym čitateľom rýchly model, zatiaľ čo text nesie rovnaký mechanizmus a kvalifikáciu. Stroje dostávajú pomenované vzťahy bez hádania zo súradníc.

Zlý: presvedčivá spleť bez deklarovaného významu

Zlá verzia dáva do stredu „AI“ a obklopuje ho vágne podstatné mená ako obsah, údaje, používatelia, dôvera, príjmy a rast. Neoznačené šípky smerujú oboma smermi, ale čitateľ nevie určiť, či znamenajú príčinnosť, výmenu, postupnosť alebo asociáciu. Farby pôsobia významovo, ale nemajú legendu. Rastová šípka implikuje zlepšenie bez údajov. Malé popisky sú na mobile nečitateľné a žiadna próza nevysvetľuje deklarovaný mechanizmus.

Opravte ju výberom jednej otázky, odstránením irelevantných uzlov, pomenovaním spojníc, oddelením príčin od asociácií a pridaním rozsahu, popisu, textového ekvivalentu a zdrojov. Ak zostanú len výhody, napíšte zoznam.

Značkovanie Schema a prístupnosť

Diagram nemá vyhradený typ Schema.org ani nezávislú spôsobilosť pre bohaté výsledky. Zmysluplný diagram môže naplniť Article.image alebo ImageObject s presnou URL, popisom, rozmermi, autorom, kreditom, autorskými právami a licenčnými údajmi. Nevymýšľajte metadáta ani slovník vzťahov; uzly a spojnice zostávajú viditeľným obsahom.

Použite <figure> pre obrázok a popis. Alternatívny text identifikuje mechanizmus a záver, nie ho prepisuje. Cieľom je 40–180 znakov a vyhnite sa „diagram of“. Príklad: „Three-stage flow from source pages through extraction and normalization to an answer index.“

Viditeľný textový ekvivalent zahŕňa každý významný uzol, spojnicu, podmienku, spúšťač spätnej väzby, hranicu, legendu a výnimku. Neschovávajte ho v ARIA, texte pri hoveri, metadátach alebo v zatvorenom accordione.

Spárujte farbu, ikony, vzory, tvar a pozíciu s textovými popiskami. Zachovajte kontrast, viditeľné hroty šípok a poradie čítania zodpovedajúce textovému ekvivalentu. Skutočný SVG text je užitočný, ale nenahrádza viditeľnú prózu.

Pri 320 CSS pixeloch ukladajte, zjednodušte alebo vykreslite mobilný pohľad z rovnakých údajov. Nikdy neodstraňujte uzly, neorezávajte spojnice ani nemeňte poradie čítania. Blízky text musí zachovať všetky podstatné významy bez zväčšenia.

Pravidlá písania

Najprv napíšte a overte text, potom kreslite len vzťahy, ktoré obsahuje. To zabraňuje vizuálnemu vylešteniu vnášať nové tvrdenia.

• Dajte diagramu jednu otázku alebo mechanizmus. Nekombinujte architektúru, pracovný tok, výhody a plán na jednom plátne.
• Použite 3–9 primárnych uzlov, maximálne 12. Preťažený model rozdeľte na prehľad a detailné figúry.
• Označujte uzly 1–6 konkrétnymi slovami. Definujte skratky pri prvom použití v texte stránky a vyhýbajte sa interným názvom tímu, ktoré čitatelia nevedia interpretovať.
• Označte každú význam nesúcu spojnicu slovesnou frázou alebo prenášaným objektom o dĺžke 1–6 slov. „Odosiela udalosti“ je jasnejšie ako „integrácia“.
• Popis udržujte na 8–30 slovách a nechajte ho uvádzať záver alebo vzťah, ktorý by si mal čitateľ zapamätať.
• Vyhlásenie o rozsahu udržujte na jednej vete. Uveďte vylúčenia alebo zjednodušenia, keď by ich vynechanie mohlo zmeniť interpretáciu.
• Textový ekvivalent udržujte na 50–250 slovách, pokiaľ presnosť nevyžaduje viac.
• Používajte vysvetľujúci, neutrálny tón. Oddeľte, čo systém robí, od toho, čo môže robiť, mal by robiť alebo je hypotetické.
• Označte neistotu slovami ako „môže“, „podmienečne“ alebo „navrhované“ a definujte prerušované alebo bodkované cesty v legende.
• Nikdy nevkladajte odseky, citácie, holé URL, propagačné slogany, presné dôkazy alebo úplné inštrukcie do grafického diela. Umiestnite ich do vyberateľného textu stránky.
• Nikdy nepoužívajte ikony bez popiskov, farbu bez druhého podnetu alebo šípky bez deklarovaného významu.
• Nikdy neimplikujte mierku, množstvo, silu príčinnosti, istotu alebo nameraný rast prostredníctvom veľkosti alebo smeru, pokiaľ dôkazy a legenda toto kódovanie nepodporujú.
• Nikdy nezverejňujte neexistujúcu cestu assetu; ponechajte rozpracované grafické dielo ako komentár s screenshotsPending = true.

Typy príspevkov, ktoré ho používajú

Frontmatter postTypes je registrované prepojenie. Každý uvedený typ príspevku používa rovnaký kontrakt diagramu, ale na inej úrovni.

Kontrolný zoznam QA

• Účel: Jeden mechanizmus alebo tok je ľahšie pochopiteľný vizuálne ako len z prózy.
• Text najprv: Skontrolované vysvetlenie predchádza grafickému dielu; nebol pridaný žiadny nepodložený vzťah.
• Rozsah: Názov a rozsah objasňujú hranice, zjednodušenia a vylúčenia.
• Uzly: Zvyčajne 3–9, každý konkrétny a potrebný.
• Spojnice: Každá má smer a popisok; štýly a farby majú legendu.
• Tvrdenia: Príčinnosť, automatizácia, mierka, sila, istota a rast sú zobrazené len vtedy, keď ich podporujú dôkazy.
• Textový ekvivalent: Viditeľný text zahŕňa každý uzol, vzťah, podmienku, hranicu, legendu a výnimku.
• Popis: Uvádza záver v 8–30 slovách.
• Prístupnosť: Farba nie je jediným podnetom; kontrast, hroty šípok, alternatívny text a poradie čítania fungujú.
• Mobil: Význam prežíva pri 320 CSS pixeloch bez posúvania stránky alebo požadovaného zväčšenia.
• Umiestnenie: Úvodný kontext predchádza diagramu; popis a textový ekvivalent zostávajú pripojené; konkurenčné husté vizuály nie sú vedľa neho.
• Zdroj: Výskum, normy, regulované procesy a adaptované modely majú presný viditeľný zdroj alebo poznámku o vlastníctve.
• Prenosnosť: Všetky mapovania zachovávajú názov, uzly, spojnice, popis a textový ekvivalent.
• Bezpečnosť assetu: Súbor existuje pred zverejnením živej cesty, práva sú zdokumentované a rozpracované grafické dielo zostáva komentárom SCREENSHOT.
• Priorita: Blok je typovaný ako diagram, pretože jeho účel zodpovedá tomuto prvku, nie preto, že všeobecný obrázok náhodou vyzeral podobne.

FAQ

Šablóna akadémie vykresľuje päť recenzovaných otázok uložených v tomto frontmatter [[faq]] stránky. Pokrývajú hranicu na použitie diagramu, povinný textový ekvivalent, rozsah alternatívneho textu, štruktúrované údaje a limity uzlov.