Diagramy a ilustrace: Jak vysvětlit fungování mechanismu

Diagram ukazuje, jak se pojmenované části propojují, co se mezi nimi pohybuje a jaký výsledek tyto vztahy přinášejí. Použijte jej, když čtenáři potřebují vnímat několik vztahů najednou, přičemž vysvětlení musí zůstat dostupné jako text.

Jak se stránka stává dohledatelnou: zdrojové stránky procházejí extrakcí a normalizací, než se jejich užitečné pasáže dostanou do indexu odpovědí.

1. Zdrojové stránky poskytují HTML, nadpisy, obrázky a strukturovaná pole.
2. Extrakce a normalizace odstraňuje prezentační šum a zároveň zachovává text, hierarchii, entity a vztahy.
3. Index odpovědí ukládá dohledatelné pasáže, které lze později přiřadit k dotazu.
4. První šipka nese reprezentaci stránky do zpracování; druhá nese normalizované, prohledávatelné pasáže do indexu.

Kresba zpřehledňuje tok na první pohled. Popisek a číslované vysvětlení nesou stejný význam bez obrázku. Tento dvoukanálový kontrakt odlišuje vysvětlující diagram od dekorativní grafiky.

Proč na tomto elementu záleží

Souvislý text může nutit čtenáře zapamatovat si několik částí, než odhalí, jak spolu souvisejí. Diagram tento model externalizuje: uzly ukazují části, spojnice ukazují vztahy a hranice ukazují rozsah. Nejužitečnější je, když samotné pořadí nestačí. Věta může říci, že crawler načte stránku, parser extrahuje obsah a index uloží pasáže; diagram může také ukázat místa selhání, paralelní cesty a zpětnou vazbu. Snižuje úsilí o rekonstrukci, nikoli potřebu přesného vyjádření.

Diagram může také zavádět rychleji než text. Neoznačená šipka může znamenat příčinu, přenos, posloupnost nebo asociaci; smyčka může falešně implikovat automatickou zpětnou vazbu. Každý vztah potřebuje explicitní, obhajitelný význam.

Strojová extrahovatelnost je schopnost softwaru izolovat obsahovou jednotku, aniž by ztratil její význam. Vyhledávací systémy, překladové nástroje, čtečky obrazovky a systémy umělé inteligence pro vyhledávání nemohou rekonstruovat mechanismus z pixelů. Optické rozpoznávání znaků může obnovit popisky, ale ne to, co šipka nebo hranice znamená. Název, popisek, strukturované uzly a spojnice a viditelný textový ekvivalent činí mechanismus extrahovatelným bez počítačového vidění.

Sdílená pravidla pro psaní elementů stanovují pravidlo priority: vybírejte element podle funkce, kterou pasáž plní, nikoli podle jejího nadpisu nebo vzhledu. Tato stránka má prioritu pro pole specifická pro diagram, limity hustoty, požadavky na textový ekvivalent a chování z hlediska přístupnosti. Pokud je úkolem obsahu vizuálně vysvětlit mechanismus, použijte element diagramu namísto obecného obrázku s improvizovaným popiskem.

Kdy jej použít

Použijte diagram, když závěr závisí na současném vidění alespoň dvou vztahů. Silné případy zahrnují proces s větvemi nebo zpětnou vazbou, systém jehož komponenty si vyměňují data, životní cyklus, který se vrací do dřívějšího stavu, kauzální řetězec s intervenujícím faktorem nebo konceptuální model, jehož hranice jsou důležité. Čtenář by měl být schopen z kresby odpovědět na konkrétní otázku, například „Kde může tento proces selhat?“ nebo „Která komponenta odesílá normalizovaný záznam?“

Nejprve aplikujte textový test: napište mechanismus ve třech až osmi větách. Pokud neobsahuje křížové odkazy, větvení, smyčky nebo prostorové vztahy, je pravděpodobně lepší text. Diagram si své místo zaslouží, když je přesný textový ekvivalent kognitivně náročné sestavit.

Běžné případy, které se blíží, ale nehodí se:

