Diagrammer og illustrationer: Forklar, hvordan en mekanisme fungerer

Et diagram viser, hvordan navngivne dele hænger sammen, hvad der bevæger sig mellem dem, og hvilket resultat disse relationer producerer. Brug det, når læsere har brug for flere relationer på én gang, mens forklaringen forbliver tilgængelig som tekst.

Hvordan en side bliver hentbar: kildesider passerer gennem ekstraktion og normalisering, før deres nyttige passager når et svarindeks.

1. Kildesider leverer HTML, overskrifter, billeder og strukturerede felter.
2. Ekstraktion og normalisering fjerner præsentationsstøj, mens tekst, hierarki, enheder og relationer bevares.
3. Svarindeks gemmer hentbare passager, der kan matches til et senere spørgsmål.
4. Den første pil fører siderepræsentationen til behandling; den anden fører normaliserede, søgbare passager til indekset.

Tegningen gør flowet synligt ved første øjekast. Billedteksten og den nummererede forklaring bærer samme betydning uden billedet. Denne to-kanals-kontrakt adskiller et forklarende diagram fra dekorativ grafik.

Hvorfor dette element er vigtigt

Prosa kan tvinge læsere til at huske flere dele, før de afslører, hvordan de hænger sammen. Et diagram eksternaliserer den model: knuder viser dele, forbindelser viser relationer, og afgrænsninger viser omfang. Det er mest nyttigt, når rækkefølge alene ikke er tilstrækkeligt. En sætning kan sige, at en crawler henter en side, en parser ekstraherer indhold, og et indeks gemmer passager; et diagram kan også vise fejlpunkter, parallelle ruter og feedback. Det reducerer rekonstruktionsindsatsen, ikke behovet for præcis formulering.

Et diagram kan også vildlede hurtigere end prosa. En umærket pil kan betyde årsagssammenhæng, overførsel, rækkefølge eller association; en løkke kan falsk antyde automatisk feedback. Hver relation har brug for en eksplicit, forsvarlig betydning.

Maskinudtrækkelighed er evnen for software til at isolere en indholdsenhed uden at miste dens betydning. Søgesystemer, oversættelsesværktøjer, skærmlæsere og AI-hentningssystemer kan ikke forventes at rekonstruere en mekanisme fra pixels. Optisk tegngenkendelse kan gendanne mærkater, men ikke hvad en pil eller afgrænsning betyder. En titel, billedtekst, strukturerede knuder og forbindelser samt en synlig tekstaekvivalent gør mekanismen udtrækkelig uden computer vision.

De fælles elementets skriveregler fastsætter forrangreglen: vælg et element efter det job, passagen udfører, ikke efter dens overskrift eller udseende. Denne side har forrang for diagram-specifikke felter, tæthedsgrænser, krav til tekstaekvivalenter og tilgængelighedsadfærd. Hvis indholdets job er at forklare en mekanisme visuelt, brug da diagramelementet frem for et generisk billede med en improviseret billedtekst.

Hvornår det skal bruges

Brug et diagram, når konklusionen afhænger af at se mindst to relationer sammen. Stærke anvendelser inkluderer en proces med forgreninger eller feedback, et system hvis komponenter udveksler data, en livscyklus der vender tilbage til en tidligere tilstand, en årsagskæde med en mellemliggende faktor, eller en konceptuel model hvor afgrænsninger er vigtige. Læseren bør kunne besvare et konkret spørgsmål ud fra tegningen, såsom “Hvor kan denne proces fejle?” eller “Hvilken komponent sender den normaliserede post?”

Anvend først prosatesten: skriv mekanismen i tre til otte sætninger. Hvis den ikke har nogen krydsreference, forgrening, løkke eller rumlig relation, er prosa sandsynligvis bedre. Et diagram fortjener sin plads, når en præcis tekstaekvivalent er kognitivt dyr at sammensætte.

Næsten-missere er almindelige:

• Brug en trinliste til eksekverbare handlinger; pile kan ikke erstatte forudsætninger, successignaler eller genoprettelsesinstruktioner.
• Brug en sammenligningstabel til gentagne attributter på tværs af alternativer. Et umærket to-akset billede skjuler kriterier.
• Brug et beslutningstræ til ruter valgt ved eksplicitte betingelser. Et generelt flow forklarer bevægelse, ikke en beslutning.
• Brug et annoteret skærmbillede til at lokalisere kontroller i en virkelig grænseflade. En gentegning mister det bevis.
• Brug et diagram, når kvantitativ skala koder for værdier. En dekorativ stigende pil må ikke antyde målt vækst.
• Brug et inline-billede til at afbilde en genstand, et sted eller et resultat frem for en mekanisme.

