Diagramy i ilustracje: wyjaśnij, jak działa mechanizm

Diagram pokazuje, jak nazwane części są połączone, co się między nimi przemieszcza i jakie są rezultaty tych relacji. Używaj go, gdy czytelnicy potrzebują kilku relacji jednocześnie, jednocześnie udostępniając wyjaśnienie w formie tekstu.

Jak strona staje się wyszukiwalna: strony źródłowe przechodzą przez ekstrakcję i normalizację, zanim ich użyteczne fragmenty trafią do indeksu odpowiedzi.

1. Strony źródłowe dostarczają kod HTML, nagłówki, obrazy i pola strukturalne.
2. Ekstrakcja i normalizacja usuwa szum prezentacyjny, zachowując tekst, hierarchię, encje i relacje.
3. Indeks odpowiedzi przechowuje wyszukiwalne fragmenty, które można dopasować do późniejszego pytania.
4. Pierwsza strzałka przenosi reprezentację strony do przetwarzania; druga przenosi znormalizowane, przeszukiwalne fragmenty do indeksu.

Rysunek uwidacznia przepływ na pierwszy rzut oka. Podpis i ponumerowane wyjaśnienie niosą to samo znaczenie bez obrazu. Ta dwukanałowa umowa odróżnia diagram wyjaśniający od dekoracyjnej grafiki.

Dlaczego ten element jest ważny

Proza może zmusić czytelników do zapamiętania kilku części, zanim ujawni, jak są ze sobą powiązane. Diagram externalizuje ten model: węzły pokazują części, łączniki pokazują relacje, a granice pokazują zakres. Jest najbardziej przydatny, gdy sama kolejność nie wystarcza. Zdanie może stwierdzić, że robot indeksujący pobiera stronę, parser wyodrębnia treść, a indeks przechowuje fragmenty; diagram może również pokazać punkty awarii, równoległe ścieżki i sprzężenie zwrotne. Zmniejsza wysiłek związany z rekonstrukcją, a nie potrzebę precyzyjnego sformułowania.

Diagram może też wprowadzać w błąd szybciej niż proza. Nieoznakowana strzałka może oznaczać przyczynowość, transfer, kolejność lub powiązanie; pętla może fałszywie sugerować automatyczne sprzężenie zwrotne. Każda relacja potrzebuje jawnego, obronnego znaczenia.

Wyodrębnialność maszynowa to zdolność oprogramowania do wyizolowania jednostki treści bez utraty jej znaczenia. Systemy wyszukiwania, narzędzia do tłumaczenia, czytniki ekranu i systemy AI nie mogą być zmuszane do rekonstrukcji mechanizmu z pikseli. Rozpoznawanie optyczne może odzyskać etykiety, ale nie znaczenie strzałki czy granicy. Tytuł, podpis, ustrukturyzowane węzły i łączniki oraz widoczny odpowiednik tekstowy czynią mechanizm wyodrębnialnym bez wizji komputerowej.

Wspólne zasady pisania elementów ustanawiają zasadę pierwszeństwa: wybierz element według funkcji, jaką pełni fragment, a nie według nagłówka czy wyglądu. Ta strona ma pierwszeństwo dla pól specyficznych dla diagramu, limitów gęstości, wymagań dotyczących odpowiednika tekstowego i zachowań dostępności. Jeśli zadaniem treści jest wizualne wyjaśnienie mechanizmu, użyj elementu diagramu zamiast ogólnego obrazu z improwizowanym podpisem.

Kiedy go używać

Użyj diagramu, gdy wniosek zależy od zobaczenia co najmniej dwóch relacji jednocześnie. Mocne zastosowania obejmują proces z rozgałęzieniami lub sprzężeniem zwrotnym, system, którego komponenty wymieniają dane, cykl życia powracający do wcześniejszego stanu, łańcuch przyczynowy z czynnikiem pośredniczącym lub model koncepcyjny, w którym granice mają znaczenie. Czytelnik powinien być w stanie odpowiedzieć na konkretne pytanie na podstawie rysunku, na przykład „Gdzie ten proces może zawieść?” lub „Który komponent wysyła znormalizowany rekord?”

