Diagram och illustrationer: Förklara hur en mekanism fungerar

Ett diagram visar hur namngivna delar hänger ihop, vad som rör sig mellan dem och vilket resultat dessa relationer ger. Använd det när läsare behöver flera relationer samtidigt, samtidigt som förklaringen finns tillgänglig som text.

Hur en sida blir sökbar: källsidor passerar genom extrahering och normalisering innan deras användbara passager når ett svarsindex.

1. Källsidor tillhandahåller HTML, rubriker, bilder och strukturerade fält.
2. Extrahera och normalisera tar bort presentationsbrus samtidigt som text, hierarki, entiteter och relationer bevaras.
3. Svarsindex lagrar sökbara passager som kan matchas mot en senare fråga.
4. Den första pilen bär sidrepresentationen in i bearbetningen; den andra bär normaliserade, sökbara passager in i indexet.

Teckningen gör flödet synligt i ett ögonkast. Bildtexten och den numrerade förklaringen bär samma innebörd utan bilden. Detta tvåkanaiskontrakt skiljer ett förklarande diagram från dekorativ grafik.

Varför detta element är viktigt

Prosa kan tvinga läsare att komma ihåg flera delar innan de får reda på hur de hänger ihop. Ett diagram externaliserar den modellen: noder visar delar, kopplingar visar relationer och gränser visar omfattning. Det är mest användbart när enbart ordning inte räcker. En mening kan säga att en crawler hämtar en sida, en parser extraherar innehåll och ett index lagrar passager; ett diagram kan också visa felpunkter, parallella vägar och återkoppling. Det minskar rekonstruktionsansträngningen, inte behovet av exakt formulering.

Ett diagram kan också vilseleda snabbare än prosa. En oetiketterad pil kan betyda orsakssamband, överföring, sekvens eller association; en loop kan falskeligen implicera automatisk återkoppling. Varje relation behöver en explicit, försvarbar innebörd.

Maskinutvinnbarhet är förmågan hos mjukvara att isolera en innehållsenhet utan att förlora dess innebörd. Söksystem, översättningsverktyg, skärmläsare och AI-hämtningssystem kan inte förväntas rekonstruera en mekanism från pixlar. Optisk teckenigenkänning kan återvinna etiketter, men inte vad en pil eller gräns betyder. En titel, bildtext, strukturerade noder och kopplingar samt en synlig textmotsvarighet gör mekanismen utvinningsbar utan datorseende.

De gemensamma elementets skrivregler fastställer prioritetsregeln: välj ett element efter vilket jobb passagen utför, inte efter dess rubrik eller utseende. Denna sida har prioritet för diagramspecifika fält, densitetsgränser, textmotsvarighetskrav och tillgänglighetsbeteende. Om innehållets uppgift är att visuellt förklara en mekanism, använd diagramelementet istället för en generisk bild med en improviserad bildtext.

När det ska användas

Använd ett diagram när slutsatsen beror på att se åtminstone två relationer tillsammans. Starka användningsområden inkluderar en process med förgreningar eller återkoppling, ett system vars komponenter utbyter data, en livscykel som återgår till ett tidigare tillstånd, en orsakskedja med en mellanliggande faktor, eller en konceptuell modell där gränser spelar roll. Läsaren bör kunna besvara en konkret fråga från teckningen, som “Var kan denna process misslyckas?” eller “Vilken komponent skickar den normaliserade posten?”

Tillämpa prostestet först: skriv mekanismen i tre till åtta meningar. Om den saknar korsreferens, förgrening, loop eller rumslig relation är prosa troligen bättre. Ett diagram förtjänar sin plats när en korrekt textmotsvarighet är kognitivt dyr att sammanställa.

Nära överträdelser är vanliga:

• Använd en steglista för utförbara handlingar; pilar kan inte ersätta förkunskapskrav, kontroll av framgång eller återhämtningsinstruktioner.
• Använd en jämförelsetabell för återkommande attribut över alternativ. En oetiketterad tvåaxlig bild döljer kriterier.
• Använd ett beslutsträd för vägar som väljs genom explicita villkor. Ett allmänt flöde förklarar förflyttning, inte ett beslut.
• Använd en kommenterad skärmdump för att lokalisera kontroller i ett verkligt gränssnitt. En nytolkning förlorar den bevisningen.
• Använd ett diagram när kvantitativ skala kodar värden. En dekorativ stigande pil får inte implicera uppmätt tillväxt.
• Använd en inline-bild för att avbilda ett föremål, en plats eller ett resultat snarare än en mekanism.

