# Semantik vor Geometrie
URL: https://www.mikebild.dev/de/blog/semantik-vor-geometrie/
Eine waagerechte Reihe aus vier Kästen kann eine Prozesskette, vier gleichrangige Themen oder bloß eine bequeme Verteilung im verfügbaren Platz sein. Die Geometrie allein verrät es nicht. Wer aus Text automatisch eine Infografik erzeugen will, muss deshalb früher ansetzen: bei der Bedeutung der Information und bei der Frage, die ein Leser danach beantworten können soll.
*Teil 14 der Serie „ContentKit – Publishing für Maschinen“.*
ContentKit behandelt visuelle Veröffentlichung als eigene, kontrollierte Pipeline. Markdown bleibt die Quelle. Darin stehen jedoch keine Koordinaten und keine SVG-Pfade. Ein Markdown-Block kennzeichnet die fachliche Struktur eines Abschnitts. Aus dieser Semantik entsteht zunächst eine Narrative. Erst danach folgen Pattern, Layout und Ausgabe.
## Fünf Verantwortungsstufen
Die fünf Stufen erzeugen mehr Schnittstellen als ein direkter Markdown-zu-SVG-Renderer. Sie verhindern aber, dass eine frühe Designentscheidung den Inhalt verfälscht. Stand August 2026 besteht das Kompositionsmodell in ContentKit 4.26.1 aus fünf Stufen: Semantic AST, Narrative, deklaratives Pattern Package, deterministisches Layout und Rendering. Jede Stufe beantwortet eine andere Frage und grenzt eine eigene Verantwortung ab.
```mermaid
flowchart LR
M["Markdown
fachlicher Inhalt"] --> S["Semantic AST
Bedeutung"]
S --> N["Narrative
Frage und Aussage"]
N --> P["Pattern Package
visuelle Erzählform"]
P --> L["Layout
deterministische Geometrie"]
L --> R["Rendering
Ausgabe"]
```
Der Semantic AST hält fest, welche Entitäten vorhanden sind und wie sie zusammenhängen. Die Narrative ordnet diese Bedeutung für die beabsichtigte Erzählung. Die Pipeline wählt anhand des Pattern-Vertrags eine visuelle Form, die den akzeptierten semantischen Strukturen entspricht. Das Layout übersetzt diese Form in deterministische Geometrie. Das Rendering überführt das gelöste Layout in das vorgesehene Ausgabeformat.
Diese Aufteilung ordnet jeden Fehler einer verantwortlichen Stufe zu. Ein Vergleich mit nur einer Seite scheitert bereits an der Semantik. Ein Funnel ohne Reduktion ist ein ungeeignetes Pattern. Ein überlanges Label verletzt ein Inhaltsbudget. Eine fehlerhafte räumliche Anordnung betrifft das Layout. Ohne diese Trennung würden solche Fälle erst in der fertigen Darstellung auffallen – ohne klare Zuordnung, welche Stufe korrigiert werden muss.
## Ein Prozess ist mehr als vier Karten
Der folgende Markdown-Block ist ein schematisches Beispiel und keine zugesicherte ContentKit-Syntax. Er codiert vier geordnete Prozessschritte:
```md
:::process{title="Publish a release" preferredPattern="connected-process"}
- Validate the source
- Build an immutable revision
- Verify the preview
- Activate the release
:::
```
Der resultierende semantische Knoten enthält vier geordnete Schritte. Ein passendes Pattern muss diese Reihenfolge und die gerichteten Übergaben erhalten. Repository-eigene Pattern-Verträge können dafür responsive Fallbacks definieren. Welche Darstellung gewählt wird, entscheidet die Patternstufe; das Layout löst anschließend ihre Geometrie.
Das folgende Diagramm zeigt mögliche Darstellungsformen nur schematisch. Es beschreibt keinen zugesicherten horizontalen oder vertikalen Fallback für diesen Prozess:
```mermaid
flowchart TD
P["Semantik: geordneter Prozess"] --> W{"Darstellung passend?"}
W -->|Variante A| H["verbundene Kette"]
W -->|Variante B| V["lineare Folge"]
H --> O["gleiche Schritte
gleiche Lesereihenfolge"]
V --> O
```
Ein Kreis wäre dagegen nicht bloß eine weitere Variante. Er würde Wiederholung behaupten. Ein Funnel würde Reduktion behaupten. Diese Formen dürfen nicht ausgewählt werden, wenn die Semantik dafür keine Grundlage enthält. Jedes Pattern dokumentiert deshalb, welche Bedeutung es darstellen kann und welche Eingaben es ablehnen muss.
## Die Narrative verhindert dekorative Beliebigkeit
Semantik erklärt die Beziehung innerhalb eines Bausteins. Für eine ganze Seite reicht das noch nicht. Ein Report kann mehrere korrekte Kennzahlen enthalten und trotzdem keine klare Aussage haben. Die Narrative ordnet semantische Bausteine nach Leserfrage, Aussage und Belegfolge, bevor Pattern und Layout diese visuell umsetzen.
Diese Trennung ersetzt keine fachliche Analyse. Sie verhindert, dass die Reihenfolge oder Hervorhebung erst während des Layouts entsteht und damit wie eine bloße Designentscheidung behandelt wird. Die Narrative hält die redaktionelle Absicht getrennt von der späteren visuellen Komposition.
## Patterns sind keine Komponentenbibliothek
Eine Kartenkomponente beschreibt eine Oberfläche. Ein Information Pattern beschreibt, welche semantischen Strukturen es akzeptiert und welche Aussage es darstellen kann. Unpassende semantische Strukturen werden vor dem Layout abgelehnt.
Illustrativ lassen sich verwandte Fakten als Bento-Überblick, gerichtete Übergaben als verbundene Prozesskette, Vergleiche als Matrix und Daten mit Kalenderbezug als Heatmap darstellen. Welche dieser Formen ContentKit für einen konkreten semantischen Knoten akzeptiert, legt der jeweilige Pattern-Vertrag fest. Die Formen sind nicht allein wegen ihrer Geometrie austauschbar.
Jedes Pattern liegt als repository-eigenes, deklaratives Package mit einem eigenen Vertrag vor. Dieser Vertrag beschreibt unter anderem:
- akzeptierte Semantik;
- erforderliche und optionale Inhaltsplätze;
- Fähigkeiten des Patterns;
- Inhaltsbudgets;
- responsive Fallbacks.
Unbekannte oder unpassende Strukturen werden abgelehnt, statt eine nur ungefähr plausible Grafik zu erzeugen. Damit ist die Sammlung ein Vertrag und nicht bloß ein Katalog von Vorschaubildern. Wie viele Patterns die Sammlung zu einem Zeitpunkt enthält, ist bewusst kein Bestandteil dieses Vertrags.
## Nicht alles braucht eine Grafik
Eine Wissensseite mit Navigation, Text, FAQ und Datentabelle ist in zugänglichem HTML gut aufgehoben. Sie bleibt responsiv und für Assistenztechnik unmittelbar verständlich. Eingebettete semantische Blöcke bleiben deshalb zugängliches, responsives HTML und erscheinen zusätzlich in der maschinenlesbaren Semantic AST. Ein nachgelagertes System kann die Struktur lesen, ohne gerenderte Pixel interpretieren zu müssen.
Andere Inhalte können eine visuelle Komposition benötigen. Auch dann bleiben Semantic AST, Narrative, Pattern, Layout und Rendering getrennte Verantwortungsstufen. Die Entscheidung für eine grafische Darstellung folgt aus der fachlichen Struktur und dem Ausgabekontext, nicht aus dem bloßen Vorhandensein eines Renderers.
Wenn zugängliches HTML die Aussage vollständig trägt, muss die Pipeline daraus keine zusätzliche Grafik machen. Die Darstellung folgt damit dem Ausgabekontext, statt alle Bestandteile durch denselben Renderer zu leiten.
## Verträge begrenzen Geometrie und Inhalte
Determinismus allein garantiert noch keine verständliche Darstellung. Er sorgt zunächst dafür, dass dieselben Eingaben zu einer reproduzierbaren Layoutentscheidung führen. Dadurch lässt sich prüfen, ob Semantik, Inhaltsbudgets und Layout zusammenpassen.
Die Pattern-Verträge begrenzen, welche Strukturen und Inhalte eine Darstellung akzeptiert. Unbekannte oder unpassende Strukturen werden abgelehnt. Ein responsiver Fallback muss ebenfalls im Vertrag des Patterns vorgesehen sein; andernfalls darf die Pipeline nicht stillschweigend eine beliebige Form erzeugen.
Diese Prüfung bleibt auf die jeweilige Verantwortungsstufe begrenzt. Fehlende fachliche Beziehungen gehören in die Semantik. Eine ungeeignete visuelle Darstellungsform betrifft das Pattern. Geometrische Probleme müssen im Layout korrigiert werden. Der Rendering-Vertrag muss verhindern, dass solche Fehler durch Auslassung oder Umdeutung verdeckt werden.
## Dieselbe Semantik darf verschiedene Geschichten tragen
Eine semantische Struktur legt nicht jede redaktionelle Entscheidung fest. Drei Prozessschritte können als kurze Übergabe oder als ausführlicher Ablauf erzählt werden. Beide Formen müssen die Richtung bewahren. Ein Zyklus wäre nur korrekt, wenn der letzte Schritt tatsächlich wieder zum ersten führt.
Bei einem Vergleich ist die Bandbreite ähnlich. Zwei Ansätze mit denselben Kriterien können als geteilte Gegenüberstellung oder als Matrix erscheinen. Die geteilte Form hebt einen Hauptunterschied hervor. Die Matrix unterstützt den Vergleich Kriterium für Kriterium. Welche Form passt, hängt von der Leserfrage und vom akzeptierten Pattern-Vertrag ab.
Auch der folgende Block ist nur ein schematisches Beispiel und keine zugesicherte ContentKit-Syntax:
```md
::::comparison{title="Publishing approaches" preferredPattern="comparison-matrix"}
:::side{label="Mutable pages"}
- Immediate per-page updates
- Partial visibility possible
:::
:::side{label="Immutable releases"}
- Complete candidate build
- Atomic activation
:::
::::
```
Der Semantic AST hält beide Seiten und ihre Punkte fest. Die Narrative ordnet sie für die beabsichtigte Aussage. Daraus können unterschiedliche Gewichtungen entstehen, obwohl die fachlichen Daten gleich bleiben.
Diese Freiheit ist absichtlich begrenzt. Der Pattern-Vertrag muss festlegen, dass hervorgehobene Punkte aus dem vorhandenen Inhalt stammen und Gruppierung keine Inhalte unbemerkt auslässt. Für fachlich geordnete Knoten muss er außerdem die Reihenfolge im responsiven Fallback erhalten.
## Reports verbinden mehrere semantische Ebenen
Ein vollständiger Report besteht selten aus nur einem Knoten. Er kann eine zentrale Aussage, Kennzahlen, Fortschritt, ein Diagramm, eine Entscheidung und eine Evidenztabelle enthalten. Die Dokument-Narrative ordnet diese Bausteine; jeder Baustein behält zusätzlich seine eigene Semantik.
Ein Diagramm kann beispielsweise zeigen, welche Kategorie den Ausschlag gab. Eine Kennzahl nennt den aktuellen Wert. Eine Entscheidung beschreibt den nächsten Schritt. Text, Navigation und Tabellen bleiben als zugängliches HTML erhalten. Semantische Blöcke erscheinen zugleich in der maschinenlesbaren Semantic AST; visuelle Bestandteile durchlaufen Pattern, Layout und Rendering.
## Das Cockpit ist Reviewzugang, nicht Ableitungsstufe
Das vorhandene Cockpit dient als Zugang für die menschliche Prüfung. Es liegt außerhalb der semantischen Ableitung und ist keine zusätzliche Stufe zwischen Semantic AST, Narrative, Pattern, Layout und Rendering.
Ein Fehler in der semantischen Ableitung muss deshalb in der fachlichen Quelle oder im zuständigen Vertrag korrigiert werden. Das Cockpit selbst verändert die semantische Ableitung nicht.
## Fazit
Nicht jede semantische Struktur benötigt eine Grafik. Zugängliches HTML bleibt für viele Inhalte die richtige Ausgabe, während die Semantic AST ihre maschinenlesbare Bedeutung erhält. Wo eine visuelle Komposition nötig ist, begrenzen Pattern-Verträge und deterministisches Layout die zulässige Ableitung.
Ohne klar getrennte Verantwortlichkeiten zwischen den Stufen kann der Renderer fachliche Fehler nur noch als Darstellungsfehler sichtbar machen. Änderungen an Reihenfolge oder Bedeutung gehören deshalb in den Semantic AST oder die Narrative, nicht in Layout oder Rendering.
## Weiterführende Quellen
- [ContentKit Visual Compositions](https://github.com/MikeBild/contentkit/blob/94a738ef791ffd5fec12e71eaf6ef64fa556c090/docs/VISUAL_COMPOSITIONS.md)
- [ContentKit Semantic Information Blocks](https://github.com/MikeBild/contentkit/blob/94a738ef791ffd5fec12e71eaf6ef64fa556c090/docs/INFORMATION_BLOCKS.md)
- [ContentKit README](https://github.com/MikeBild/contentkit/blob/94a738ef791ffd5fec12e71eaf6ef64fa556c090/README.md)