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

Merged

brenno merged 1 commit from fix/862-mermaid-inline-styles into main

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

brenno commented

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

Owner

Mermaid-diagrammen verschenen als zwarte vlakken — op web én in de PDF/PPTX-export.

Oorzaak: mermaid stopt zijn hele thema (nodekleur, tekstkleur, lijndikte) in een <style>-blok met CSS-klassen. flutter_svg (vector_graphics) ondersteunt geen <style>/CSS-klassen — alleen inline presentatie-attributen — en sanitizeMermaidSvg strippte het <style>-blok bovendien weg. Zonder inline stijl valt alles terug op de standaard fill:black.

Fix: een gedeelde assets/web_export/svg_style_inline.js zet vóór teruggave elk SVG-element z'n berekende stijl (getComputedStyle) om naar inline-attributen — inclusief fill:none, zodat pijlen dun blijven en geen zwarte wiggen worden — en verwijdert het <style>-blok. Beide renderpaden laden dezelfde inliner: de web-JS-interop-kant (mermaid_web_renderer.dart) en de WebView-bootstrap (mermaid_render_service.dart).

Één bron, twee renderpaden — net als de gedeelde kMermaidInitConfig.

Empirisch getoetst met de gebundelde mermaid: nodes lichtgrijs, tekst zwart, dunne pijlen.

make check groen.

fixes #862

Mermaid-diagrammen verschenen als **zwarte vlakken** — op web én in de PDF/PPTX-export. **Oorzaak:** mermaid stopt zijn hele thema (nodekleur, tekstkleur, lijndikte) in een `<style>`-blok met CSS-klassen. `flutter_svg` (vector_graphics) ondersteunt geen `<style>`/CSS-klassen — alleen inline presentatie-attributen — en `sanitizeMermaidSvg` strippte het `<style>`-blok bovendien weg. Zonder inline stijl valt alles terug op de standaard `fill:black`. **Fix:** een gedeelde `assets/web_export/svg_style_inline.js` zet vóór teruggave elk SVG-element z'n berekende stijl (`getComputedStyle`) om naar inline-attributen — inclusief `fill:none`, zodat pijlen dun blijven en geen zwarte wiggen worden — en verwijdert het `<style>`-blok. Beide renderpaden laden dezelfde inliner: de web-JS-interop-kant (`mermaid_web_renderer.dart`) en de WebView-bootstrap (`mermaid_render_service.dart`). Één bron, twee renderpaden — net als de gedeelde `kMermaidInitConfig`. Empirisch getoetst met de gebundelde mermaid: nodes lichtgrijs, tekst zwart, dunne pijlen. `make check` groen. fixes #862

brenno added 1 commit

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

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

scans / scans (pull_request) Successful in 3m21s

Details

e60ef92e25

Mermaid-diagrammen renderden hun knopen als zwarte vlakken zonder leesbare
tekst (op web zichtbaar sinds #851, op desktop hetzelfde renderpad). Oorzaak:
het diagram wordt met flutter_svg getekend, dat geen <style>/CSS-class-styling
leest; mermaid stopt zijn hele theme in zo'n <style>-blok, dat sanitize_svg
terecht verwijdert (flutter_svg negeert het toch). Alles valt dan terug op de
SVG-standaard fill:black.

Fix: de browser die mermaid al rendert (WebView op desktop, app-pagina op web)
lost de CSS-cascade op; een gedeelde inliner (assets/web_export/svg_style_inline.js)
zet de computed styles per element als inline attributen (incl. fill:none op
edges) en verwijdert het <style>-blok. flutter_svg leest die inline stijlen wel.
Empirisch getoetst met de gebundelde mermaid: nodes lichtgrijs, tekst leesbaar,
edges dunne pijlen.

fixes #862

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

brenno merged commit 2f3df91067 into main

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

brenno referenced this pull request from a commit

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

Merge pull request 'fix(mermaid): inline theme-styling zodat diagrammen kleur/tekst tonen (#862)' (#866) from fix/862-mermaid-inline-styles into main