EMPFEHLUNG · MZP-RENDERING · 2026-10-12

Was das Original-diagram-design kann – und MZP noch nicht

Ziel: Beim Rendern von Diagrammen und Charts soll MZP mindestens so viel können wie das Original cathrynlavery/diagram-design. Dieser Bericht listet nur die Features, die das Original hat und MZP fehlen, ordnet sie nach Wirkung und schlägt vor, wie sie in MZP aussehen könnten.

Original: diagram-design 2.6.74 (Commit 7a2e221): 44 Typen, 62 Referenzdateien, 30 Verifier-Skripte, 204 Beispieldateien
MZP: getCapabilities, Stand 2026-10-12: 45 Diagramm-Typen
Methode: Alle Referenzen, Skripte und das Changelog des Originals gelesen. Jede Lücke gegen MZPs typeBlocks-Schemas abgeglichen; wo es nötig war, mit validateDiagram gegengetestet (z.B. meldet bar mit series/stacked „TYPE_BLOCK_UNKNOWN_KEY“).

Kurzfassung

Dem Namen nach deckt MZP 41 der 44 Typen ab und hat dazu vier eigene (c4, mindmap, pie, funnel). Bei Auto-Layout, interaktivem Viewer, Versionierung, Architektur-Regeln und serverseitiger Prüfung ist MZP dem Original deutlich voraus. Die Lücken liegen woanders: im Grammatik-Umfang je Typ und in allem, was um das Rendern herum passiert.

FEHLENDE TYPEN

3
Architecture delta, Exploded axonometric, Axonometric plan

FEHLENDE VARIANTEN

13
u.a. Slopegraph, Bump, Streamgraph, Ridgeline, Bubble, Beeswarm, Dumbbell, gestapelte/gruppierte Balken, Marimekko

SEMANTISCHE MUSTER

9
Verhaltensmuster mit eigenen Grundelementen; MZP hat 8 Architektur-Rezepte, aber keine davon

QUERSCHNITT

6 Bereiche
Größen-Presets mit Typo-Rampe, Detail/Zielgruppe, Daten-Verträge, Motion, Importe, Brand-Onboarding

1 · Diagrammtypen, die MZP fehlen

Typ	Was das Original kann	Stand MZP	Vorschlag
Architecture delta	Eine Abbildung in drei Feldern: Before · Changes · After. Beide Topologien liegen auf demselben Raster, dieselbe Id behält ihre Lage, damit das Bild im Kopf stabil bleibt. Das Änderungsprotokoll in der Mitte nutzt das Vokabular `ADDED / REMOVED / CHANGED / MOVED / REWIRED` und kodiert jeden Zustand zusätzlich zur Farbe über Form oder Strichart. Budget: 8 Komponenten, 10 Beziehungen, 8 Einträge.	`diffDiagram` liefert eine `deltaUrl` (Before \| Delta \| After) zwischen zwei Versionen. Das ist eine Ansicht, kein eigenes gestaltetes Diagramm: es gibt kein Protokoll als Abbildungsteil und kein MOVED/REWIRED-Vokabular.	Neuer Typ `architecture-delta` mit `before`/`after` (je nodes/edges) oder `fromSlug@v1 → v2`. Der Server übernimmt die Before-Koordinaten in After und erzeugt das Protokoll aus dem vorhandenen diff-Modell.
Exploded axonometric	Ein Objekt in 2:1-Dimetrie (eine `iso()`-Funktion für alle Punkte), die Teile in gleichen Abständen entlang einer Achse auseinandergezogen, Beschriftungen waagerecht mit Führungslinien. Beispiele: Phone-Teardown, Unboxing, App-Stack, AI-Agent-Stack, Tastatur. Optional animiert: das Objekt öffnet sich einmal. Eigener Verifier prüft Abstände und Lift.	Kein Gegenstück. `layers` zeichnet flache Bänder ohne Grundfläche und Dicke.	Typ `exploded` mit `parts[{label, w, d, h, r, focal}]`. Die Projektion rechnet der Server, damit die Pixel ganzzahlig bleiben.
Axonometric plan	Eine Etage oder ein Gelände in derselben Projektion: Wände auf Tischhöhe geschnitten, Türen als Lücken, Möbel und Gebäude als Quader, Regale mit Fachböden, Straßen als flache Markierung, Gebäude nach Bauphase markiert. Budget: 8 Räume/Gebäude, 40 Quader, 1 Fokus.	Kein Gegenstück.	Typ `axonometric-plan` auf Basis des Exploded-Projektionskerns. Beide Typen teilen sich denselben Renderer.