Najpierw zastosuj test prozy: opisz mechanizm w trzech do ośmiu zdaniach. Jeśli nie zawiera odsyłaczy krzyżowych, rozgałęzień, pętli ani relacji przestrzennych, proza jest prawdopodobnie lepsza. Diagram zasługuje na swoje miejsce, gdy dokładny odpowiednik tekstowy jest poznawczo kosztowny do złożenia.

Częste przypadki graniczne:

• Użyj listy kroków dla wykonywalnych działań; strzałki nie zastąpią wymagań wstępnych, kontroli sukcesu ani instrukcji odzyskiwania.
• Użyj tabeli porównawczej dla powtarzających się atrybutów w różnych alternatywach. Nieoznakowany obraz dwuosiowy ukrywa kryteria.
• Użyj drzewa decyzyjnego dla ścieżek wybieranych na podstawie jawnych warunków. Ogólny schemat przepływu wyjaśnia ruch, a nie decyzję.
• Użyj opisanego zrzutu ekranu, aby zlokalizować elementy sterujące w rzeczywistym interfejsie. Przerysowanie traci ten dowód.
• Użyj wykresu, gdy skala ilościowa wyraża wartości. Dekoracyjna strzałka wzrostu nie może sugerować mierzonego wzrostu.
• Użyj obrazu w linii do przedstawienia obiektu, miejsca lub rezultatu, a nie mechanizmu.

Nie używaj diagramu jako dekoracji lub powtórzenia w ramce. Oznacz w obrazie i tekście relacje hipotetyczne, sporne, warunkowe lub uproszczone.

Gdzie go umieścić

Umieść diagram po akapicie, który wprowadza mechanizm i pytanie. Następnie umieść widoczny odpowiednik tekstowy, a potem interpretację, dowody, ograniczenia lub działania.

Trzymaj tytuł, obraz, podpis, legendę i odpowiednik tekstowy w jednym regionie figury. Nic nie może oddzielić obrazu od jego wyjaśnienia. Dłuższy odpowiednik umieść bezpośrednio po nim pod nagłówkiem „W tekście”.

Diagram nie może znajdować się bezpośrednio obok innego pełnowymiarowego diagramu, wykresu, wideo, galerii zdjęć, gęstej tabeli lub zrzutu ekranu. Wstaw prozę wyjaśniającą przed następnym gęstym materiałem wizualnym. Nie umieszczaj diagramu wewnątrz komórki tabeli, elementu listy, akordeonu, wywołania, klikalnej karty ani figury.

W przypadku procedur umieść przegląd przed pierwszą czynnością, a nie między powiązanymi krokami. W argumentach umieść go po twierdzeniu o mechanizmie, a przed dowodami. Na stronach produktów umieść go po wyjaśnieniu możliwości, nigdy ponad bezpośrednią odpowiedzią tylko po to, by wyglądać technicznie.

Anatomia

Anatomia opisuje znaczenie, a nie styl. Cienie ramek, styl ilustracji, grubość strzałek, promień narożników i kolor tła należą do renderera lub kierunku artystycznego.

1. Tytuł: Nazywa mechanizm lub pytanie w trzech do dziesięciu słowach.
2. Określenie zakresu: Definiuje jednym zdaniem, co diagram zawiera, wyklucza lub upraszcza.
3. Węzeł: Reprezentuje jeden komponent, stan, aktora, wejście lub rezultat.
4. Etykieta węzła: Używa konkretnej frazy rzeczownikowej, a nie niewyjaśnionego skrótu.
5. Łącznik: Reprezentuje jedną zadeklarowaną relację między dwoma węzłami.
6. Etykieta łącznika: Nazywa tę relację czasownikiem lub transferowanym obiektem, np. „wysyła zdarzenia” lub „tworzy fragmenty”.
7. Znacznik kierunku: Pokazuje kierunek czytania lub transferu, nie polegając wyłącznie na umiejscowieniu.
8. Granica: Grupuje elementy, które dzielą własność, fazę, środowisko lub zakres.
9. Legenda: Definiuje każdy wzór linii, symbol lub kolor zmieniający znaczenie.
10. Podpis: Podaje główny wniosek, zamiast powtarzać tytuł.
11. Notatka o źródle: Identyfikuje dowód lub właściciela, gdy model pochodzi z badań, polityki lub zastrzeżonego systemu.
12. Odpowiednik tekstowy: Przedstawia w czytelnej kolejności każdy niosący znaczenie węzeł, łącznik, kierunek, warunek, granicę i wyjątek.

