Diagramme und Illustrationen: Erklären, wie ein Mechanismus funktioniert

Ein Diagramm zeigt, wie benannte Teile verbunden sind, was zwischen ihnen bewegt wird und welches Ergebnis diese Beziehungen hervorbringen. Verwenden Sie es, wenn Leser mehrere Beziehungen gleichzeitig benötigen, während die Erklärung als Text verfügbar bleibt.

Wie eine Seite abrufbar wird: Quellseiten durchlaufen Extraktion und Normalisierung, bevor ihre relevanten Passagen einen Antwortindex erreichen.

1. Quellseiten liefern HTML, Überschriften, Bilder und strukturierte Felder.
2. Extrahieren und normalisieren entfernt Präsentationsrauschen und bewahrt dabei Text, Hierarchie, Entitäten und Beziehungen.
3. Antwortindex speichert abrufbare Passagen, die einer späteren Frage zugeordnet werden können.
4. Der erste Pfeil trägt die Seitendarstellung in die Verarbeitung; der zweite trägt normalisierte, durchsuchbare Passagen in den Index.

Die Zeichnung macht den Ablauf auf einen Blick sichtbar. Die Bildunterschrift und die nummerierte Erklärung tragen dieselbe Bedeutung ohne das Bild. Dieser Zweikanal-Vertrag unterscheidet ein erklärendes Diagramm von dekorativer Grafik.

Warum dieses Element wichtig ist

Prosa kann Leser zwingen, sich mehrere Teile zu merken, bevor gezeigt wird, wie sie zusammenhängen. Ein Diagramm externalisiert dieses Modell: Knoten zeigen Teile, Verbinder zeigen Beziehungen und Grenzen zeigen den Umfang. Es ist am nützlichsten, wenn die Reihenfolge allein nicht ausreicht. Ein Satz kann sagen, dass ein Crawler eine Seite abruft, ein Parser Inhalte extrahiert und ein Index Passagen speichert; ein Diagramm kann auch Fehlerpunkte, parallele Wege und Rückkopplungen zeigen. Es reduziert den Rekonstruktionsaufwand, nicht die Notwendigkeit präziser Formulierungen.

Ein Diagramm kann auch schneller in die Irre führen als Prosa. Ein unbeschrifteter Pfeil kann Kausalität, Übertragung, Abfolge oder Assoziation bedeuten; eine Schleife kann fälschlicherweise automatische Rückkopplung suggerieren. Jede Beziehung benötigt eine explizite, verteidigbare Bedeutung.

Maschinenextrahierbarkeit ist die Fähigkeit von Software, eine Inhaltseinheit zu isolieren, ohne ihre Bedeutung zu verlieren. Suchsysteme, Übersetzungstools, Screenreader und KI-Abrufsysteme können nicht erwarten, einen Mechanismus aus Pixeln zu rekonstruieren. Optische Zeichenerkennung kann Beschriftungen wiederherstellen, aber nicht, was ein Pfeil oder eine Grenze bedeutet. Ein Titel, eine Bildunterschrift, strukturierte Knoten und Verbinder sowie ein sichtbares Textäquivalent machen den Mechanismus ohne Computer Vision extrahierbar.

Die gemeinsamen Element-Schreibregeln legen die Vorrangregel fest: Wählen Sie ein Element nach der Aufgabe, die der Abschnitt erfüllt, nicht nach seiner Überschrift oder seinem Erscheinungsbild. Diese Seite hat Vorrang für diagrammspezifische Felder, Dichtegrenzen, Textäquivalent-Anforderungen und Barrierefreiheitsverhalten. Wenn die Aufgabe des Inhalts darin besteht, einen Mechanismus visuell zu erklären, verwenden Sie das Diagrammelement anstelle eines generischen Bildes mit einer improvisierten Bildunterschrift.

Wann man es verwendet

Verwenden Sie ein Diagramm, wenn die Schlussfolgerung davon abhängt, mindestens zwei Beziehungen gemeinsam zu sehen. Starke Anwendungsfälle sind ein Prozess mit Verzweigungen oder Rückkopplungen, ein System, dessen Komponenten Daten austauschen, ein Lebenszyklus, der in einen früheren Zustand zurückkehrt, eine Kausalkette mit einem intervenierenden Faktor oder ein konzeptionelles Modell, dessen Grenzen von Bedeutung sind. Der Leser sollte in der Lage sein, eine konkrete Frage aus der Zeichnung zu beantworten, wie „Wo kann dieser Prozess scheitern?" oder „Welche Komponente sendet den normalisierten Datensatz?"