Använd inte ett diagram som dekoration eller upprepning i en box. Markera hypotetiska, omtvistade, villkorade eller förenklade relationer i både bild och text.

Var det ska placeras

Placera diagrammet efter stycket som introducerar mekanismen och frågan. Följ upp med den synliga textmotsvarigheten, sedan tolkning, bevis, begränsningar eller handlingar.

Håll titel, bild, bildtext, teckenförklaring och textmotsvarighet inom ett figurblock. Ingenting får skilja bilden från dess förklaring. Placera en längre motsvarighet direkt efter den under rubriken “I text”.

Ett diagram får inte sitta direkt bredvid ett annat helbreddsdiagram, diagram, video, bildgalleri, tät tabell eller skärmdump. Sätt in förklarande prosa innan nästa täta visuella element. Placera det inte inuti en tabellcell, listobjekt, accordion, utrop, klickbart kort eller figur.

För procedurer, placera en översikt före den första handlingen, inte mellan kopplade steg. I argumentation, placera den efter mekanismpåståendet och före bevis. På produktsidor, placera den efter kapacitetsförklaringen, aldrig ovanför det direkta svaret bara för att se teknisk ut.

Anatomi

Anatomin beskriver innebörd, inte styling. Boxskuggor, illustrationsstil, piltjocklek, hörnradie och bakgrundsfärg tillhör renderaren eller den konstnärliga riktningen.

1. Titel: Namnger mekanismen eller frågan i tre till tio ord.
2. Omfattningsangivelse: Definierar i en mening vad diagrammet inkluderar, exkluderar eller förenklar.
3. Nod: Representerar en komponent, ett tillstånd, en aktör, en indata eller ett utfall.
4. Nodetiket: Använder en konkret nominalfras, inte en oförklarad förkortning.
5. Koppling: Representerar en deklarerad relation mellan två noder.
6. Kopplingsetiket: Namnger relationen med ett verb eller överfört objekt, såsom “skickar händelser” eller “producerar passager”.
7. Riktningsmarkör: Visar läs- eller överföringsriktningen utan att förlita sig enbart på placering.
8. Gräns: Grupperar objekt som delar ägarskap, fas, miljö eller omfattning.
9. Teckenförklaring: Definierar varje linjemönster, symbol eller färg som ändrar innebörd.
10. Bildtext: Anger den huvudsakliga slutsatsen snarare än att upprepa titeln.
11. Källanteckning: Identifierar beviset eller ägaren när modellen härrör från forskning, policy eller ett proprietärt system.
12. Textmotsvarighet: Återger varje betydelsebärande nod, koppling, riktning, villkor, gräns och undantag i läsbar ordning.

Designexempel

Varje variant kräver en titel, bildtext, textmotsvarighet och explicita kopplingsbetydelser. Välj den enklaste varianten som besvarar frågan.

Linjärt processflöde

Använd tre till sju steg när mekanismen huvudsakligen rör sig i en riktning. Etikettera vad som rör sig mellan stegen; förlita dig inte enbart på pilar. Om läsaren måste utföra stegen, para ihop översikten med en separat steglista.

Systemkarta

Använd tre till nio komponenter när ägarskap, gränssnitt eller datautbyte är viktigare än kronologi. Gränser identifierar miljöer eller team; korsande linjer signalerar ett behov av att omgruppera eller dela upp vyn.

Orsakskedja

Använd denna för en orsak, mellanliggande mekanism och utfall. Markera villkor och osäkerhet. Pilar får aldrig omvandla korrelation till kausalitet; prosa och källor måste underbygga varje kausalpåstående.

Livscykelloop

Använd en loop endast när utdata blir en senare indata. Numrera stegen och ange återstartsutlösaren; en dekorativ cirkel indikerar falskeligen upprepning.

Översikt med detaljinfälld vy

Använd en infälld vy när en komponent behöver detaljer men är beroende av systemkontext. Upprepa dess etikett. Mer än en infälld vy kräver vanligtvis ett separat diagram.

På mobil, stapla linjära diagram i läsordning. En systemkarta kan bli en förenklad översikt plus numrerade relationer. Kräv aldrig horisontell sidscrollning eller zoom för att förstå innebörden.