2 · Fehlende Varianten innerhalb vorhandener Typen

Das wiegt am schwersten: In MZP haben die meisten Chart-Typen nur ein flaches Schema (bars[{label,value}], series[{name,points}], points[{x,y}]). Das Original hat zu jedem Typ mehrere benannte Varianten, jede mit eigenem Layout-Vertrag.

Typ	Variante (Original)	Wofür	Prio
bar	Gruppierte Balken	Zwei Reihen je Kategorie nebeneinander (Akzent und series-1)	P1
	Gestapelte Balken	Segmente bis zur Summe, Summe über dem Stapel	P1
	Dumbbell	Zwei Punkte pro Zeile auf einer gemeinsamen Skala; der Abstand ist die Aussage (Soll/Ist, vorher/nachher)	P1
line	Slopegraph	Genau zwei Zeitpunkte, viele Reihen; Richtung, Steilheit, Überholungen	P1
	Bump chart	Rangwechsel über 3–6 Zeitpunkte, Zeilen auf festem Raster	P2
	Streamgraph	Gesamtmenge und Zusammensetzung über viele Perioden, symmetrische Basislinie	P2
	Ridgeline	Eine Verteilung pro Reihe, überlappend gestapelt, gemeinsame Amplitude	P2
scatter	Bubble	Drei Werte; Fläche proportional zum Wert (vom Verifier geprüft)	P1
scatter	Beeswarm	Ein Punkt pro Element auf einer Achse, ausgewichen statt verwackelt (bis ca. 300 Punkte)	P2
treemap	Marimekko	Zweifacher Teil-vom-Ganzen-Vergleich: Spaltenbreite × Segmenthöhe	P2
quadrant	Consultant 2×2	Vier benannte Szenarien statt Punktwolke, doppelseitige Achsenpfeile, ein Fokus-Quadrant	P2
state	Lifecycle phase map	Hauptschiene mit 4–5 Phasen, eigenes Band für Warten/Retry, eigenes Band für Endzustände	P2
tree	Block decomposition	Stabile IDs als Badge (`PAY-001-02`), `data-block-*`-Metadaten, Registry-Export	P3

Vorschlag zur Umsetzung: meta.variant ist schon belegt (Skin). Besser ein eigenes Feld chart: "slopegraph" | "bump" | … auf oberster Ebene, mit eigenem typeBlock-Schema je Variante, abrufbar über getCapabilities(topic='line.slopegraph').

3 · Semantische Muster (Verhalten vor Layout)

Das Original wählt zuerst ein Verhaltensmuster und dann den Typ. Jedes Muster bringt eigene Pflicht-Grundelemente, ein eigenes Budget, Anti-Patterns und ein statisches Fallback mit. Die Architektur-Rezepte in MZP (layers, hexagonal, cqrs, saga …) sind etwas anderes: Sie beschreiben Strukturen, keine Verhaltensmuster.

