MaierZone Publisher × Diagram Design

Editorial diagrams, native to this platform.

Nicht als eingebettetes Fremd-Widget — sondern als Diagramm, das dieselben Tokens atmet wie der Rest von MZP: paper → surface, ink → text-strong, accent → mz-accent. Handgezeichnetes SVG nach der diagram-design-Spezifikation, im maierzone-Skin.

↓ Scrollen

ZWEI SYSTEME, EIN TOKEN-SATZ

Kein neues Design — ein Onboarding.

diagram-design bringt eine eigene, strenge Editorial-Grammatik mit: 4px-Grid, rechtwinklige Konnektoren, ein Akzent pro Diagramm. Statt die Standard-Palette (weißrauch + atomic-tangerine) zu übernehmen, wird sie exakt so onboardet, wie es die Skill-Spec vorsieht — auf die echten --mz-*-Variablen von MZP.

Was diagram-design mitbringt

  • 4px-Grid — jede Koordinate, Breite, Lücke
  • Rechtwinklige Konnektoren, nie diagonal
  • 1–2 Akzent-Elemente pro Diagramm, nie mehr
  • Form trägt Bedeutung — Farbe nicht
  • Barrierefreier SVG-Vertrag: role, title, desc

Was MZP dazu liefert

  • --mz-accent statt atomic-tangerine
  • --mz-surface / --mz-border als Papier + Hairline
  • Dunkel als Standard, hell reaktiv per Toggle
  • mz-dgm als Rahmen — kein Fremdkörper
  • Ein Rendercheck bei jedem Publish, kein blindes Deploy
ARCHITEKTUR · TYP 1 VON 27

Die Publishing-Pipeline, die diese Seite gerade durchlaufen hat

Kein erfundenes Beispiel — das ist der reale Weg von einer Anfrage bis zur veröffentlichten Seite, inklusive der beiden stillen Abzweigungen, die den Skin liefern.

Die MZP-Publishing-Pipeline Architekturdiagramm: eine Nutzeranfrage durchläuft den diagram-design Skill, wird validiert, gerendert — unter Einbezug von Markenvorgaben und mzone-ui-Tokens — und als versionierte Seite veröffentlicht. User Request "erstelle ein Diagramm" diagram-design 27 visual types MZP Validate schema · budget · geometry Render Engine SVG + HTML Publish /published/{slug}/ Live HTTP 200 · versioniert style-guide.md brand tokens mzone-ui Tokens paper → surface LEGENDE Backend / Engine Referenz (gelesen) Validierungs-Gate Fokal (Publish) Happy Path
Abb. 1 — Architektur. Sechs Kernstationen, zwei stille Referenz-Abzweigungen (gestrichelt), ein Fokalpunkt. Der Akzent sitzt ausschließlich auf dem Pfad Render → Publish → Live — genau die 1–2 Elemente, die die Spec erlaubt.
FLOWCHART · TYP 5 VON 27

Die Entscheidung, die jedem Diagramm vorausgeht

Form trägt Bedeutung, nicht Farbe: Oval bracket den Fluss, Rechteck ist ein Schritt, Raute ist eine Entscheidung. Der Akzent liegt einzig auf dem Happy Path — YES rechts, NO unten, wie die Spec es vorschreibt.

Sollte ich das als Diagramm zeichnen? Flowchart: prüft, ob ein Leser mehr aus einem Bild als aus einem Satz lernt, wählt bei Ja einen von 27 Typen, mit einem editorialen Hinweis zum Laden von Verhaltens-Mustern. NO YES Content-Idee Lernt der Leser mehr aus dem Bild? Text oder Tabelle bleibt Prosa Typ wählen 1 von 27 Diagramm zeichnen 4px-Grid · 1 Akzent verhaltensreich? erst semantic-patterns.md LEGENDE · FORM TRÄGT TYP Start / Ende Schritt Entscheidung Happy Path Editorialer Hinweis
Abb. 2 — Flowchart. Fünf Formen, ein Akzent, ein Callout. Die Typografie kommt nicht aus Geist/Geist Mono, sondern direkt aus --mz-font / --mz-mono — der Serif-Titel bleibt Instrument Serif, weil die Spec das auch bei rein-serifenlosen Marken verlangt.
GETEILTE GESETZE

Zwei Grids, eine Disziplin

Die mzone-ui-Chrome läuft auf ihren eigenen Werten (--mz-radius: 10px, --mz-gap: 14px) — das ist ehrlich nicht dasselbe 4px-Raster wie im Diagramminneren. Zwei saubere Systeme auf zwei Ebenen, keine erfundene Einheitlichkeit.

Visual Types
0
Im MZP-Renderer live
0
Diagramm-Grid
4px
Budget · Knoten / Kanten
9 / 12
DERSELBE PFAD, ALS ZEITLEISTE

Was gerade passiert ist

  1. 01 · REQUEST
    Anfrage: eine Seite, die maierzone-Layout und diagram-design-Diagramme wirklich verschmilzt — nicht nebeneinander, sondern im selben Tokensatz.
  2. 02 · SKILL
    style-guide.md, SKILL.md und type-flowchart.md gelesen — die realen Node-Typen, Konnektor-Regeln und das Annotation-Primitiv, nicht aus dem Gedächtnis geraten.
  3. 03 · TOKENS
    getCapabilities + lookupStyles: die exakten Hex-Werte für Dark und Light aus mzone.css geholt, statt Farben zu schätzen.
  4. 04 · REMAP
    paper → surface, ink → text-strong, accent → mz-accent. Beide Diagramme von Hand nach Spec gezeichnet, mit color-mix() für theme-reaktive Tints.
  5. 05 · PUBLISH
    Über publishArtifact veröffentlicht, mit Rendercheck im echten Browser — kein blindes Deploy.