• Použijte seznam kroků pro proveditelné akce; šipky nemohou nahradit předpoklady, kontroly úspěchu nebo instrukce pro zotavení.
• Použijte srovnávací tabulku pro opakující se atributy napříč alternativami. Neoznačený dvojosý obrázek skrývá kritéria.
• Použijte rozhodovací strom pro cesty volené na základě explicitních podmínek. Obecný tok vysvětluje pohyb, nikoli rozhodnutí.
• Použijte anotovaný snímek obrazovky k umístění ovládacích prvků v reálném rozhraní. Překreslení ztrácí tento důkaz.
• Použijte graf, když kvantitativní měřítko vyjadřuje hodnoty. Dekorativní stoupající šipka nesmí implikovat měřený růst.
• Použijte vložený obrázek k zobrazení objektu, místa nebo výsledku, nikoli mechanismu.

Nepoužívejte diagram jako dekoraci nebo rámečkované opakování. Označte hypotetické, sporné, podmíněné nebo zjednodušené vztahy v obrázku i textu.

Kam jej umístit

Umístěte diagram za odstavec, který představuje mechanismus a otázku. Následovat by měl viditelný textový ekvivalent, poté interpretace, důkazy, omezení nebo akce.

Název, obrázek, popisek, legenda a textový ekvivalent zůstávají v jedné oblasti obrázku. Nic nesmí oddělovat obrázek od jeho vysvětlení. Delší ekvivalent umístěte přímo za něj pod nadpis „Textově“.

Diagram nesmí být umístěn přímo vedle jiného celošířkového diagramu, grafu, videa, galerie obrázků, husté tabulky nebo snímku obrazovky. Před další hustý vizuální prvek vložte vysvětlující text. Neumísťujte jej do buňky tabulky, položky seznamu, accordionu, zvýrazněného rámečku, klikatelné karty nebo obrázku.

U postupů umístěte přehled před první akci, nikoli mezi související kroky. U argumentů jej umístěte za tvrzení o mechanismu a před důkazy. Na stránkách produktů jej umístěte za vysvětlení schopnosti, nikdy nad přímou odpověď jen pro technický vzhled.

Anatomie

Anatomie popisuje význam, nikoli stylizaci. Stíny rámečků, styl ilustrace, tloušťka šipek, poloměr rohů a barva pozadí patří do renderovacího systému nebo výtvarného směru.

1. Název: Pojmenovává mechanismus nebo otázku ve třech až deseti slovech.
2. Prohlášení o rozsahu: Definuje jednou větou, co diagram zahrnuje, vylučuje nebo zjednodušuje.
3. Uzel: Představuje jednu komponentu, stav, aktéra, vstup nebo výstup.
4. Popisek uzlu: Používá konkrétní podstatné jméno, nikoli nevysvětlenou zkratku.
5. Spojnice: Představuje jeden deklarovaný vztah mezi dvěma uzly.
6. Popisek spojnice: Pojmenovává tento vztah slovesem nebo přenášeným objektem, například „odesílá události“ nebo „produkuje pasáže“.
7. Značka směru: Ukazuje směr čtení nebo přenosu, aniž by se spoléhala pouze na umístění.
8. Hranice: Seskupuje položky, které sdílejí vlastnictví, fázi, prostředí nebo rozsah.
9. Legenda: Definuje jakýkoli vzor čáry, symbol nebo barvu, která mění význam.
10. Popisek: Uvádí hlavní závěr, nikoli opakování názvu.
11. Poznámka o zdroji: Identifikuje důkaz nebo vlastníka, pokud je model odvozen z výzkumu, politiky nebo proprietárního systému.
12. Textový ekvivalent: Převypráví každý význam nesoucí uzel, spojnici, směr, podmínku, hranici a výjimku v čitelném pořadí.

Příklady provedení

Každá varianta vyžaduje název, popisek, textový ekvivalent a explicitní významy spojnic. Zvolte nejjednodušší variantu, která odpovídá na otázku.

Lineární procesní tok

Použijte tři až sedm fází, když se mechanismus pohybuje převážně jedním směrem. Označte, co se mezi fázemi přenáší; nespoléhejte se pouze na šipky. Pokud musí čtenář fáze provádět, doplňte přehled samostatným seznamem kroků.

Systémová mapa

Použijte tři až devět komponent, když záleží více na vlastnictví, rozhraních nebo výměně dat než na chronologii. Hranice identifikují prostředí nebo týmy; křížící se čáry signalizují potřebu přeskupit nebo rozdělit pohled.

Kauzální řetězec

Použijte pro příčinu, zprostředkující mechanismus a výsledek. Označte podmínky a nejistotu. Šipky nikdy nesmí změnit korelaci na kauzalitu; text a zdroje musí podporovat každé kauzální tvrzení.