Muster	Pflicht-Grundelemente, die MZP heute nicht zeichnen kann	Typ
Fan-in queue / bottleneck	Geordnete Warteschlange mit sichtbaren Slots und Zähler, Kapazitätslabel (`8/h`), Ausgänge „angenommen“ und „zurückgestellt“	data-flow
Stage framework mit Slots	Raster Stufe × Slot (Frage/Input/Governance/Output) mit ausdrücklich leeren Zellen (`—`)	process
Unstrukturiert → strukturiertes Artefakt	Ausschnitt aus der Quelle, Feld/Wert-Paare, Herkunftslinks von Aussage zu Feld, Zustand „unbekannt“	data-flow
Paired policy traces	Zwei Spuren mit denselben Regeln, Status `PASS / FAIL / SKIPPED / NOT REACHED` als Text plus Symbol, Marker für die erste Abweichung	flowchart
Secure paved road	Erlaubte und verbotene Wege; ein verbotener Weg endet sichtbar an der Grenze (Stop-Symbol), dazu Bypass-Pfad und privilegiertes Gate	architecture
Governance / control catalog	Kontrollen gruppiert nach Durchsetzungsort, Attribute Akteur/Zeitpunkt/umgehbar, Lücken-Notation	layers
Compensating security layers	Restrisiko wird zwischen den Schichten weitergereicht; am Ende steht eine Restrisiko-Aussage	layers
Traceable block decomposition	ID-Badges, `data-block-input/output/constraint/impl`, Registry-JSON	tree
Lifecycle phase map	Drei Bänder: Fortschritt, Unterbrechung/Erholung, Ende	state

Die MZP-Architektur-rules (forbid) decken beim Paved Road nur die Prüfung ab, nicht die Darstellung („endet an der Grenze“). Vorschlag: getCapabilities(topic='pattern-fan-in') usw. mit fertigem diagramJson, dazu die wenigen fehlenden Grundelemente als nodeType/shape: queue-slots, status-cell, stop, provenance-Kante.

4 · Ausgabe-Dials: Größe, Detail, Zielgruppe

Dial	Original	MZP
Größe	10 Presets: `doc-inline 960×600`, `doc-wide`, `slide-16x9 1280×720`, `slide-4x3`, `social-og 1200×632`, `social-square`, `print-a4/a3/letter-landscape`, `fit`. Jedes Preset bringt eine eigene Typo-Rampe mit (eine projizierte Folie bekommt 16px-Knotennamen statt 12px), dazu Sicherheitsränder und eine Regel, wie `fit` abgeleitet wird.	Nur `viewBoxWidth/Height`. Die Schriftgrößen sind fest (Knotenname 12px, Pfeil-Label 8px, Eyebrow 7px), egal wie groß das Ziel ist.
Detail	`faithful` (≤24 Knoten, Zonen Pflicht), `balanced` (≤12), `simplified` (≤7), mit fester Abbau-Leiter: Deko, dann Duplikate (`Worker ×6`), dann Blatt-Cluster, dann Senken, dann Infrastruktur, danach aufteilen.	Import (drawio/mermaid/ascii) übernimmt alles 1:1, oder das Budget schlägt an.
Zielgruppe	`engineer / mixed / executive` ändert die Wortwahl, nicht die Anzahl: `Auth Service · JWT RS256 :8443` → `token check` → `Sign-in`.	—
Fidelity-Ledger	Nach jedem verkleinernden Import: was zusammengefasst, eingeklappt oder weggelassen wurde.	—

Vorschlag: meta.size als Preset, das viewBox und Typo-Rampe setzt (größter Hebel bei kleinstem Aufwand). Dazu meta.detail beim Import mit serverseitiger Abbau-Leiter und einer Notice IMPORT_LEDGER {merged, collapsed, dropped}. Die Zielgruppe bleibt Aufgabe des Agenten, MZP liefert die Regeln über getCapabilities(topic='audience').

5 · Ehrliche Daten: Verträge und Verifier pro Chart

Jeder quantitative Typ im Original hat eine Honest-data rule: Jede gezeichnete Größe ist an ein data-*-Attribut gebunden, und ein eigener Verifier rechnet die Geometrie gegen diese Werte nach. MZP prüft Layout und Kollisionen sehr gut, aber nicht, ob ein Chart die Daten ehrlich abbildet.

