Diagrammen en illustraties: uitleggen hoe een mechanisme werkt

Een diagram laat zien hoe benoemde onderdelen verbonden zijn, wat er tussen beweegt en welke uitkomst die relaties opleveren. Gebruik het wanneer lezers meerdere relaties tegelijk nodig hebben, terwijl u de uitleg beschikbaar houdt als tekst.

Hoe een pagina opvraagbaar wordt: bronpagina’s doorlopen extractie en normalisatie voordat hun bruikbare passages een antwoordindex bereiken.

1. Bronpagina’s leveren HTML, koppen, afbeeldingen en gestructureerde velden.
2. Extraheren en normaliseren verwijdert presentatieruis terwijl tekst, hiërarchie, entiteiten en relaties behouden blijven.
3. Antwoordindex slaat opvraagbare passages op die kunnen worden gekoppeld aan een latere vraag.
4. De eerste pijl draagt de paginarepresentatie naar de verwerking; de tweede draagt genormaliseerde, doorzoekbare passages naar de index.

De tekening maakt de stroom in één oogopslag zichtbaar. Het bijschrift en de genummerde uitleg dragen dezelfde betekenis zonder de afbeelding. Dat tweetrapscontract onderscheidt een verklarend diagram van decoratieve beeldkunst.

Waarom dit element ertoe doet

Proza kan lezers dwingen om meerdere delen te onthouden voordat wordt onthuld hoe ze zich verhouden. Een diagram externaliseert dat model: knooppunten tonen onderdelen, verbindingen tonen relaties en grenzen tonen reikwijdte. Het is het nuttigst wanneer volgorde alleen niet volstaat. Een zin kan zeggen dat een crawler een pagina ophaalt, een parser inhoud extraheert en een index passages opslaat; een diagram kan ook faalpunten, parallelle routes en feedback tonen. Het vermindert reconstructie-inspanning, niet de noodzaak voor precieze formulering.

Een diagram kan ook sneller misleiden dan proza. Een ongelabelde pijl kan causaliteit, overdracht, volgorde of associatie betekenen; een lus kan ten onrechte automatische feedback suggereren. Elke relatie heeft een expliciete, verdedigbare betekenis nodig.

Machine-uittrekbaarheid is het vermogen van software om een inhoudseenheid te isoleren zonder de betekenis ervan te verliezen. Zoeksystemen, vertaaltools, schermlezers en AI-ophaalsystemen kunnen niet worden geacht een mechanisme te reconstrueren uit pixels. Optische tekenherkenning kan labels herstellen, maar niet wat een pijl of grens betekent. Een titel, bijschrift, gestructureerde knooppunten en verbindingen, en een zichtbaar tekstequivalent maken het mechanisme uittrekbaar zonder computervisie.

De gedeelde schrijfregels voor elementen stellen de voorrangsregel vast: kies een element op basis van de taak die de passage uitvoert, niet op basis van de kop of het uiterlijk. Deze pagina heeft voorrang voor diagramspecifieke velden, dichtheidslimieten, tekstequivalentvereisten en toegankelijkheidsgedrag. Als de taak van de inhoud is om een mechanisme visueel uit te leggen, gebruik dan het diagramelement in plaats van een generieke afbeelding met een geïmproviseerd bijschrift.

Wanneer gebruiken

Gebruik een diagram wanneer de conclusie afhangt van het samen zien van ten minste twee relaties. Sterke toepassingen zijn onder meer een proces met vertakkingen of feedback, een systeem waarvan componenten gegevens uitwisselen, een levenscyclus die terugkeert naar een eerdere toestand, een causale keten met een tussenliggende factor, of een conceptueel model waarvan de grenzen ertoe doen. De lezer moet een concrete vraag uit de tekening kunnen beantwoorden, zoals “Waar kan dit proces mislukken?” of “Welke component verzendt het genormaliseerde record?”

Pas eerst de prozatest toe: schrijf het mechanisme in drie tot acht zinnen. Als het geen kruisverwijzing, vertakking, lus of ruimtelijke relatie heeft, is proza waarschijnlijk beter. Een diagram verdient zijn ruimte wanneer een accuraat tekstequivalent cognitief duur is om samen te stellen.

Bijna-goed zijn gebruikelijk:

• Gebruik een stappenlijst voor uitvoerbare handelingen; pijlen kunnen vereisten, succescentroles of herstelinstructies niet vervangen.
• Gebruik een vergelijkingstabel voor herhaalde kenmerken bij alternatieven. Een ongelabeld tweetassig plaatje verbergt criteria.
• Gebruik een beslisboom voor routes die worden gekozen op basis van expliciete voorwaarden. Een algemene stroom verklaart beweging, niet een beslissing.
• Gebruik een geannoteerde screenshot om bedieningselementen in een echte interface te lokaliseren. Een hertekening verliest dat bewijs.
• Gebruik een grafiek wanneer kwantitatieve schaal waarden codeert. Een decoratieve stijgende pijl mag geen gemeten groei impliceren.
• Gebruik een inline-afbeelding om een object, plaats of resultaat weer te geven in plaats van een mechanisme.

Gebruik geen diagram als decoratie of omkaderde herhaling. Markeer hypothetische, betwiste, voorwaardelijke of vereenvoudigde relaties in zowel afbeelding als tekst.

Waar plaatsen

Plaats het diagram na de alinea die het mechanisme en de vraag introduceert. Laat het volgen door het zichtbare tekstequivalent, vervolgens interpretatie, bewijs, beperkingen of acties.

Houd titel, afbeelding, bijschrift, legenda en tekstequivalent in één figuurgebied. Niets mag de afbeelding scheiden van de uitleg. Plaats een langer equivalent direct erna onder “In tekst”.

Een diagram mag niet direct naast een ander volledig diagram, grafiek, video, afbeeldingsgalerij, dichte tabel of screenshot staan. Voeg verklarend proza in vóór het volgende dichte visuele element. Plaats het niet in een tabelcel, lijstitem, accordeon, callout, aanklikbare kaart of figuur.

Bij procedures plaatst u een overzicht vóór de eerste handeling, niet tussen gekoppelde stappen. Bij argumenten plaatst u het na de mechanismebewering en vóór bewijs. Op productpagina’s plaatst u het na de uitleg van de mogelijkheid, nooit boven het directe antwoord alleen om er technisch uit te zien.

Anatomie

De anatomie beschrijft betekenis, niet stijl. Arcering van vakken, illustratiestijl, pijldikte, hoekradius en achtergrondkleur behoren tot de renderer of artistieke richting.

1. Titel: Benoemt het mechanisme of de vraag in drie tot tien woorden.
2. Reikwijdteverklaring: Definieert in één zin wat het diagram bevat, uitsluit of vereenvoudigt.
3. Knooppunt: Vertegenwoordigt één component, toestand, actor, invoer of uitkomst.
4. Knooppuntlabel: Gebruikt een concrete zelfstandige naamwoordgroep, geen onverklaarde afkorting.
5. Verbinding: Vertegenwoordigt één verklaarde relatie tussen twee knooppunten.
6. Verbindingslabel: Benoemt die relatie met een werkwoord of overgedragen object, zoals “verzendt gebeurtenissen” of “produceert passages.”
7. Richtingsmarkering: Toont de lees- of overdrachtsrichting zonder alleen op plaatsing te vertrouwen.
8. Grens: Groepeert items die eigendom, fase, omgeving of reikwijdte delen.
9. Legenda: Definieert elk lijnpatroon, symbool of kleur die de betekenis verandert.
10. Bijschrift: Vermeldt de voornaamste conclusie zonder de titel te herhalen.
11. Bronvermelding: Identificeert het bewijs of de eigenaar wanneer het model is afgeleid van onderzoek, beleid of een propriëtair systeem.
12. Tekstequivalent: Herschrijft elk betekenisdragend knooppunt, verbinding, richting, voorwaarde, grens en uitzondering in leesbare volgorde.

Ontwerpvoorbeelden

Elke variant vereist een titel, bijschrift, tekstequivalent en expliciete verbindingsbetekenissen. Kies de eenvoudigste variant die de vraag beantwoordt.

Lineair processtroomschema

Gebruik drie tot zeven fasen wanneer het mechanisme voornamelijk in één richting beweegt. Label wat er tussen fasen beweegt; vertrouw niet alleen op pijlen. Als de lezer de fasen moet uitvoeren, koppel het overzicht dan aan een aparte stappenlijst.

Systeemkaart

Gebruik drie tot negen componenten wanneer eigendom, interfaces of gegevensuitwisseling belangrijker zijn dan chronologie. Grenzen identificeren omgevingen of teams; kruisende lijnen geven aan dat er behoefte is om het beeld te hergroeperen of te splitsen.