Wenden Sie zuerst den Prosa-Test an: Schreiben Sie den Mechanismus in drei bis acht Sätzen. Wenn er keine Querverweise, Verzweigungen, Schleifen oder räumlichen Beziehungen enthält, ist Prosa wahrscheinlich besser. Ein Diagramm verdient seinen Platz, wenn ein genaues Textäquivalent kognitiv aufwändig zusammenzustellen ist.

Knapp daneben ist häufig:

• Verwenden Sie eine Schrittliste für ausführbare Aktionen; Pfeile können keine Voraussetzungen, Erfolgsprüfungen oder Wiederherstellungsanweisungen ersetzen.
• Verwenden Sie eine Vergleichstabelle für wiederholte Attribute bei Alternativen. Ein unbeschriftetes zweiachsiges Bild verbirgt Kriterien.
• Verwenden Sie einen Entscheidungsbaum für Wege, die durch explizite Bedingungen gewählt werden. Ein allgemeiner Ablauf erklärt Bewegung, nicht eine Entscheidung.
• Verwenden Sie einen kommentierten Screenshot, um Steuerelemente in einer realen Oberfläche zu lokalisieren. Eine Nachzeichnung verliert diesen Nachweis.
• Verwenden Sie ein Diagramm, wenn quantitative Skalierung Werte codiert. Ein dekorativer aufsteigender Pfeil darf kein gemessenes Wachstum suggerieren.
• Verwenden Sie ein Inline-Bild, um ein Objekt, einen Ort oder ein Ergebnis darzustellen, nicht einen Mechanismus.

Verwenden Sie ein Diagramm nicht als Dekoration oder eingerahmte Wiederholung. Kennzeichnen Sie hypothetische, umstrittene, bedingte oder vereinfachte Beziehungen sowohl im Bild als auch im Text.

Wo man es platziert

Platzieren Sie das Diagramm nach dem Absatz, der den Mechanismus und die Frage einführt. Lassen Sie das sichtbare Textäquivalent folgen, dann Interpretation, Belege, Einschränkungen oder Handlungen.

Halten Sie Titel, Bild, Bildunterschrift, Legende und Textäquivalent in einer Figure-Region. Nichts darf das Bild von seiner Erklärung trennen. Platzieren Sie ein längeres Äquivalent direkt danach unter „Im Text".

Ein Diagramm darf nicht direkt neben einem anderen vollbreiten Diagramm, Diagramm, Video, einer Bildergalerie, einer dichten Tabelle oder einem Screenshot sitzen. Fügen Sie erklärende Prosa vor der nächsten dichten Visualisierung ein. Platzieren Sie es nicht in einer Tabellenzelle, einem Listenelement, Akkordeon, Callout, einer klickbaren Karte oder einer Figure.

Fügen Sie bei Verfahren eine Übersicht vor dem ersten Schritt ein, nicht zwischen gekoppelten Schritten. Platzieren Sie es bei Argumenten nach der Behauptung des Mechanismus und vor den Belegen. Setzen Sie es auf Produktseiten nach der Erklärung der Funktion, niemals über der direkten Antwort, nur um technisch auszusehen.

Anatomie

Die Anatomie beschreibt die Bedeutung, nicht das Styling. Kastenschatten, Illustrationsstil, Pfeildicke, Eckradius und Hintergrundfarbe gehören zum Renderer oder zur künstlerischen Leitung.

1. Titel: Benennt den Mechanismus oder die Frage in drei bis zehn Wörtern.
2. Gültigkeitsbereich: Definiert in einem Satz, was das Diagramm einschließt, ausschließt oder vereinfacht.
3. Knoten: Stellt eine Komponente, einen Zustand, Akteur, Eingabe oder ein Ergebnis dar.
4. Knotenbeschriftung: Verwendet eine konkrete Nominalphrase, keine unerklärte Abkürzung.
5. Verbinder: Stellt eine deklarierte Beziehung zwischen zwei Knoten dar.
6. Verbindungsbeschriftung: Benennt diese Beziehung mit einem Verb oder übertragenen Objekt, wie „sendet Ereignisse" oder „erzeugt Passagen".
7. Richtungsmarkierung: Zeigt die Lese- oder Übertragungsrichtung an, ohne sich allein auf die Platzierung zu verlassen.
8. Grenze: Gruppiert Elemente, die sich Eigentümerschaft, Phase, Umgebung oder Gültigkeitsbereich teilen.
9. Legende: Definiert jedes Linienmuster, Symbol oder jede Farbe, die die Bedeutung ändert.
10. Bildunterschrift: Formuliert die Hauptschlussfolgerung, anstatt den Titel zu wiederholen.
11. Quellenangabe: Identifiziert den Beleg oder Eigentümer, wenn das Modell aus Forschung, Richtlinien oder einem proprietären System abgeleitet ist.
12. Textäquivalent: Wiederholt jeden bedeutungstragenden Knoten, Verbinder, jede Richtung, Bedingung, Grenze und Ausnahme in lesbarer Reihenfolge.

