Mermaid-Diagramme

Flussdiagramm

Die Grundfläche bleibt einfarbig — Flächen #ebf4fb, Ränder #a6ceee, beide wörtlich aus assets/organigramm/zvv-organigramm.svg. Farbe kommt nur dort dazu, wo sie etwas aussagt: die drei Rollen (Quelle · Auslieferung · Konsum) über classDef, nicht über die Theme-Variablen. Die Klassen liefert MERMAID_CLASS_DEFS fertig aus dem Paket, damit keine Hex-Werte im Diagramm-Quelltext veralten.

Sequenzdiagramm — der eigentliche Test

Sequenzdiagramme haben eigene Theme-Variablen (actorBkg, signalColor, noteBkgColor …). Werden sie vergessen, steht dieses Diagramm in Mermaids Standardgelb, während das Flussdiagramm oben blau ist — der häufigste Fehler beim Umfärben, weil er erst beim ersten Sequenzdiagramm auffällt.

Zeitstrahl — die zweite Farbfalle

Zeitstrahl-, Reise- und Torten-Diagramme färben ihre Abschnitte nicht über primaryColor, sondern über eigene durchnummerierte Reihen (cScale0…cScale11, pie1…pie12, git0…git7). Bleiben die ungesetzt, steht der Zeitstrahl in Mermaids Regenbogen neben blauen Flussdiagrammen — dieselbe Falle wie das Sequenzdiagramm-Gelb, nur eine Diagrammfamilie weiter. Die Reihen tragen jetzt die sieben ZVV-Akzente aus dem Organigramm; Plätze 8–12 sind abgedunkelte Wiederholungen, damit auch dort weisse Beschriftung AA bleibt.

Torte

Zusätzlich zur pie-Reihe braucht es pieOpacity: 1 — Mermaids Standard von 0.7 wäscht die Akzente zu Pastell aus — und pieSectionTextColor: #ffffff, weil die Beschriftung hier auf der Fläche steht und nicht daneben.

Lange Beschriftungen

Mermaid deckelt Knoten-Beschriftungen standardmässig bei 200 px und schneidet ab statt umzubrechen. Erkennungsmerkmal: genau die langen Labels sind exakt 200.0 px breit, kurze haben ihre natürliche Breite. Hier greift wrappingWidth: 260 — nach oben ist der Wert ebenso begrenzt: bei 340 wurden diese Boxen 356 px breit statt 300. Kantenlabels haben eine eigene Deckelung und ziehen zusätzlich die Ränge auseinander; sie sind der häufigste Grund für ein zu breites Gesamtdiagramm.

Verwendung

Der Kern: Mermaid misst die Beschriftungsrahmen mit der Schrift des body und rendert mit themeVariables.fontFamily. Weichen die beiden ab, passt der Text nicht in seinen Rahmen — gemessen: 200 px Text in einem 163 px breiten Rahmen, Faktor 0.815. Eine CSS-Regel auf svg text verschlimmert das, weil sie nur die Darstellung ändert, nicht die Messung.

import {
  mermaidTheme,
  MERMAID_WRAPPING_WIDTH,
  MERMAID_NODE_PADDING,
} from '@zvvch/atlas'

// Erst wenn die Schriften geladen sind — sonst misst Mermaid mit dem Ersatzfont
if (document.fonts?.ready) await document.fonts.ready

mermaid.initialize({
  startOnLoad: false,
  securityLevel: 'strict',
  theme: 'base',                       // zwingend: nur 'base' laesst sich sauber umfaerben
  themeVariables: mermaidTheme({
    dark: resolvedTheme === 'dark',
    fontFamily: getComputedStyle(document.body).fontFamily,   // dieselbe Schrift wie beim Messen
  }),
  flowchart: {
    wrappingWidth: MERMAID_WRAPPING_WIDTH,   // 260 statt abschneidender 200
    padding: MERMAID_NODE_PADDING,           // 10 statt 15
  },
})

// render() statt run(): zeichnet ausserhalb des Dokuments und misst
// deshalb keinen verdeckten Container
const { svg } = await mermaid.render(id, chart)

Welche Diagrammtypen es sonst noch gibt

Die hier installierte Mermaid-Version bringt 30 Diagrammfamilien mit. Entscheidend für Atlas ist nicht, welche es gibt, sondern welche abgestimmt sind: jede Familie mit eigenen Farbvariablen steht ungefärbt in Mermaids Standardpalette. Ein Diagrammtyp ist erst dann Atlas-tauglich, wenn seine Variablen in mermaidTheme() gesetzt sind.

Der nächste lohnende Kandidat ist gantt — für Fahrplanwechsel und Projektphasen der naheliegendste Typ, aber mit einem eigenen, umfangreichen Variablensatz (sectionBkgColor, taskBkgColor, altSectionBkgColor …). Bewusst noch nicht gesetzt: halb abgestimmt wäre schlechter als gar nicht, weil der Fehler dann erst im fertigen Diagramm auffällt.