Causale keten

Gebruik dit voor een oorzaak, tussenliggend mechanisme en uitkomst. Markeer voorwaarden en onzekerheid. Pijlen mogen nooit van correlatie causaliteit maken; proza en bronnen moeten elke causale bewering ondersteunen.

Levenscyclusslus

Gebruik een lus alleen wanneer uitvoer een latere invoer wordt. Nummer fasen en vermeld de herstarttrigger; een decoratieve cirkel impliceert ten onrechte herhaling.

Overzicht met detailvenster

Gebruik één venster wanneer een component detail nodig heeft maar afhankelijk is van systeemcontext. Herhaal het label. Meer dan één venster vereist meestal een apart diagram.

Stapel op mobiel lineaire diagrammen in leesvolgorde. Een systeemkaart kan worden omgezet in een vereenvoudigd overzicht plus genummerde relaties. Zorg dat horizontaal scrollen of zoomen op de pagina nooit nodig is voor de betekenis.

Parameters

Het inhoudsmodel slaat het mechanisme op. Coördinaten, kleuren, lettergroottes, pictogramkeuzes, routering van verbindingen en responsieve breekpunten behoren tot de renderer of bronafbeelding.

source is vereist voor extern onderzoek, normen, gereguleerde processen of aangepaste modellen. Elk knooppunt en elke verbinding moet in het tekstequivalent voorkomen; proza mag herhaling combineren.

Syntax en codevoorbeelden

De drie mappings behouden dezelfde velden. Voorbeeldassetpaden beschrijven het productiecontract; ze mogen niet als live afbeeldingsverwijzingen verschijnen totdat die bestanden bestaan.

Draagbare Markdown-directive

:::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"}
## Hoe een pagina opvraagbaar wordt

Het model dekt de verwerking van inhoud nadat een pagina is opgehaald.

::item{id=source-pages}
### Bronpagina's

Leveren HTML, koppen, afbeeldingen en gestructureerde velden.
::
::item{id=extract-normalize}
### Extraheren en normaliseren

Behoud nuttige tekst, hiërarchie, entiteiten en relaties.
::
::item{id=answer-index}
### Antwoordindex

Slaat passages op die kunnen worden gekoppeld aan een vraag.
::
::relationship{from=source-pages to=extract-normalize label="verzendt paginarepresentatie" kind=flow}
::relationship{from=extract-normalize to=answer-index label="produceert opvraagbare passages" kind=flow}

Genormaliseerde passages bereiken de antwoordindex alleen nadat nuttige structuur is behouden.

### In tekst

Bronpagina's sturen hun paginarepresentatie naar extractie en normalisatie. Die fase behoudt nuttige tekst, hiërarchie, entiteiten en relaties en produceert vervolgens opvraagbare passages voor de antwoordindex.
:::

De eerste kop wordt toegewezen aan title; de volgende alinea aan scope; itemdirectives definiëren knooppunten; relationshipdirectives definiëren verbindingen; de alinea erna wordt toegewezen aan caption; en de sectie In tekst wordt toegewezen aan 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" >}}
## Hoe een pagina opvraagbaar wordt
{{< diagram-node id="source-pages" label="Source pages" >}}Levert pagina-inhoud.{{< /diagram-node >}}
{{< diagram-node id="extract-normalize" label="Extract and normalize" >}}Behoudt nuttige structuur.{{< /diagram-node >}}
{{< diagram-node id="answer-index" label="Answer index" >}}Slaat passages op.{{< /diagram-node >}}
{{< diagram-relationship from="source-pages" to="extract-normalize" label="verzendt paginarepresentatie" kind="flow" >}}
{{< diagram-relationship from="extract-normalize" to="answer-index" label="produceert opvraagbare passages" kind="flow" >}}
### In tekst
Bronpagina's sturen inhoud voor extractie en normalisatie, die passages produceert voor de antwoordindex.
{{< /diagram >}}