Sankey
Erhaltungsregel: Jede Spalte summiert sich auf dieselbe Höhe (Zufluss = Abfluss), sonst ist ein Leck in den Daten. Fester Maßstab k px/Einheit, Budget 3 Stufen. Außerdem rechnet das Original die Lage selbst aus den Flüssen; in MZP sind x/y beim Sankey Pflicht.
Heatmap
Eine Tinten-Rampe (ink mit Deckkraft 0,05–0,70, monoton) und genau eine Fokuszelle in Akzentfarbe. Die Fokuszelle zählt nicht zur Skala, ihr Wert steht in der Fußnote. MZP färbt alle Zellen in einer Akzent-Rampe und hat kein focal.
Legenden-Polarität
verify-skin-polarity: Legendentext muss in hellem und dunklem Skin stimmen („stärkerer Kontrast = mehr“, nie „dunkler = mehr“). Das betrifft Treemap, Heatmap und Line.
Bubble / Bump / Ridgeline / Waterfall / Treemap
Fläche proportional zum Wert, Rangzeilen exakt auf dem Raster, gemeinsame Amplitude, Erhaltung der laufenden Summe, Anteil jeder Zelle. Jeweils mit eigenem Verifier und Tests in beide Richtungen.
Quellenzeile
Jedes Chart hat rechts neben der Legende eine Zeile in Mono 8px: was die Fläche oder Länge kodiert, Datensatz und Datum. MZP hat dafür kein Feld.

Vorschlag: Der MZP-Renderer schreibt data-value/data-share an jede Marke, und ein neuer Prüfschritt DATA_FIDELITY rechnet gegen die Geometrie nach. Dazu meta.source für die Quellenzeile.

6 · Motion als Erklärung

Original	MZP heute
Modi `none / reveal / step / loop` direkt in der statischen Abbildung, ohne Viewer. Der statische erste Frame ist immer vollständig; mit `?motion=static` bzw. `?motion=step&step=N` lässt sich jeder Frame deterministisch aufnehmen.	`meta.animation=trace` und `meta.simulation`, beide nur mit `interactive=true`.
Acht semantische Grundelemente: Pfad zeichnen, gestaffeltes Einblenden, Warteschlangen-Zähler, Tippen/Felder füllen, Regel-Auswertung, Fluss-Token, Containment, Audit-Zeilen anhängen.	Token auf der Kante, Knoten einfärben (active/reject/commit/review/pass). Regel-Auswertung lässt sich mit simulation annähern, die anderen Elemente fehlen.
Typ-spezifische Motion: Explode-Animation, Bauphasen auf dem Campus, Paved Road, Queue.	—
Tastaturbedienung (←/→/Home/End/Space/R), Live-Region, ein Takt mit festen Tokens, höchstens 8 s.	Teilweise im Viewer.

Vorschlag: meta.motion = {mode, steps:[{items:[nodeId|edgeId], kind}]} auch ohne interactive, also als CSS im exportierten SVG. Dazu die Grundelemente queue-counter, field-fill und audit-append als Schritt-Arten.

7 · Import-Breite

Quelle	Original	MZP
Excalidraw	`.excalidraw` und `.excalidraw.json`: Formen, gebundene Labels, Frames, Gruppen, Pfeile in beide Richtungen; doppelte IDs werden abgelehnt	fehlt (nur als Artefakt-Datei erlaubt)
Mermaid `sequenceDiagram`	Unterstützt: zitierte Teilnehmer, `create`, das ganze Pfeil-Vokabular	MERMAID_UNSUPPORTED
Mermaid in Markdown	Mehrere fenced-Blöcke, `--diagram N\|all`, v11-Syntax `@{ shape: … }`, mehrzeilige Markdown-Labels	Nur reiner Mermaid-Text
draw.io-Container	`.drawio.png` und `.drawio.svg` mit eingebettetem Diagramm	Nur mxfile/mxGraphModel
draw.io mehrseitig	`--page N\|NAME\|all`, eine Datei pro Seite, jede mit eigenem Typ	Nur die erste Seite (DRAWIO_PAGES_IGNORED)
Digest	Hubs, einklappbare Gruppen und Budget-Flags als Grundlage für die Abbau-Leiter	—