Parametrar

Innehållsmodellen lagrar mekanismen. Koordinater, färger, teckenstorlekar, ikonval, kopplingsdragning och responsiva brytpunkter tillhör renderaren eller den konstnärliga källan.

source krävs för extern forskning, standarder, reglerade processer eller anpassade modeller. Varje nod och koppling måste förekomma i textmotsvarigheten; prosa kan kombinera upprepning.

Syntax och kodexempel

De tre mappningarna bevarar samma fält. Exempel på tillgångssökvägar beskriver produktionskontraktet; de får inte visas som levande bildreferenser förrän dessa filer finns.

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örsta rubriken mappas till title; nästa stycke mappas till scope; artikel-direktiv definierar noder; relationsdirektiv definierar kopplingar; stycket efter dem mappas till caption; och avsnittet In text mappas till textEquivalent.

Hugo shortcode-mappning

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

Namngivna parametrar används uteslutande. Detta är en portabel adapter-specifikation, inte ett påstående om att dessa shortcodes är registrerade i det aktuella temat. Tills en godkänd renderare finns, publicera en semantisk figur genom den etablerade bildpipelinen och behåll dess textmotsvarighet i normalt sidinnehåll.

WordPress-block

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

Lagra noder och kopplingar som blockattribut. Export måste behålla dem och textmotsvarigheten; en tillplattad bild är inte portabelt innehåll.

Exempel

Bra: teckningen och prosan gör samma påstående

Den bra versionen besvarar en fråga: hur en inskickad fråga blir ett underbyggt svar. Fyra konkreta noder följer en tydlig riktning. Kopplingsetiketter skiljer routning från hämtning och sammanställning. En streckad återkopplingsväg definieras i teckenförklaringen som frivillig mänsklig granskning, så den implicerar inte en automatisk loop. Bildtexten anger slutsatsen, och den intilliggande texten namnger varje steg och överföring.

Detta ger visuella läsare en snabb modell samtidigt som texten bär samma mekanism och kvalifikation. Maskiner får namngivna relationer utan att behöva gissa från koordinater.

Dåligt: en övertalande härva utan deklarerad innebörd

Den dåliga versionen sätter “AI” i centrum och omger det med vaga substantiv som innehåll, data, användare, förtroende, intäkter och tillväxt. Oetiketterade pilar pekar åt båda hållen, men läsaren kan inte avgöra om de betyder orsakssamband, utbyte, sekvens eller association. Färg verkar meningsfull men har ingen teckenförklaring. Tillväxtpilen antyder förbättring utan data. Små etiketter blir oläsliga på mobil, och ingen prosa förklarar den påstådda mekanismen.

Åtgärda det genom att välja en fråga, ta bort irrelevanta noder, namnge kopplingar, separera orsaker från associationer och lägga till omfattning, bildtext, textmotsvarighet och källor. Om bara fördelar återstår, skriv en lista.

Schemamärkning och tillgänglighet

Ett diagram har ingen dedikerad Schema.org-typ eller självständig rich-result-berättigande. Ett meningsfullt diagram kan fylla Article.image eller ett ImageObject med korrekt URL, bildtext, dimensioner, skapare, credits, upphovsrätt och licensdata. Hitta inte på metadata eller en relationsvokabulär; noder och kopplingar förblir synligt innehåll.

Använd <figure> för bild och bildtext. Alt-text identifierar mekanismen och slutsatsen snarare än att transkribera den. Sikta på 40–180 tecken och undvik “diagram över.” Exempel: “Three-stage flow from source pages through extraction and normalization to an answer index.”

Den synliga textmotsvarigheten inkluderar varje meningsfull nod, koppling, villkor, återkopplingsutlösare, gräns, teckenförklaring och undantag. Dölj den inte i ARIA, hover-text, metadata eller en stängd accordion.

Para ihop färg, ikoner, mönster, form och position med textetiketter. Behåll kontrast, synliga pilspetsar och en läsordning som matchar textmotsvarigheten. Riktig SVG-text är användbar men ersätter inte synlig prosa.

Vid 320 CSS-pixlar, stapla, förenkla eller rendera en mobilvy från samma data. Ta aldrig bort noder, beskära kopplingar eller ändra läsordning. Närliggande text måste behålla all väsentlig innebörd utan zoom.