Genoemde parameters worden exclusief gebruikt. Dit is een draagbare adapterspecificatie, geen bewering dat deze shortcodes in het huidige thema zijn geregistreerd. Totdat een goedgekeurde renderer bestaat, publiceert u een semantische figuur via de gevestigde afbeeldingspijplijn en houdt u het tekstequivalent in normale paginainhoud.

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>Hoe een pagina opvraagbaar wordt</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>Genormaliseerde passages bereiken de antwoordindex alleen nadat nuttige structuur is behouden.</figcaption>
  <div class="diagram-text-equivalent">
    <h3>In tekst</h3>
    <p>Bronpagina's sturen inhoud voor extractie en normalisatie, die passages produceert voor de antwoordindex.</p>
  </div>
</figure>
<!-- /wp:amicited/diagram -->

Sla knooppunten en verbindingen op als blokattributen. Export moet deze en het tekstequivalent behouden; een platgeslagen afbeelding is geen draagbare inhoud.

Voorbeelden

Goed: de tekening en het proza maken dezelfde bewering

De goede versie beantwoordt één vraag: hoe een ingediende vraag een onderbouwd antwoord wordt. Vier concrete knooppunten volgen een duidelijke richting. Verbindingslabels onderscheiden routering van ophalen en samenstelling. Een gestippeld feedbackpad is in de legenda gedefinieerd als optionele menselijke beoordeling, dus het impliceert geen automatische lus. Het bijschrift vermeldt de conclusie en de nabijgelegen tekst benoemt elke fase en overdracht.

Dit geeft visuele lezers een snel model terwijl tekst hetzelfde mechanisme en dezelfde kwalificatie draagt. Machines ontvangen benoemde relaties zonder te raden op basis van coördinaten.

Slecht: een overtuigende kluwen zonder verklaarde betekenis

De slechte versie plaatst “AI” in het midden en omringt het met vage zelfstandige naamwoorden zoals content, data, gebruikers, vertrouwen, omzet en groei. Ongelabelde pijlen wijzen beide kanten op, maar de lezer kan niet zien of ze causaliteit, uitwisseling, volgorde of associatie betekenen. Kleur lijkt betekenisvol maar heeft geen legenda. De groeipijl impliceert verbetering zonder gegevens. Kleine labels worden onleesbaar op mobiel en geen proza legt het beweerde mechanisme uit.

Herstel het door één vraag te kiezen, irrelevante knooppunten te verwijderen, verbindingen te benoemen, oorzaken te scheiden van associaties en reikwijdte, bijschrift, tekstequivalent en bronnen toe te voegen. Als alleen voordelen overblijven, schrijf dan een lijst.

Schema-markup en toegankelijkheid

Een diagram heeft geen speciaal Schema.org-type of onafhankelijke rich-result-geschiktheid. Een betekenisvol diagram kan Article.image of een ImageObject vullen met accurate URL, bijschrift, afmetingen, maker, credit, copyright en licentiegegevens. Verzin geen metadata of een relatievocabulaire; knooppunten en verbindingen blijven zichtbare inhoud.

Gebruik <figure> voor afbeelding en bijschrift. Alt-tekst identificeert het mechanisme en de conclusie in plaats van het te transcriberen. Streef naar 40–180 tekens en vermijd “diagram van.” Voorbeeld: “Three-stage flow from source pages through extraction and normalization to an answer index.”

Het zichtbare tekstequivalent omvat elk betekenisvol knooppunt, verbinding, voorwaarde, feedbacktrigger, grens, legenda en uitzondering. Verberg het niet in ARIA, hovertekst, metadata of een gesloten accordeon.

Combineer kleur, pictogrammen, patronen, vorm en positie met tekstlabels. Zorg voor contrast, zichtbare pijpunten en een leesvolgorde die overeenkomt met het tekstequivalent. Echte SVG-tekst is nuttig, maar vervangt zichtbaar proza niet.

Stapel bij 320 CSS-pixels, vereenvoudig of render een mobiele weergave van dezelfde gegevens. Verwijder nooit knooppunten, knip nooit verbindingen bij en verander nooit de leesvolgorde. Nabijgelegen tekst moet alle essentiële betekenis behouden zonder inzoomen.

Schrijfregels

Schrijf en verifieer eerst de tekst, teken dan alleen relaties die deze bevat. Dit voorkomt dat visuele verfraaiing beweringen introduceert.