Umgekehrt hat MZP hier, was dem Original fehlt: Mermaid classDiagram, ASCII-Skizzen und drawio mit Overlay.

8 · Brand-Onboarding und Schrift

Feature	Original	MZP
Brand von einer URL	Website laden, Palette und Schriften auslesen, semantischen Rollen zuordnen, Diff vorschlagen. Danach ein Beleg: geprüfte URLs, Schriftquellen, Fallbacks, Prüfung per `getComputedStyle`.	`saveBrandingProfile` nimmt Farben entgegen und prüft den Kontrast (gut), kann aber nichts aus einer URL auslesen.
Projekt-Marker	`.diagram-design` mit `profile: slug`; beim ersten Diagramm fragt das Original nach, statt still im Default-Skin zu rendern.	`meta.profile` muss pro Diagramm gesetzt werden.
Nicht-lateinische Schrift	Font-Stacks für JP/KR/SC/TC/Kyrillisch, CJK-Glyphen im SVG-Export, Labelbreiten-Budget für CJK (Treemap schlägt sicher fehl, statt zu überlaufen).	zu prüfen: Inter, Space Grotesk und Plex Mono haben keine CJK-Glyphen
Brand-Schriften	Die öffentlichen Schriften der Marke werden direkt genutzt und verifiziert.	Feste maierzone-Schriften; `typography` im Profil ist optional, ob der Renderer es nutzt, ist zu prüfen

9 · Export

Feature	Original	MZP
Eigenständiges SVG für Figma, Illustrator, PowerPoint	`export_svg.py`: Klassen-CSS wird inline übernommen, `<defs>`-IDs bekommen einen Namensraum, `rgba()` und `transparent` werden für PowerPoint normalisiert, Fonts per `@import` oder `--system-fonts`.	„SVG laden“ liefert das Diagramm-SVG mit `/lib/…`-relativen `@font-face`-URLs, die außerhalb von MZP ins Leere zeigen. Nicht PPT-normalisiert.
Exakte Pixelgröße	OG-Card oder Folienbild exakt aus viewBox × Skalierung	`scale 1–4` auf die feste viewBox
Registry-Export	`--registry` erzeugt `.registry.json` aus den Block-Metadaten	—
Motion-Frame	Statischer Endzustand oder ausdrücklich benannter Schritt N	—

10 · Prüfungen, die das Original hat

A11y-Text
Das Original verlangt in <desc> einen Satz über den Inhalt. MZP schreibt eine Zählung („Diagramm vom Typ quadrant mit 0 Knoten und 0 Kanten“), und das ist bei Charts sogar falsch, denn sie haben nie Knoten. Vorschlag: meta.description, Pflicht bei Charts.
Kontrast-Gate
WCAG-Prüfung für jeden Skin: Text ≥ 4,5:1, wesentliche Marken ≥ 3:1, auf hellem und dunklem Papier. MZP prüft das nur bei eigenen Profilen; die eingebauten Varianten sollten in CI genauso geprüft werden.
Mobile Render-Lint
lint-render.py rendert jede Seite bei 390px und prüft: kein Seiten-Überlauf, eigener Scroller pro Diagramm, min-width = viewBox-Breite (sonst schrumpft die Typo-Rampe auf dem Handy unter die Lesegrenze). Das sollte auch für die MZP-Seitenhülle gelten.
Label-Masken-Geometrie
Regel 6 („die Maske liegt vor dem Knoten“) und der feste Abstand von 6–10px zwischen Label-Maske und Strich. MZP misst labelOverlaps, aber nicht den Mindestabstand.
Taste-Gate
Abschnitte „Not this type“ in jeder Typ-Referenz, „Würde eine Tabelle reichen?“, Remove-Test, Plan bestätigen vor dem Zeichnen. Das könnte MZP als getCapabilities(topic='<typ>').notFor mitliefern.
Galerie
assets/index.html zeigt alle 44 Typen mit Tabs für hell, dunkel und Full-Editorial (204 Beispieldateien). Für MZP wäre eine Typ-Galerie (wie all-icons-v2) zugleich Regressionstest und Doku.