Smyčka životního cyklu

Smyčku používejte pouze tehdy, když se výstup stává pozdějším vstupem. Očíslujte fáze a uveďte spouštěč restartu; dekorativní kruh falešně implikuje opakování.

Přehled s detailním výřezem

Použijte jeden výřez, když součást potřebuje detail, ale závisí na systémovém kontextu. Opakujte její popisek. Více než jeden výřez obvykle vyžaduje samostatný diagram.

Na mobilu skládejte lineární diagramy v pořadí čtení. Systémová mapa se může stát zjednodušeným přehledem plus očíslovanými vztahy. Nikdy nevyžadujte horizontální posouvání stránky nebo zoom pro pochopení významu.

Parametry

Obsahový model ukládá mechanismus. Souřadnice, barvy, velikosti písma, volba ikon, vedení spojnic a responzivní zlomy patří do renderovacího systému nebo zdrojové grafiky.

source je povinný pro externí výzkum, normy, regulované procesy nebo upravené modely. Každý uzel a spojnice musí být uvedeny v textovém ekvivalentu; text může kombinovat opakování.

Syntaxe a příklady kódu

Tři mapování zachovávají stejná pole. Uvedené cesty k assetům popisují produkční kontrakt; nesmí se objevit jako živé odkazy na obrázky, dokud tyto soubory neexistují.

Přenosná Markdown direktiva