Gestaltungsbeispiele

Jede Variante erfordert einen Titel, eine Bildunterschrift, ein Textäquivalent und explizite Verbinderbedeutungen. Wählen Sie die einfachste Variante, die die Frage beantwortet.

Linearer Prozessablauf

Verwenden Sie drei bis sieben Stufen, wenn sich der Mechanismus hauptsächlich in eine Richtung bewegt. Beschriften Sie, was sich zwischen den Stufen bewegt; verlassen Sie sich nicht allein auf Pfeile. Wenn der Leser die Stufen ausführen muss, kombinieren Sie die Übersicht mit einer separaten Schrittliste.

Systemkarte

Verwenden Sie drei bis neun Komponenten, wenn Eigentümerschaft, Schnittstellen oder Datenaustausch wichtiger sind als die Chronologie. Grenzen identifizieren Umgebungen oder Teams; sich kreuzende Linien signalisieren die Notwendigkeit, die Ansicht neu zu gruppieren oder aufzuteilen.

Kausalkette

Verwenden Sie dies für eine Ursache, einen intervenierenden Mechanismus und ein Ergebnis. Kennzeichnen Sie Bedingungen und Unsicherheit. Pfeile dürfen niemals Korrelation in Kausalität verwandeln; Prosa und Quellen müssen jede Kausalbehauptung stützen.

Lebenszyklus-Schleife

Verwenden Sie eine Schleife nur, wenn die Ausgabe zu einer späteren Eingabe wird. Nummerieren Sie die Stufen und geben Sie den Neustartauslöser an; ein dekorativer Kreis suggeriert fälschlicherweise Wiederholung.

Übersicht mit Detailausschnitt

Verwenden Sie einen Ausschnitt, wenn eine Komponente Details benötigt, aber vom Systemkontext abhängt. Wiederholen Sie ihre Beschriftung. Mehr als ein Ausschnitt erfordert in der Regel ein separates Diagramm.

Stapeln Sie auf Mobilgeräten lineare Diagramme in Lesereihenfolge. Eine Systemkarte kann zu einer vereinfachten Übersicht plus nummerierten Beziehungen werden. Erfordern Sie niemals horizontales Bildlauf oder Zoom zum Verständnis.

Parameter

Das Inhaltsmodell speichert den Mechanismus. Koordinaten, Farben, Schriftgrößen, Symbolauswahlen, Verbinderführung und responsive Breakpoints gehören zum Renderer oder zur Quellgrafik.

source ist erforderlich für externe Forschung, Standards, regulierte Prozesse oder angepasste Modelle. Jeder Knoten und Verbinder muss im Textäquivalent erscheinen; Prosa kann Wiederholungen kombinieren.

Syntax und Codebeispiele

Die drei Abbildungen bewahren dieselben Felder. Beispiel-Asset-Pfade beschreiben den Produktionsvertrag; sie dürfen nicht als Live-Bildverweise erscheinen, bis diese Dateien existieren.

Portable Markdown-Direktive

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

Die erste Überschrift wird auf title abgebildet; der nächste Absatz auf scope; Item-Direktiven definieren Knoten; Beziehungsdirektiven definieren Verbinder; der Absatz danach wird auf caption abgebildet; und der Abschnitt In text wird auf textEquivalent abgebildet.

Hugo-Shortcode-Abbildung

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

Benannte Parameter werden ausschließlich verwendet. Dies ist eine portable Adapterspezifikation, keine Behauptung, dass diese Shortcodes im aktuellen Theme registriert sind. Bis ein genehmigter Renderer existiert, veröffentlichen Sie eine semantische Figure über die etablierte Bild-Pipeline und behalten Sie ihr Textäquivalent im normalen Seiteninhalt.

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

Speichern Sie Knoten und Verbinder als Blockattribute. Der Export muss sie und das Textäquivalent erhalten; ein flaches Bild ist kein portabler Inhalt.

Beispiele

Gut: Zeichnung und Prosa machen dieselbe Aussage