Brug ikke et diagram som dekoration eller gentagelse i boks. Markér hypotetiske, omdiskuterede, betingede eller forenklede relationer i både billede og tekst.

Hvor det skal placeres

Placer diagrammet efter afsnittet, der introducerer mekanismen og spørgsmålet. Følg det med den synlige tekstaekvivalent, derefter fortolkning, beviser, begrænsninger eller handlinger.

Hold titel, billede, billedtekst, nøgle og tekstaekvivalent i én figurregion. Intet må adskille billedet fra dets forklaring. Placer en længere tekstaekvivalent direkte efter det under “I tekst”.

Et diagram må ikke placeres direkte ved siden af et andet fuldbreddediagram, diagram, video, billedgalleri, tæt tabel eller skærmbillede. Indsæt forklarende prosa før den næste tætte visualisering. Placer det ikke inde i en tabelcelle, listeelement, accordion, callout, klikbart kort eller figur.

Ved procedurer skal du placere en oversigt før den første handling, ikke mellem koblede trin. I argumenter placeres det efter mekanismepåstanden og før beviserne. På produktsider placeres det efter kapacitetsforklaringen, aldrig over det direkte svar bare for at se teknisk ud.

Anatomi

Anatomi beskriver betydning, ikke styling. Boks-skygger, illustrationstil, piltykkelse, hjørneradius og baggrundsfarve tilhører renderings- eller art direction.

1. Titel: Navngiver mekanismen eller spørgsmålet på tre til ti ord.
2. Omfangsangivelse: Definerer, hvad diagrammet inkluderer, ekskluderer eller forenkler i én sætning.
3. Knude: Repræsenterer én komponent, tilstand, aktør, input eller resultat.
4. Knudemærkat: Bruger en konkret navnefrase, ikke en uforklaret forkortelse.
5. Forbindelse: Repræsenterer én erklæret relation mellem to knuder.
6. Forbindelsesmærkat: Navngiver den relation med et verbum eller overført objekt, såsom “sender hændelser” eller “producerer passager.”
7. Retningsmarkør: Viser læse- eller overførselsretningen uden udelukkende at stole på placering.
8. Afgrænsning: Grupperer elementer, der deler ejerskab, fase, miljø eller omfang.
9. Nøgle: Definerer enhver linjemønster, symbol eller farve, der ændrer betydning.
10. Billedtekst: Angiver den primære konklusion frem for at gentage titlen.
11. Kildeangivelse: Identificerer beviset eller ejeren, når modellen er afledt af forskning, politik eller et proprietært system.
12. Tekstaekvivalent: Gengiver hver betydningsbærende knude, forbindelse, retning, betingelse, afgrænsning og undtagelse i læsbar rækkefølge.

Designeksempler

Hver variant kræver en titel, billedtekst, tekstaekvivalent og eksplicitte forbindelsesbetydninger. Vælg den enkleste variant, der besvarer spørgsmålet.

Lineært procesflow

Brug tre til syv trin, når mekanismen hovedsageligt bevæger sig i én retning. Mærk hvad der bevæger sig mellem trinene; stol ikke udelukkende på pile. Hvis læseren skal udføre trinene, par oversigten med en separat trinliste.

Systemkort

Brug tre til ni komponenter, når ejerskab, grænseflader eller dataudveksling betyder mere end kronologi. Afgrænsninger identificerer miljøer eller teams; krydsende linjer signalerer et behov for at omgruppere eller opdele visningen.

Årsagskæde

Brug denne til en årsag, mellemliggende mekanisme og resultat. Markér betingelser og usikkerhed. Pile må aldrig gøre korrelation til kausalitet; prosa og kilder skal understøtte hver kausal påstand.

Livscyklusløkke

Brug kun en løkke, når output bliver et senere input. Nummerér trinene og angiv genstartstriggeren; en dekorativ cirkel antyder falsk gentagelse.

Oversigt med detaljeindsats

Brug én indsats, når en komponent har brug for detaljer, men afhænger af systemkontekst. Gentag dens mærkat. Mere end én indsats kræver normalt et separat diagram.

På mobil stables lineære diagrammer i læserækkefølge. Et systemkort kan blive til en forenklet oversigt plus nummererede relationer. Kræv aldrig horisontal sidescrolling eller zoom for betydning.