Roadmap-Empfehlung

Prio	Paket	Begründung	Aufwand
P1	`meta.size`-Presets mit Typo-Rampe	Wirkt auf jedes Diagramm; Folien und OG-Cards werden erst damit lesbar	S
P1	Bar: gruppiert, gestapelt, Dumbbell; Line: Slopegraph; Scatter: Bubble	Die häufigsten Chart-Fragen, die MZP heute nicht beantworten kann	M
P1	Typ `architecture-delta`	Die diff-Infrastruktur steht schon; fehlt nur die gestaltete Abbildung mit Protokoll	M
P2	Bump, Streamgraph, Ridgeline, Beeswarm, Marimekko, Consultant 2×2, Lifecycle phase map	Restliche Varianten bis zum Gleichstand	M–L
P2	9 semantische Muster als Rezepte plus 4 Grundelemente	Größter Qualitätshebel bei Prozess- und Security-Diagrammen	M
P2	Import: Mermaid sequence, Excalidraw, drawio mehrseitig/png/svg, Mermaid aus Markdown; Detail-Dial und Ledger	Bestehende Diagramme kommen ohne Handarbeit herein	M
P2	Daten-Verträge: `data-value`, DATA_FIDELITY, Heatmap-Tintenrampe mit Fokus, `meta.source`, `meta.description`	Charts werden nachprüfbar	M
P3	Projektionskern plus `exploded` und `axonometric-plan`	Eigenständig und auffällig, aber eine Nische	L
P3	Statische Motion (reveal/step) mit semantischen Grundelementen	Erklärende Animation ohne Viewer, auch im Export	M
P3	Brand aus URL, CJK/Kyrillisch, PPT-sicheres SVG, Registry-Export, Typ-Galerie	Abrundung	S–M je Paket

ZUR EINORDNUNG – WO MZP SCHON VORN LIEGT

Auto-Layout mit Constraints, interaktiver Viewer (Suche, Reach-Trace, Routen-Sonde, Kapitel, Simulation), Architektur-Regeln und Sichten, Drill-down, Versionierung mit diffDiagram und queryDiagram, serverseitige Prüfung mit visualProof und LAYOUT_QUALITY, Formen (Zylinder, Hexagon, Cloud …), über 200 Icons, Mermaid-classDiagram, ASCII, drawio-Overlay sowie die Typen c4, mindmap, pie und funnel. Diese Liste ist hier nur der Fairness halber; die Empfehlung oben schließt ausschließlich die Lücken zum Original.

Anhang · beim Gegentesten nebenbei aufgefallen

line: Die x-Achse beginnt immer bei 0. Jahreszahlen (2019–2022) landen dadurch alle in einer Pixelspalte bei x≈920.
bar mit negativem Wert erzeugt height="-66" unterhalb der viewBox, und die Validierung meldet trotzdem ok. Wertachsen-Ticks fehlen.
sankey ohne x/y: Alle Knoten landen bei 0/0, nichts ist sichtbar, die Validierung meldet ok (nur INFO LAYOUT_NOT_SUPPORTED).
er: Die Kardinalität steht als Text (1:n) im Label statt an den Kantenenden, die Kanten haben Pfeilspitzen, und der Entitätsname überlappt die erste Feldzeile.
Die Schema-Doku markiert quadrant.axisLabels und sequence.autonumber mit „zeichnet nichts“. Beide werden aber gezeichnet.