Mzone-Publisher · Diagramm-Engine

Die Schönheit des Diagramms

Wie gut eignet sich der MZP für kreative Flow Charts und ausgefeilte Diagramm-Designs?

Der MZP bringt eine eigene serverseitige Diagramm-Engine mit — kein Handzeichnen von SVG nötig. Man liefert strukturiertes JSON (Knoten, Kanten, Zonen), der Server routet Verbindungen automatisch, prüft ein 4px-Raster und rendert im einheitlichen mzone-ui-Skin. Für ausgefeilte visuelle Gestaltung steht daneben das komplette Design-System zur Verfügung: Karten, Kennzahl-Kacheln, Zeitleisten, Legenden, Partikel-Hintergründe und Chart.js-Presets.

Diagrammtypen
35
Knotenformen
3rect · oval · diamond
Flowchart-Budget
9Knoten, 12 Kanten
Design-Vokabular
150+Klassen & Module

Selbstversuch: die MZP-Diagramm-Pipeline als Flowchart

Als Beispiel habe ich den eigenen Publish-Weg des MZP als flowchart modelliert: Eingabe, Validierung, Entscheidung, Fehlerpfad, Veröffentlichung, Rendering und Browser-Check — mit Diamant-Knoten, drei Kantenstilen und zwei Zonen.

Validieren Veröffentlichen & Rendern ja nein stagingToken diagramJson (direkt) Diagramm-JSON Nodes, Edges, Zones validateDiagram() Schema · 4px-Raster · Budget Gültig? Preview-URL TTL 15 Min DIAGRAM_INVALID Fehlerbericht publishDiagram() Slug + Metadaten mzone-ui Renderer Server-Side SVG /published/{slug}/ index.html + diagram.svg Browser-Check visualProof
Abb. 1: Publish-Pfad eines MZP-Diagramms — vom JSON bis zur veröffentlichten Seite.
Standardfluss Kernergebnis / Ja-Zweig Fehlerfall Optionaler Pfad

Einschätzung

  1. Stärke Breites Typ-Spektrum
    35 Diagrammtypen von klassisch (Flowchart, Sequence, ER, Gantt) bis exotisch (Sankey, Treemap, C4, Mindmap, Kanban) — alle mit echtem serverseitigem Renderer statt Platzhalter.
  2. Stärke Automatisches Routing
    Seitenwahl, senkrechtes Andocken, Verteilung mehrerer Kanten an derselben Box-Kante und Ausweichen um fremde Boxen übernimmt der Server. Man liefert Koordinaten, keine Pfade.
  3. Stärke Durchgestyltes Umfeld
    mzone-ui liefert für den Rahmen um das Diagramm herum ein komplettes Vokabular: Hero-Flächen mit Partikel-Effekten, Kennzahl-Kacheln, Findings-Listen, Legenden, Zeitleisten — ein Diagramm wird so Teil eines echten Reports statt einer isolierten Grafik.
  4. Grenze Kleines Komplexitäts-Budget
    Ein Flowchart erlaubt maximal 9 Knoten und 12 Kanten, dazu höchstens 2 Annotation-Callouts. Das erzwingt saubere Abstraktion — für sehr detailreiche Prozessdiagramme muss man in mehrere Diagramme aufteilen.
  5. Beobachtung Engine in dieser Session nicht erreichbar
    validateDiagram und publishDiagram lieferten hier durchgehend „No approval received", unabhängig von Payload-Größe oder renderCheck. Das Diagramm oben ist deshalb Hand-SVG im mzone-ui-Look — keine echte Ausgabe der Engine. Alle Text-, Karten- und Layout-Werkzeuge (publishRawPage u.a.) liefen dagegen normal.

Der Typ-Katalog

Flow & Prozess
flowchart · process · high-level · swimlane · loop · nested · kanban
System & Architektur
architecture · it-state · c4 · data-flow · dp-integration · dp-security-matrix · layers · medallion
Struktur & Beziehungen
sequence · state · er · tree · org-chart · mindmap · venn · pyramid
Daten & Analyse
bar · line · scatter · pie · treemap · sankey · heatmap · funnel · radar · quadrant
Zeit & Planung
timeline · gantt

Report generiert von Claude über den MZP · Slug mzp-beauty-of-diagram