Parametre

Indholdsmodellen lagrer mekanismen. Koordinater, farver, skriftstørrelser, ikonvalg, forbindelsesrutning og responsive breakpoints tilhører renderings- eller kildetegningen.

source er påkrævet for ekstern forskning, standarder, regulerede processer eller tilpassede modeller. Hver knude og forbindelse skal fremgå af tekstaekvivalenten; prosa kan kombinere gentagelse.

Syntaks og kodeeksempler

De tre mappinger bevarer de samme felter. Eksempelaktivstier beskriver produktionskontrakten; de må ikke optræde som levende billedreferencer, før disse filer eksisterer.

Portabelt Markdown-direktiv

:::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.
:::

Den første overskrift mapper til title; det næste afsnit mapper til scope; elementdirektiver definerer knuder; relationsdirektiver definerer forbindelser; afsnittet efter dem mapper til caption; og sektionen I tekst mapper til textEquivalent.

Hugo shortcode-mapping

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

Navngivne parametre bruges udelukkende. Dette er en portabel adapter-specifikation, ikke en påstand om, at disse shortcodes er registreret i det aktuelle tema. Indtil en godkendt renderer findes, publicer en semantisk figur gennem den etablerede billedpipeline og behold dens tekstaekvivalent i normalt sideindhold.

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

Gem knuder og forbindelser som blokattributter. Eksport skal bevare dem og tekstaekvivalenten; et fladtrykt billede er ikke portabelt indhold.

Eksempler

Godt: tegningen og prosaen fremsætter samme påstand

Den gode version besvarer ét spørgsmål: hvordan et indsendt spørgsmål bliver til et understøttet svar. Fire konkrete knuder følger en tydelig retning. Forbindelsesmærkater adskiller routing fra hentning og sammensætning. En stiplet feedback-sti er defineret i nøglen som valgfri menneskelig gennemgang, så den ikke antyder en automatisk løkke. Billedteksten angiver konklusionen, og den tilstødende tekst navngiver hvert trin og hver overførsel.

Dette giver visuelle læsere en hurtig model, mens tekst bærer samme mekanisme og kvalifikation. Maskiner modtager navngivne relationer uden at gætte ud fra koordinater.

Dårligt: en overbevisende sammenfiltring uden erklæret betydning

Den dårlige version placerer “AI” i midten og omgiver det med vage navneord såsom indhold, data, brugere, tillid, omsætning og vækst. Umærkede pile peger begge veje, men læseren kan ikke afgøre, om de betyder årsagssammenhæng, udveksling, rækkefølge eller association. Farve virker meningsfuld, men har ingen nøgle. Vækstpilen antyder forbedring uden data. Små mærkater bliver ulæselige på mobil, og ingen prosa forklarer den påståede mekanisme.

Reparér det ved at vælge ét spørgsmål, fjerne irrelevante knuder, navngive forbindelser, adskille årsager fra associationer og tilføje omfang, billedtekst, tekstaekvivalent og kilder. Hvis kun fordele er tilbage, skriv en liste.

Schema-markup og tilgængelighed

Et diagram har ingen dedikeret Schema.org-type eller uafhængig beriget resultatberettigelse. Et meningsfuldt diagram kan udfylde Article.image eller en ImageObject med præcis URL, billedtekst, dimensioner, skaber, kredit, copyright og licensdata. Opfind ikke metadata eller et relationsvokabular; knuder og forbindelser forbliver synligt indhold.

Brug <figure> til billede og billedtekst. Alternativ tekst identificerer mekanismen og konklusionen frem for at transskribere den. Sigt efter 40–180 tegn og undgå “diagram af.” Eksempel: “Tre-trins flow fra kildesider gennem ekstraktion og normalisering til et svarindeks.”

Den synlige tekstaekvivalent inkluderer enhver meningsfuld knude, forbindelse, betingelse, feedback-trigger, afgrænsning, nøgle og undtagelse. Skjul den ikke i ARIA, svævetekst, metadata eller en lukket accordion.

Par farve, ikoner, mønstre, form og position med tekstdemarkationer. Oprethold kontrast, synlige pilespidser og en læserækkefølge, der matcher tekstaekvivalenten. Ægte SVG-tekst er nyttig, men erstatter ikke synlig prosa.

Ved 320 CSS-pixels skal du stable, forenkle eller gengive en mobilvisning fra de samme data. Fjern aldrig knuder, beskær forbindelser eller skift læserækkefølge. Nærliggende tekst skal bevare al væsentlig betydning uden zoom.