• Geef het diagram één vraag of mechanisme. Combineer architectuur, workflow, voordelen en routekaart niet in één canvas.
• Gebruik 3–9 primaire knooppunten, met 12 als maximum. Splits een overladen model op in overzichts- en detailfiguren.
• Label knooppunten met 1–6 concrete woorden. Definieer afkortingen bij eerste gebruik in paginatekst en vermijd interne teamnamen die lezers niet kunnen interpreteren.
• Label elke betekenisdragende verbinding met een werkwoordgroep of overgedragen object van 1–6 woorden. “Verzendt gebeurtenissen” is duidelijker dan “integratie.”
• Houd het bijschrift op 8–30 woorden en laat het de conclusie of relatie vermelden die de lezer moet onthouden.
• Houd de reikwijdteverklaring op één zin. Vermeld uitsluitingen of vereenvoudigingen wanneer het weglaten ervan de interpretatie zou kunnen veranderen.
• Houd het tekstequivalent op 50–250 woorden, tenzij nauwkeurigheid meer vereist.
• Gebruik een verklarende, neutrale toon. Scheid wat het systeem doet van wat het kan doen, zou moeten doen of waarvan wordt verondersteld dat het doet.
• Markeer onzekerheid met woorden zoals “kan”, “voorwaardelijk” of “voorgesteld” en definieer gestreepte of gestippelde paden in de legenda.
• Plaats nooit alinea’s, citaten, ruwe URL’s, promotionele slogans, precies bewijs of volledige instructies in het kunstwerk. Plaats ze in selecteerbare paginatekst.
• Gebruik nooit pictogrammen zonder labels, kleur zonder tweede aanwijzing of pijlen zonder verklaarde betekenis.
• Impliceer nooit schaal, kwantiteit, causale kracht, zekerheid of gemeten groei door grootte of richting, tenzij het bewijs en de legenda die codering ondersteunen.
• Publiceer nooit een niet-bestaand assetpad; houd aanstaand beeldmateriaal als een SCREENSHOT-commentaar met screenshotsPending = true.

Posttypes die het gebruiken

De postTypes-frontmatter is de geregistreerde koppeling. Elk vermeld posttype gebruikt hetzelfde diagramcontract maar op een ander drempelniveau.

QA-checklist

• Doel: Eén mechanisme of stroom is gemakkelijker visueel te begrijpen dan uit alleen proza.
• Eerst tekst: De beoordeelde uitleg dateert van vóór het kunstwerk; er is geen ongefundeerde relatie toegevoegd.
• Reikwijdte: Titel en reikwijdte maken grenzen, vereenvoudigingen en uitsluitingen duidelijk.
• Knooppunten: Er zijn meestal 3–9, elk concreet en noodzakelijk.
• Verbindingen: Elke heeft een richting en een label; stijlen en kleuren hebben een legenda.
• Beweringen: Causaliteit, automatisering, schaal, sterkte, zekerheid en groei worden alleen getoond wanneer bewijs ze ondersteunt.
• Tekstequivalent: Zichtbare tekst bevat elk knooppunt, relatie, voorwaarde, grens, legenda en uitzondering.
• Bijschrift: Het vermeldt de conclusie in 8–30 woorden.
• Toegankelijkheid: Kleur is niet de enige aanwijzing; contrast, pijpunten, alt-tekst en leesvolgorde werken.
• Mobiel: Betekenis blijft behouden bij 320 CSS-pixels zonder paginaniveau scrollen of vereist zoomen.
• Plaatsing: Inleidende context gaat aan het diagram vooraf; het bijschrift en tekst-equivalent blijven verbonden; concurrerende dichte visuele elementen staan er niet naast.
• Bron: Onderzoek, normen, gereguleerde processen en aangepaste modellen hebben een accurate zichtbare bron- of eigendomsverwijzing.
• Draagbaarheid: Alle mappings behouden titel, knooppunten, verbindingen, bijschrift en tekstequivalent.
• Assetveiligheid: Het bestand bestaat voordat een live pad wordt gepubliceerd, rechten zijn gedocumenteerd en aanstaand beeldmateriaal blijft een SCREENSHOT-commentaar.
• Voorrang: Het blok is getypeerd als diagram omdat het doel overeenkomt met dit element, niet omdat een generieke afbeelding toevallig vergelijkbaar leek.

FAQ

De academy-sjabloon geeft de vijf beoordeelde vragen weer die zijn opgeslagen in de [[faq]]-frontmatter van deze pagina. Ze behandelen de drempel voor het gebruik van een diagram, het verplichte tekstequivalent, alt-tekst-reikwijdte, gestructureerde gegevens en knooppuntlimieten.