Przykłady projektowe

Każdy wariant wymaga tytułu, podpisu, odpowiednika tekstowego i jawnych znaczeń łączników. Wybierz najprostszy wariant, który odpowiada na pytanie.

Liniowy przepływ procesu

Użyj trzech do siedmiu etapów, gdy mechanizm porusza się głównie w jednym kierunku. Oznacz, co przemieszcza się między etapami; nie polegaj wyłącznie na strzałkach. Jeśli czytelnik musi wykonać etapy, połącz przegląd z osobną listą kroków.

Mapa systemu

Użyj trzech do dziewięciu komponentów, gdy własność, interfejsy lub wymiana danych są ważniejsze niż chronologia. Granice identyfikują środowiska lub zespoły; przecinające się linie sygnalizują potrzebę przegrupowania lub podziału widoku.

Łańcuch przyczynowy

Użyj dla przyczyny, pośredniego mechanizmu i rezultatu. Oznacz warunki i niepewność. Strzałki nigdy nie mogą przekształcać korelacji w przyczynowość; proza i źródła muszą wspierać każde twierdzenie o przyczynowości.

Pętla cyklu życia

Używaj pętli tylko wtedy, gdy wynik staje się późniejszym wejściem. Ponumeruj etapy i podaj wyzwalacz restartu; dekoracyjne koło fałszywie sugeruje powtarzalność.

Przegląd z wstawką szczegółową

Użyj jednej wstawki, gdy komponent wymaga szczegółów, ale zależy od kontekstu systemu. Powtórz jego etykietę. Więcej niż jedna wstawka zazwyczaj wymaga osobnego diagramu.

Na urządzeniach mobilnych układaj liniowe diagramy w kolejności czytania. Mapa systemu może stać się uproszczonym przeglądem z ponumerowanymi relacjami. Nigdy nie wymagaj poziomego przewijania strony ani powiększania, by zrozumieć treść.

Parametry

Model treści przechowuje mechanizm. Współrzędne, kolory, rozmiary czcionek, wybór ikon, trasowanie łączników i punkty graniczne responsywności należą do renderera lub źródłowej grafiki.

source jest wymagane w przypadku badań zewnętrznych, standardów, regulowanych procesów lub zaadaptowanych modeli. Każdy węzeł i łącznik musi pojawić się w odpowiedniku tekstowym; proza może łączyć powtórzenia.

Przykłady składni i kodu

Trzy mapowania zachowują te same pola. Przykładowe ścieżki zasobów opisują kontrakt produkcyjny; nie mogą występować jako odniesienia do żywych obrazów, dopóki te pliki nie istnieją.

Przenośna dyrektywa 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.
:::

Pierwszy nagłówek mapuje się do title; następny akapit mapuje się do scope; dyrektywy item definiują węzły; dyrektywy relationship definiują łączniki; akapit po nich mapuje się do caption; a sekcja In text mapuje się do textEquivalent.

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

Używane są wyłącznie nazwane parametry. Jest to przenośna specyfikacja adaptera, a nie twierdzenie, że te shortcode są zarejestrowane w bieżącym motywie. Dopóki nie istnieje zatwierdzony renderer, publikuj semantyczną figurę przez ustalony potok obrazów i przechowuj jej odpowiednik tekstowy w normalnej treści strony.

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

Przechowuj węzły i łączniki jako atrybuty bloku. Eksport musi je zachować wraz z odpowiednikiem tekstowym; spłaszczony obraz nie jest przenośną treścią.

Przykłady

Dobrze: rysunek i proza niosą to samo twierdzenie