Die gute Version beantwortet eine Frage: wie aus einer eingereichten Frage eine gestützte Antwort wird. Vier konkrete Knoten folgen einer klaren Richtung. Verbinderbeschriftungen unterscheiden Routing von Abruf und Zusammenstellung. Ein gestrichelter Rückkopplungspfad ist in der Legende als optionale menschliche Prüfung definiert, sodass er keine automatische Schleife suggeriert. Die Bildunterschrift formuliert die Schlussfolgerung und der angrenzende Text benennt jede Stufe und Übertragung.

Dies gibt visuellen Lesern ein schnelles Modell, während der Text denselben Mechanismus und dieselbe Einschränkung trägt. Maschinen erhalten benannte Beziehungen, ohne aus Koordinaten raten zu müssen.

Schlecht: Ein überzeugendes Gewirr ohne erklärte Bedeutung

Die schlechte Version setzt „AI" in die Mitte und umgibt es mit vagen Nomen wie Content, Daten, Nutzer, Vertrauen, Umsatz und Wachstum. Unbeschriftete Pfeile zeigen in beide Richtungen, aber der Leser kann nicht erkennen, ob sie Kausalität, Austausch, Abfolge oder Assoziation bedeuten. Farbe erscheint bedeutungsvoll, hat aber keine Legende. Der Wachstumspfeil suggeriert Verbesserung ohne Daten. Kleine Beschriftungen werden auf Mobilgeräten unleserlich, und keine Prosa erklärt den behaupteten Mechanismus.

Reparieren Sie es, indem Sie eine Frage auswählen, irrelevante Knoten entfernen, Verbinder benennen, Ursachen von Assoziationen trennen und Gültigkeitsbereich, Bildunterschrift, Textäquivalent und Quellen hinzufügen. Wenn nur noch Vorteile übrig bleiben, schreiben Sie eine Liste.

Schema-Markup und Barrierefreiheit

Ein Diagramm hat keinen eigenen Schema.org-Typ oder eine unabhängige Berechtigung für Rich Results. Ein aussagekräftiges Diagramm kann Article.image oder ein ImageObject mit korrekten URL-, Bildunterschriften-, Abmessungs-, Ersteller-, Credit-, Urheberrechts- und Lizenzdaten befüllen. Erfinden Sie keine Metadaten oder ein Beziehungsvokabular; Knoten und Verbinder bleiben sichtbarer Inhalt.

Verwenden Sie <figure> für Bild und Bildunterschrift. Der Alt-Text identifiziert den Mechanismus und die Schlussfolgerung, anstatt sie zu transkribieren. Zielen Sie auf 40–180 Zeichen und vermeiden Sie „Diagramm von". Beispiel: „Dreistufiger Ablauf von Quellseiten durch Extraktion und Normalisierung zu einem Antwortindex."

Das sichtbare Textäquivalent enthält jeden bedeutungsvollen Knoten, Verbinder, jede Bedingung, jeden Rückkopplungsauslöser, jede Grenze, Legende und Ausnahme. Verstecken Sie es nicht in ARIA, Hover-Text, Metadaten oder einem geschlossenen Akkordeon.

Kombinieren Sie Farbe, Symbole, Muster, Form und Position mit Textbeschriftungen. Sorgen Sie für Kontrast, sichtbare Pfeilspitzen und eine Lesereihenfolge, die dem Textäquivalent entspricht. Tatsächlicher SVG-Text ist nützlich, ersetzt aber keine sichtbare Prosa.

Bei 320 CSS-Pixeln stapeln, vereinfachen oder rendern Sie eine mobile Ansicht aus denselben Daten. Entfernen Sie niemals Knoten, schneiden Sie Verbinder ab oder ändern Sie die Lesereihenfolge. Der umgebende Text muss alle wesentliche Bedeutung ohne Zoom bewahren.

Schreibregeln

Schreiben und überprüfen Sie den Text zuerst, zeichnen Sie dann nur Beziehungen, die er enthält. Dies verhindert, dass visuelle Gestaltung Behauptungen einführt.