:::diagram{variant=process src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Třífázový tok od zdrojových stránek přes extrakci a normalizaci do indexu odpovědí"}
## Jak se stránka stává dohledatelnou

Model pokrývá zpracování obsahu poté, co byla stránka načtena.

::item{id=source-pages}
### Zdrojové stránky

Poskytují HTML, nadpisy, obrázky a strukturovaná pole.
::
::item{id=extract-normalize}
### Extrakce a normalizace

Zachovává užitečný text, hierarchii, entity a vztahy.
::
::item{id=answer-index}
### Index odpovědí

Ukládá pasáže, které lze přiřadit k otázce.
::
::relationship{from=source-pages to=extract-normalize label="odesílá reprezentaci stránky" kind=flow}
::relationship{from=extract-normalize to=answer-index label="produkuje dohledatelné pasáže" kind=flow}

Normalizované pasáže se dostanou do indexu odpovědí až po zachování užitečné struktury.

### Textově

Zdrojové stránky odesílají svou reprezentaci stránky do extrakce a normalizace. Tato fáze zachovává užitečný text, hierarchii, entity a vztahy, poté produkuje dohledatelné pasáže pro index odpovědí.
:::

První nadhead mapuje na title; následující odstavec mapuje na scope; direktivy položek definují uzly; direktivy vztahů definují spojnice; odstavec za nimi mapuje na caption; a sekce Textově mapuje na textEquivalent.

Mapování na Hugo shortcode

{{< diagram variant="process" src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="Třífázový tok od zdrojových stránek přes extrakci a normalizaci do indexu odpovědí" >}}
## Jak se stránka stává dohledatelnou
{{< diagram-node id="source-pages" label="Zdrojové stránky" >}}Poskytuje obsah stránky.{{< /diagram-node >}}
{{< diagram-node id="extract-normalize" label="Extrakce a normalizace" >}}Zachovává užitečnou strukturu.{{< /diagram-node >}}
{{< diagram-node id="answer-index" label="Index odpovědí" >}}Ukládá pasáže.{{< /diagram-node >}}
{{< diagram-relationship from="source-pages" to="extract-normalize" label="odesílá reprezentaci stránky" kind="flow" >}}
{{< diagram-relationship from="extract-normalize" to="answer-index" label="produkuje dohledatelné pasáže" kind="flow" >}}
### Textově
Zdrojové stránky odesílají obsah pro extrakci a normalizaci, která produkuje pasáže pro index odpovědí.
{{< /diagram >}}

Jsou použity výhradně pojmenované parametry. Jedná se o přenosnou specifikaci adaptéru, nikoli o tvrzení, že jsou tyto shortcody registrovány v aktuálním motivu. Dokud neexistuje schválený renderovací systém, publikujte sémantický obrázek prostřednictvím zavedené obrazové pipeline a jeho textový ekvivalent ponechte v běžném obsahu stránky.

WordPress blok

<!-- wp:amicited/diagram {"variant":"process","src":"/cdn-assets/seo-playbook/examples/content-pipeline.svg","alt":"Třífázový tok od zdrojových stránek přes extrakci a normalizaci do indexu odpovědí"} -->
<figure>
  <h2>Jak se stránka stává dohledatelnou</h2>
  <img src="/cdn-assets/seo-playbook/examples/content-pipeline.svg"
       alt="Třífázový tok od zdrojových stránek přes extrakci a normalizaci do indexu odpovědí">
  <figcaption>Normalizované pasáže se dostanou do indexu odpovědí až po zachování užitečné struktury.</figcaption>
  <div class="diagram-text-equivalent">
    <h3>Textově</h3>
    <p>Zdrojové stránky odesílají obsah pro extrakci a normalizaci, která produkuje pasáže pro index odpovědí.</p>
  </div>
</figure>
<!-- /wp:amicited/diagram -->

Ukládejte uzly a spojnice jako atributy bloku. Export je musí zachovat i s textovým ekvivalentem; plochý obrázek není přenosný obsah.

Příklady

Dobře: kresba a text nesou stejné tvrzení

Dobrá verze odpovídá na jednu otázku: jak se odeslaný dotaz stane podpořenou odpovědí. Čtyři konkrétní uzly následují jasný směr. Popisky spojnic rozlišují směrování od vyhledávání a skládání. Přerušovaná cesta zpětné vazby je v legendě definována jako volitelná lidská revize, takže neimplikuje automatickou smyčku. Popisek uvádí závěr a přilehlý text pojmenovává každou fázi a přenos.

To poskytuje vizuálním čtenářům rychlý model, zatímco text nese stejný mechanismus a kvalifikaci. Stroje dostávají pojmenované vztahy, aniž by musely hádat ze souřadnic.

Špatně: přesvědčivá změť bez deklarovaného významu

Špatná verze umísťuje „AI“ doprostřed a obklopuje jej vágními podstatnými jmény jako obsah, data, uživatelé, důvěra, příjmy a růst. Neoznačené šipky směřují oběma směry, ale čtenář nepozná, zda znamenají příčinu, výměnu, posloupnost nebo asociaci. Barva působí významově, ale chybí legenda. Šipka růstu implikuje zlepšení bez dat. Malé popisky jsou na mobilu nečitelné a žádný text nevysvětluje tvrzený mechanismus.

Opravte jej výběrem jedné otázky, odstraněním irelevantních uzlů, pojmenováním spojnic, oddělením příčin od asociací a přidáním rozsahu, popisku, textového ekvivalentu a zdrojů. Pokud zůstanou jen přínosy, napište seznam.

Značkování Schema a přístupnost

Diagram nemá žádný vyhrazený typ Schema.org ani samostatnou způsobilost pro bohaté výsledky. Smysluplný diagram může naplnit Article.image nebo ImageObject s přesnými údaji o URL, popisku, rozměrech, autorovi, kreditu, autorských právech a licenci. Nevytvářejte metadata ani slovníček vztahů; uzly a spojnice zůstávají viditelným obsahem.

Použijte <figure> pro obrázek a popisek. Alternativní text identifikuje mechanismus a závěr, nikoli jej přepisuje. Cíl je 40–180 znaků; vyhněte se „diagram of“. Příklad: „Třífázový tok od zdrojových stránek přes extrakci a normalizaci do indexu odpovědí.“

Viditelný textový ekvivalent zahrnuje každý významný uzel, spojnici, podmínku, spouštěč zpětné vazby, hranici, legendu a výjimku. Neschovávejte jej v ARIA, textu při najetí myší, metadatech nebo uzavřeném accordionu.

Kombinujte barvu, ikony, vzory, tvary a umístění s textovými popisky. Udržujte kontrast, viditelné hroty šipek a pořadí čtení odpovídající textovému ekvivalentu. Skutečný SVG text je užitečný, ale nenahrazuje viditelný text.

Při 320 CSS pixelech skládejte, zjednodušte nebo vykreslete mobilní pohled ze stejných dat. Nikdy neodstraňujte uzly, neořezávejte spojnice ani neměňte pořadí čtení. Blízký text musí zachovat všechny podstatné významy bez zoomu.

Pravidla pro psaní

Nejprve napište a ověřte text, poté kreslete pouze vztahy, které obsahuje. Zabraňuje tomu, aby vizuální úprava vnášela tvrzení.

• Dejte diagramu jednu otázku nebo mechanismus. Nekombinujte architekturu, workflow, přínosy a plán v jednom plátně.
• Použijte 3–9 primárních uzlů, maximálně 12. Přetížený model rozdělte na přehledový a detailní obrázek.
• Označujte uzly 1–6 konkrétními slovy. Zkratky definujte při prvním použití v textu stránky a vyhněte se interním názvům týmů, které čtenář nemůže interpretovat.
• Označte každou význam nesoucí spojnici slovesnou frází nebo přenášeným objektem o 1–6 slovech. „Odesílá události“ je jasnější než „integrace“.
• Udržujte popisek na 8–30 slovech a uveďte v něm závěr nebo vztah, který si má čtenář zapamatovat.
• Udržujte prohlášení o rozsahu na jedné větě. Uveďte vyloučení nebo zjednodušení, pokud by jejich vynechání mohlo změnit interpretaci.
• Udržujte textový ekvivalent na 50–250 slovech, pokud přesnost nevyžaduje více.
• Používejte vysvětlující, neutrální tón. Oddělujte, co systém dělá, od toho, co může dělat, měl by dělat nebo je hypotetické.
• Označujte nejistotu slovy jako „může“, „podmíněně“ nebo „navrhovaný“ a definujte přerušované nebo tečkované cesty v legendě.
• Nikdy nevkládejte odstavce, citace, holé URL, propagační slogany, přesné důkazy nebo úplné instrukce do samotné grafiky. Umístěte je do vybíratelného textu stránky.
• Nikdy nepoužívejte ikony bez popisků, barvu bez druhého vodítka ani šipky bez deklarovaného významu.
• Nikdy neimplikujte měřítko, množství, sílu kauzality, jistotu nebo měřený růst pomocí velikosti nebo směru, pokud důkazy a legenda toto kódování nepodporují.
• Nikdy nepublikujte neexistující cestu k assetu; ponechte rozpracovanou grafiku jako komentář se screenshotsPending = true.

Typy příspěvků, které jej používají

postTypes v front matter je registrační propojení. Každý uvedený typ příspěvku používá stejný diagramový kontrakt, ale na jiné úrovni.

Kontrolní seznam QA

• Účel: Jeden mechanismus nebo tok je snazší pochopit vizuálně než pouze z textu.
• Text jako první: Recenzované vysvětlení předchází grafiku; nebyl přidán žádný nepodložený vztah.
• Rozsah: Název a rozsah jasně uvádějí hranice, zjednodušení a vyloučení.
• Uzly: Obvykle 3–9, každý konkrétní a nezbytný.
• Spojnice: Každá má směr a popisek; styly a barvy mají legendu.
• Tvrzení: Kauzalita, automatizace, měřítko, síla, jistota a růst jsou zobrazeny pouze tehdy, když je podporují důkazy.
• Textový ekvivalent: Viditelný text zahrnuje každý uzel, vztah, podmínku, hranici, legendu a výjimku.
• Popisek: Uvádí závěr v 8–30 slovech.
• Přístupnost: Barva není jediným vodítkem; kontrast, hroty šipek, alternativní text a pořadí čtení fungují.
• Mobil: Význam je zachován při 320 CSS pixelech bez posouvání stránky nebo požadovaného zoomu.
• Umístění: Úvodní kontext předchází diagramu; popisek a textový ekvivalent zůstávají připojeny; konkurující si husté vizuály nejsou vedle něj.
• Zdroj: Výzkum, normy, regulované procesy a upravené modely mají přesný viditelný zdroj nebo poznámku o vlastnictví.
• Přenositelnost: Všechna mapování zachovávají název, uzly, spojnice, popisek a textový ekvivalent.
• Bezpečnost assetů: Soubor existuje před publikováním živé cesty, práva jsou zdokumentována a rozpracovaná grafika zůstává jako komentář SCREENSHOT.
• Priorita: Blok je typován jako diagram, protože jeho účel odpovídá tomuto elementu, nikoli proto, že obecný obrázek vypadal podobně.

FAQ

Academy šablona vykresluje pět recenzovaných otázek uložených v [[faq]] front matter této stránky. Pokrývají práh pro použití diagramu, povinný textový ekvivalent, rozsah alternativního textu, strukturovaná data a limity uzlů.