Mermaid rendert als zwarte vlakken: <style> gestript, stijlen niet ge-inlined

brenno commented

2026-07-25 20:32:42 +00:00

Owner

Symptoom: Mermaid-diagrammen renderen in de app (web én desktop) hun knoop-vormen als zwarte vlakken zonder zichtbare labeltekst; edges worden zwart gevulde wiggen i.p.v. dunne pijlen. Op web zichtbaar sinds #851 (daarvoor bleef het diagram leeg); op desktop hetzelfde renderpad, dus vermoedelijk al langer zo. Waargenomen 25-07-2026 in de proefpresentatie op ocideck.librekat.nl.

Oorzaak (getoetst): het diagram wordt getekend met flutter_svg (vector_graphics), dat GEEN CSS/<style>-blokken ondersteunt — het leest alleen inline presentatie-attributen. sanitize_svg.dart verwijdert daarom terecht het <style>-element (en class). Maar mermaid stopt ál zijn theme-styling (node-fill #eee, stroke #999, edge fill:none, tekst #000) in dat <style>-blok met class-selectors. Zonder dat blok vallen alle vormen én tekst terug op de SVG-standaard fill:black → zwarte vakjes met zwarte (onzichtbare) tekst, en edges gevuld zwart.

Gevalideerde fix: in de browser-render-stap (WebView op desktop, JS-interop op web — beide hebben een browser die de CSS wél toepast) de computed styles per element inline zetten (fill, fill-opacity, stroke, stroke-, color, opacity, font-, text-anchor — inclusief fill:none, anders vallen edges op zwart terug), en daarna het <style>-blok verwijderen. De resulterende SVG heeft inline stijlen die flutter_svg wél leest. Empirisch getoetst met de gebundelde mermaid: nodes lichtgrijs, tekst leesbaar, edges dunne pijnen.

Let op de web-CSP (script-src 'self' 'wasm-unsafe-eval'): geen eval/inline-JS op web, dus de web-inliner moet in Dart via package:web (DOM), niet als ge-eval'de JS-string. Desktop-WebView mag inline JS.

Symptoom: Mermaid-diagrammen renderen in de app (web én desktop) hun knoop-vormen als zwarte vlakken zonder zichtbare labeltekst; edges worden zwart gevulde wiggen i.p.v. dunne pijlen. Op web zichtbaar sinds #851 (daarvoor bleef het diagram leeg); op desktop hetzelfde renderpad, dus vermoedelijk al langer zo. Waargenomen 25-07-2026 in de proefpresentatie op ocideck.librekat.nl. Oorzaak (getoetst): het diagram wordt getekend met flutter_svg (vector_graphics), dat GEEN CSS/`<style>`-blokken ondersteunt — het leest alleen inline presentatie-attributen. sanitize_svg.dart verwijdert daarom terecht het `<style>`-element (en `class`). Maar mermaid stopt ál zijn theme-styling (node-fill #eee, stroke #999, edge fill:none, tekst #000) in dat `<style>`-blok met class-selectors. Zonder dat blok vallen alle vormen én tekst terug op de SVG-standaard fill:black → zwarte vakjes met zwarte (onzichtbare) tekst, en edges gevuld zwart. Gevalideerde fix: in de browser-render-stap (WebView op desktop, JS-interop op web — beide hebben een browser die de CSS wél toepast) de computed styles per element inline zetten (fill, fill-opacity, stroke, stroke-*, color, opacity, font-*, text-anchor — inclusief fill:none, anders vallen edges op zwart terug), en daarna het `<style>`-blok verwijderen. De resulterende SVG heeft inline stijlen die flutter_svg wél leest. Empirisch getoetst met de gebundelde mermaid: nodes lichtgrijs, tekst leesbaar, edges dunne pijnen. Let op de web-CSP (script-src 'self' 'wasm-unsafe-eval'): geen eval/inline-JS op web, dus de web-inliner moet in Dart via package:web (DOM), niet als ge-eval'de JS-string. Desktop-WebView mag inline JS.

brenno added the

bug

in-progress

labels

2026-07-25 20:32:42 +00:00

brenno referenced this issue from a commit

2026-07-25 20:44:42 +00:00

fix(mermaid): inline theme-styling zodat diagrammen kleur/tekst tonen (#862)

brenno referenced this issue from a commit

2026-07-25 21:04:16 +00:00

fix(mermaid): inline theme-styling zodat diagrammen kleur/tekst tonen (#862)

brenno referenced this issue from a pull request that will close it,