Dobra wersja odpowiada na jedno pytanie: jak zadane pytanie staje się popartą odpowiedzią. Cztery konkretne węzły podążają w czytelnym kierunku. Etykiety łączników odróżniają kierowanie od wyszukiwania i kompozycji. Przerywana ścieżka sprzężenia zwrotnego jest zdefiniowana w legendzie jako opcjonalny przegląd ludzki, więc nie sugeruje automatycznej pętli. Podpis podaje wniosek, a sąsiedni tekst wymienia każdy etap i transfer.

Daje to czytelnikom wizualnym szybki model, podczas gdy tekst niesie ten sam mechanizm i zastrzeżenia. Maszyny otrzymują nazwane relacje bez zgadywania na podstawie współrzędnych.

Źle: plątanina perswazyjna bez zadeklarowanego znaczenia

Zła wersja umieszcza „AI” w centrum i otacza je niejasnymi rzeczownikami, takimi jak treść, dane, użytkownicy, zaufanie, przychód i wzrost. Nieoznakowane strzałki wskazują w obie strony, ale czytelnik nie może stwierdzić, czy oznaczają przyczynowość, wymianę, kolejność czy powiązanie. Kolor wydaje się znaczący, ale nie ma legendy. Strzałka wzrostu sugeruje poprawę bez danych. Małe etykiety stają się nieczytelne na urządzeniach mobilnych, a żadna proza nie wyjaśnia domniemanego mechanizmu.

Napraw to, wybierając jedno pytanie, usuwając nieistotne węzły, nazywając łączniki, oddzielając przyczyny od powiązań oraz dodając zakres, podpis, odpowiednik tekstowy i źródła. Jeśli pozostają tylko korzyści, napisz listę.

Znaczniki Schema i dostępność

Diagram nie ma dedykowanego typu Schema.org ani samodzielnej kwalifikacji do rozszerzonych wyników. Znaczący diagram może wypełniać pole Article.image lub ImageObject z dokładnym URL, podpisem, wymiarami, twórcą, kredytem, prawami autorskimi i danymi licencyjnymi. Nie wymyślaj metadanych ani słownika relacji; węzły i łączniki pozostają widoczną treścią.

Użyj <figure> dla obrazu i podpisu. Tekst alternatywny identyfikuje mechanizm i wniosek, zamiast go przepisywać. Celuj w 40–180 znaków i unikaj „diagram przedstawiający”. Przykład: „Three-stage flow from source pages through extraction and normalization to an answer index.”

Widoczny odpowiednik tekstowy obejmuje każdy znaczący węzeł, łącznik, warunek, wyzwalacz sprzężenia zwrotnego, granicę, legendę i wyjątek. Nie ukrywaj go w ARIA, tekście najechania, metadanych ani zamkniętym akordeonie.

Łącz kolory, ikony, wzory, kształty i położenie z etykietami tekstowymi. Zachowaj kontrast, widoczne groty strzałek i kolejność czytania zgodną z odpowiednikiem tekstowym. Rzeczywisty tekst SVG jest przydatny, ale nie zastępuje widocznej prozy.

Przy 320 pikselach CSS układaj w stos, upraszczaj lub renderuj widok mobilny z tych samych danych. Nigdy nie usuwaj węzłów, nie przycinaj łączników ani nie zmieniaj kolejności czytania. Pobliskie tekst musi zachować całe istotne znaczenie bez powiększania.

Zasady pisania

Najpierw napisz i zweryfikuj tekst, a następnie rysuj tylko relacje, które on zawiera. Zapobiega to wprowadzaniu twierdzeń przez dopracowanie wizualne.