Skrivregler

Skriv och verifiera texten först, rita sedan endast de relationer den innehåller. Detta förhindrar att visuell puts inför nya påståenden.

• Ge diagrammet en fråga eller mekanism. Kombinera inte arkitektur, arbetsflöde, fördelar och färdplan i en enda canvas.
• Använd 3–9 primära noder, med 12 som max. Dela upp en överbelastad modell i översikts- och detaljfigurer.
• Etikettera noder med 1–6 konkreta ord. Definiera förkortningar vid första användning i sidtext och undvik interna teamnamn som läsare inte kan tolka.
• Etikettera varje betydelsebärande koppling med en verbfras eller överfört objekt på 1–6 ord. “Skickar händelser” är tydligare än “integration.”
• Håll bildtexten till 8–30 ord och låt den ange den slutsats eller relation läsaren bör komma ihåg.
• Håll omfattningsangivelsen till en mening. Ange undantag eller förenklingar när utelämnande skulle kunna ändra tolkningen.
• Håll textmotsvarigheten till 50–250 ord om inte noggrannhet kräver mer.
• Använd en förklarande, neutral ton. Separera vad systemet gör från vad det kan göra, bör göra eller antas göra.
• Markera osäkerhet med ord som “kan”, “villkorlig” eller “föreslagen”, och definiera streckade eller prickade vägar i teckenförklaringen.
• Lägg aldrig stycken, citat, råa webbadresser, reklamslogans, precisa bevis eller fullständiga instruktioner inuti bildmaterialet. Placera dem i valbar sidtext.
• Använd aldrig ikoner utan etiketter, färg utan en andra signal, eller pilar utan deklarerad innebörd.
• Implicera aldrig skala, kvantitet, kausal styrka, säkerhet eller uppmätt tillväxt genom storlek eller riktning om inte bevisen och teckenförklaringen stödjer den kodningen.
• Publicera aldrig en icke-existerande tillgångssökväg; behåll pågående bildmaterial som en capture-kommentar med screenshotsPending = true.

Inläggstyper som använder det

postTypes-frontmatter är den registrerade kopplingen. Varje listad inläggstyp använder samma diagramkontrakt men vid en annan tröskel.

QA-checklista

• Syfte: En mekanism eller ett flöde är lättare att greppa visuellt än från enbart prosa.
• Text först: Den granskade förklaringen föregår bildmaterialet; ingen ogrundad relation har lagts till.
• Omfattning: Titel och omfattning gör gränser, förenklingar och undantag tydliga.
• Noder: Det finns vanligtvis 3–9, var och en konkret och nödvändig.
• Kopplingar: Varje har riktning och en etikett; stilar och färger har en teckenförklaring.
• Påståenden: Kausalitet, automatisering, skala, styrka, säkerhet och tillväxt visas endast när bevis stödjer dem.
• Textmotsvarighet: Synlig text inkluderar varje nod, relation, villkor, gräns, teckenförklaring och undantag.
• Bildtext: Den anger slutsatsen i 8–30 ord.
• Tillgänglighet: Färg är inte den enda signalen; kontrast, pilspetsar, alt-text och läsordning fungerar.
• Mobil: Innebörden överlever vid 320 CSS-pixlar utan sidövergripande scrollning eller obligatorisk zoom.
• Placering: Introducerande sammanhang föregår diagrammet; bildtexten och textmotsvarigheten förblir kopplade; konkurrerande täta visuella element sitter inte bredvid det.
• Källa: Forskning, standarder, reglerade processer och anpassade modeller har en korrekt synlig källa eller ägarskapsanteckning.
• Portabilitet: Alla mappningar bevarar titel, noder, kopplingar, bildtext och textmotsvarighet.
• Tillgångssäkerhet: Filen finns innan en levande sökväg publiceras, rättigheter dokumenteras och pågående bildmaterial förblir en SCREENSHOT-kommentar.
• Prioritet: Blocket är typat som ett diagram eftersom dess syfte matchar detta element, inte för att en generisk bild råkar se likadan ut.

FAQ

Academy-mallen renderar de fem granskade frågorna som lagras i denna sidas [[faq]]-frontmatter. De täcker tröskeln för att använda ett diagram, den obligatoriska textmotsvarigheten, alt-textens omfattning, strukturerad data och nodbegränsningar.