• Geben Sie dem Diagramm eine Frage oder einen Mechanismus. Kombinieren Sie nicht Architektur, Arbeitsablauf, Vorteile und Roadmap in einer einzigen Zeichenfläche.
• Verwenden Sie 3–9 primäre Knoten, mit maximal 12. Teilen Sie ein überladenes Modell in Übersichts- und Detailgrafiken auf.
• Beschriften Sie Knoten mit 1–6 konkreten Wörtern. Definieren Sie Abkürzungen bei der ersten Verwendung im Seitentext und vermeiden Sie interne Teamnamen, die Leser nicht interpretieren können.
• Beschriften Sie jeden bedeutungstragenden Verbinder mit einer Verbalphrase oder einem übertragenen Objekt von 1–6 Wörtern. „Sendet Ereignisse" ist klarer als „Integration".
• Halten Sie die Bildunterschrift auf 8–30 Wörter und lassen Sie sie die Schlussfolgerung oder Beziehung formulieren, die der Leser behalten soll.
• Halten Sie die Gültigkeitsbereichsangabe auf einen Satz. Geben Sie Ausschlüsse oder Vereinfachungen an, wenn deren Weglassen die Interpretation ändern könnte.
• Halten Sie das Textäquivalent auf 50–250 Wörter, es sei denn, die Genauigkeit erfordert mehr.
• Verwenden Sie einen erklärenden, neutralen Ton. Trennen Sie, was das System tut, von dem, was es tun könnte, tun sollte oder hypothetisch tun würde.
• Kennzeichnen Sie Unsicherheit mit Wörtern wie „kann", „bedingt" oder „vorgeschlagen" und definieren Sie gestrichelte oder gepunktete Pfade in der Legende.
• Platzieren Sie niemals Absätze, Zitate, rohe URLs, Werbeslogans, präzise Belege oder vollständige Anweisungen innerhalb der Grafik. Setzen Sie sie in auswählbaren Seitentext.
• Verwenden Sie niemals Symbole ohne Beschriftungen, Farbe ohne zweiten Hinweis oder Pfeile ohne erklärte Bedeutung.
• Suggerieren Sie niemals Skalierung, Menge, Kausalstärke, Sicherheit oder gemessenes Wachstum durch Größe oder Richtung, es sei denn, die Belege und die Legende unterstützen diese Kodierung.
• Veröffentlichen Sie niemals einen nicht existierenden Asset-Pfad; behalten Sie ausstehende Grafiken als Capture-Kommentar mit screenshotsPending = true.

Beitragstypen, die es verwenden

Das Frontmatter postTypes ist die registrierte Verbindung. Jeder aufgeführte Beitragstyp verwendet denselben Diagrammvertrag, jedoch mit unterschiedlicher Schwelle.

QA-Checkliste

• Zweck: Ein Mechanismus oder Ablauf ist visuell leichter zu erfassen als allein aus Prosa.
• Text zuerst: Die geprüfte Erklärung liegt vor der Grafik; keine nicht belegte Beziehung wurde hinzugefügt.
• Gültigkeitsbereich: Titel und Gültigkeitsbereich machen Grenzen, Vereinfachungen und Ausschlüsse klar.
• Knoten: Es gibt in der Regel 3–9, jeder konkret und notwendig.
• Verbinder: Jeder hat eine Richtung und eine Beschriftung; Stile und Farben haben eine Legende.
• Behauptungen: Kausalität, Automatisierung, Skalierung, Stärke, Sicherheit und Wachstum werden nur gezeigt, wenn Belege sie stützen.
• Textäquivalent: Sichtbarer Text enthält jeden Knoten, jede Beziehung, Bedingung, Grenze, Legende und Ausnahme.
• Bildunterschrift: Sie formuliert die Schlussfolgerung in 8–30 Wörtern.
• Barrierefreiheit: Farbe ist nicht das einzige Unterscheidungsmerkmal; Kontrast, Pfeilspitzen, Alt-Text und Lesereihenfolge funktionieren.
• Mobil: Die Bedeutung bleibt bei 320 CSS-Pixeln ohne seitenweites Scrollen oder erforderlichen Zoom erhalten.
• Platzierung: Einführender Kontext geht dem Diagramm voraus; Bildunterschrift und Textäquivalent bleiben verbunden; konkurrierende dichte Visualisierungen sitzen nicht daneben.
• Quelle: Forschung, Standards, regulierte Prozesse und angepasste Modelle haben eine korrekte sichtbare Quellen- oder Eigentumsangabe.
• Portabilität: Alle Abbildungen bewahren Titel, Knoten, Verbinder, Bildunterschrift und Textäquivalent.
• Asset-Sicherheit: Die Datei existiert, bevor ein Live-Pfad veröffentlicht wird, Rechte sind dokumentiert und ausstehende Grafiken bleiben ein SCREENSHOT-Kommentar.
• Vorrang: Der Block ist als Diagramm typisiert, weil sein Zweck mit diesem Element übereinstimmt, nicht weil ein generisches Bild zufällig ähnlich aussah.

FAQ

Die Academy-Vorlage rendert die fünf geprüften Fragen, die im [[faq]]-Frontmatter dieser Seite gespeichert sind. Sie behandeln die Schwelle für die Verwendung eines Diagramms, das obligatorische Textäquivalent, den Umfang des Alt-Texts, strukturierte Daten und Knotenlimits.