• Nadaj diagramowi jedno pytanie lub mechanizm. Nie łącz architektury, przepływu pracy, korzyści i mapy drogowej w jednym obszarze.
• Użyj 3–9 głównych węzłów, maksymalnie 12. Podziel przeciążony model na figury przeglądową i szczegółową.
• Oznacz węzły 1–6 konkretnymi słowami. Zdefiniuj skróty przy pierwszym użyciu w tekście strony i unikaj wewnętrznych nazw zespołów, których czytelnicy nie mogą zinterpretować.
• Oznacz każdy niosący znaczenie łącznik frazą czasownikową lub transferowanym obiektem (1–6 słów). „Wysyła zdarzenia” jest jaśniejsze niż „integracja”.
• Utrzymuj podpis w zakresie 8–30 słów i sformułuj go tak, by podawał wniosek lub relację, którą czytelnik powinien zapamiętać.
• Utrzymaj określenie zakresu w jednym zdaniu. Podaj wykluczenia lub uproszczenia, gdy ich pominięcie mogłoby zmienić interpretację.
• Utrzymaj odpowiednik tekstowy w zakresie 50–250 słów, chyba że dokładność wymaga więcej.
• Używaj wyjaśniającego, neutralnego tonu. Oddziel to, co system robi, od tego, co może robić, powinien robić lub co jest hipotetyczne.
• Oznacz niepewność słowami takimi jak „może”, „warunkowo” lub „proponowane” i zdefiniuj przerywane lub kropkowane ścieżki w legendzie.
• Nigdy nie umieszczaj akapitów, cytatów, surowych adresów URL, haseł promocyjnych, precyzyjnych dowodów ani kompletnych instrukcji wewnątrz grafiki. Umieść je w zaznaczalnym tekście strony.
• Nigdy nie używaj ikon bez etykiet, koloru bez drugiego sygnału ani strzałek bez zadeklarowanego znaczenia.
• Nigdy nie sugeruj skali, ilości, siły przyczynowej, pewności ani mierzonego wzrostu przez rozmiar lub kierunek, chyba że dowody i legenda wspierają takie kodowanie.
• Nigdy nie publikuj nieistniejącej ścieżki zasobu; oznacz oczekującą grafikę jako komentarz do przechwycenia z screenshotsPending = true.

Typy postów, które go używają

Frontmatter postTypes to zarejestrowane połączenie. Każdy wymieniony typ postu używa tego samego kontraktu diagramu, ale na innym progu.

Lista kontrolna QA

• Cel: Jeden mechanizm lub przepływ jest łatwiejszy do uchwycenia wizualnie niż z samej prozy.
• Najpierw tekst: Zweryfikowane wyjaśnienie poprzedza grafikę; nie dodano żadnej niepopartej relacji.
• Zakres: Tytuł i zakres wyjaśniają granice, uproszczenia i wykluczenia.
• Węzły: Jest ich zazwyczaj 3–9, każdy konkretny i konieczny.
• Łączniki: Każdy ma kierunek i etykietę; style i kolory mają legendę.
• Twierdzenia: Przyczynowość, automatyzacja, skala, siła, pewność i wzrost są pokazane tylko wtedy, gdy dowody je wspierają.
• Odpowiednik tekstowy: Widoczny tekst obejmuje każdy węzeł, relację, warunek, granicę, legendę i wyjątek.
• Podpis: Podaje wniosek w 8–30 słowach.
• Dostępność: Kolor nie jest jedynym sygnałem; kontrast, groty strzałek, tekst alternatywny i kolejność czytania działają poprawnie.
• Mobilność: Znaczenie jest zachowane przy 320 pikselach CSS bez przewijania strony lub wymaganego powiększania.
• Umiejscowienie: Kontekst wprowadzający poprzedza diagram; podpis i odpowiednik tekstowy pozostają przy nim; konkurujące gęste materiały wizualne nie znajdują się obok.
• Źródło: Badania, standardy, regulowane procesy i zaadaptowane modele mają dokładną widoczną notatkę o źródle lub własności.
• Przenośność: Wszystkie mapowania zachowują tytuł, węzły, łączniki, podpis i odpowiednik tekstowy.
• Bezpieczeństwo zasobów: Plik istnieje przed opublikowaniem ścieżki na żywo, prawa są udokumentowane, a oczekująca grafika pozostaje komentarzem SCREENSHOT.
• Pierwszeństwo: Blok jest oznaczony jako diagram, ponieważ jego cel pasuje do tego elementu, a nie dlatego, że ogólny obraz przypadkowo wyglądał podobnie.

FAQ

Szablon Academy renderuje pięć sprawdzonych pytań przechowywanych w frontmatterze [[faq]] tej strony. Obejmują one próg użycia diagramu, obowiązkowy odpowiednik tekstowy, zakres tekstu alternatywnego, dane strukturalne i limity węzłów.