Skriveregler

Skriv og verificér teksten først, tegn derefter kun de relationer, den indeholder. Dette forhindrer visuel polering i at introducere påstande.

• Giv diagrammet ét spørgsmål eller én mekanisme. Kombiner ikke arkitektur, workflow, fordele og roadmap i ét lærred.
• Brug 3–9 primære knuder, med 12 som maksimum. Opdel en overbelastet model i oversigts- og detaljefigurer.
• Mærk knuder med 1–6 konkrete ord. Definer forkortelser ved første brug i sidetekst og undgå interne teamnavne, som læsere ikke kan fortolke.
• Mærk enhver betydningsbærende forbindelse med en verbsætning eller overført objekt på 1–6 ord. “Sender hændelser” er tydeligere end “integration.”
• Hold billedteksten på 8–30 ord, og lad den angive den konklusion eller relation, læseren bør huske.
• Hold omfangsangivelsen til én sætning. Angiv udeladelser eller forenklinger, når udeladelse af dem kunne ændre fortolkning.
• Hold tekstaekvivalenten på 50–250 ord, medmindre nøjagtighed kræver mere.
• Brug en forklarende, neutral tone. Adskil hvad systemet gør, fra hvad det måske gør, bør gøre, eller antages at gøre.
• Markér usikkerhed med ord som “måske”, “betinget” eller “foreslået”, og definér stiplede eller prikkede stier i nøglen.
• Placer aldrig afsnit, citater, rå URL’er, reklameslogans, præcise beviser eller komplette instruktioner inde i illustrationen. Placer dem i valgbar sidetekst.
• Brug aldrig ikoner uden mærkater, farve uden et andet signal, eller pile uden erklæret betydning.
• Antyd aldrig skala, kvantitet, kausal styrke, sikkerhed eller målt vækst gennem størrelse eller retning, medmindre beviset og nøglen understøtter den kodning.
• Publicér aldrig en ikke-eksisterende aktivsti; hold igangværende illustration som en capture-kommentar med screenshotsPending = true.

Opslagstyper der bruger det

postTypes i frontmatter er den registrerede sammenkobling. Hver anførte opslagstype bruger den samme diagramkontrakt, men ved en anden tærskel.

QA-tjekliste

• Formål: Én mekanisme eller ét flow er lettere at forstå visuelt end fra prosa alene.
• Tekst først: Den gennemgåede forklaring går forud for illustrationen; ingen ikke-understøttet relation blev tilføjet.
• Omfang: Titel og omfang gør afgrænsninger, forenklinger og udeladelser tydelige.
• Knuder: Der er normalt 3–9, hver konkret og nødvendig.
• Forbindelser: Hver har en retning og en mærkat; stilarter og farver har en nøgle.
• Påstande: Kausalitet, automatisering, skala, styrke, sikkerhed og vækst vises kun, når beviser understøtter dem.
• Tekstaekvivalent: Synlig tekst inkluderer hver knude, relation, betingelse, afgrænsning, nøgle og undtagelse.
• Billedtekst: Den angiver konklusionen på 8–30 ord.
• Tilgængelighed: Farve er ikke det eneste signal; kontrast, pilespidser, alternativ tekst og læserækkefølge fungerer.
• Mobil: Betydning består ved 320 CSS-pixels uden sidescrolling eller påkrævet zoom.
• Placering: Indledende kontekst går forud for diagrammet; billedteksten og tekstaekvivalenten forbliver tilknyttet; konkurrerende tætte visualiseringer sidder ikke ved siden af det.
• Kilde: Forskning, standarder, regulerede processer og tilpassede modeller har en præcis synlig kilde- eller ejerskabsangivelse.
• Portabilitet: Alle mappinger bevarer titel, knuder, forbindelser, billedtekst og tekstaekvivalent.
• Aktivsikkerhed: Filen eksisterer, før en levende sti publiceres, rettigheder er dokumenteret, og igangværende illustration forbliver en SCREENSHOT-kommentar.
• Forrang: Blokken er typet som et diagram, fordi dens formål matcher dette element, ikke fordi et generisk billede tilfældigvis lignede det.

FAQ

Akademisk skabelon gengiver de fem gennemgåede spørgsmål, der er gemt i denne sides [[faq]] frontmatter. De dækker tærsklen for at bruge et diagram, den obligatoriske tekstaekvivalent, alternativ teksts omfang, strukturerede data og knudegrænser.