Mermaid-diagram (beslisboom) rendert niet in de webversie

brenno commented

2026-07-25 09:56:42 +00:00

Owner

Op ocideck.librekat.nl toont een vrije-Markdown/richText-slide met een mermaid-codeblok geen diagram (leeg vlak). Waargenomen 25-07-2026 met de proefpresentatie, geopend via de ?deck=-deeplink.

Op desktop rendert Mermaid wel (de docs gebruiken het), dus het lijkt web-specifiek.

Vermoedelijke richting: de web-render (mermaid_render_host.dart / mermaid_render_service.dart) botst mogelijk met de web-CSP uit web/index.html (script-src 'self'; frame-src 'self' blob: data:), of de gebundelde mermaid wordt op web niet geladen. Verifieren met de gebundelde mermaid.

Impact: technische slides met diagrammen zijn onbruikbaar in de webdemo. In de proefpresentatie is de beslisboom-slide voorlopig verwijderd.

Op ocideck.librekat.nl toont een vrije-Markdown/richText-slide met een mermaid-codeblok geen diagram (leeg vlak). Waargenomen 25-07-2026 met de proefpresentatie, geopend via de ?deck=-deeplink. Op desktop rendert Mermaid wel (de docs gebruiken het), dus het lijkt web-specifiek. Vermoedelijke richting: de web-render (mermaid_render_host.dart / mermaid_render_service.dart) botst mogelijk met de web-CSP uit web/index.html (script-src 'self'; frame-src 'self' blob: data:), of de gebundelde mermaid wordt op web niet geladen. Verifieren met de gebundelde mermaid. Impact: technische slides met diagrammen zijn onbruikbaar in de webdemo. In de proefpresentatie is de beslisboom-slide voorlopig verwijderd.

brenno added the

bug

accepted

in-progress

labels

2026-07-25 09:56:42 +00:00

brenno commented

2026-07-25 10:07:04 +00:00

Author

Owner

Opgepakt. Tak: fix/851-mermaid-web-render. Oorzaak gevonden: webview_flutter_web implementeert runJavaScriptReturningResult niet (erft de UnimplementedError uit de basisklasse), en de renderer leunt daar volledig op — dus op web faalt elke render stil en blijft het diagram leeg. Fix: een web-native renderpad dat de gebundelde mermaid.min.js via JS-interop in de app-pagina zelf draait (script-src 'self' staat dat toe, geen eval nodig), met conditional import zodat IO de bestaande WebView houdt. Reikwijdte: lib/services/mermaid_render_service*.dart + web-variant, host-widget. Visueel geverifieerd op web voor de merge.

brenno referenced this issue from a commit

2026-07-25 11:46:20 +00:00

fix(mermaid): render diagrams on web via JS-interop (#851)

brenno referenced this issue from a commit

2026-07-25 11:46:20 +00:00

test(mermaid): guard the web render path and register it (#851)

brenno referenced this issue

2026-07-25 11:50:05 +00:00

fix(mermaid): render diagrams on web via JS-interop (#851) #860

brenno referenced this issue from a commit

2026-07-25 11:50:13 +00:00

Merge pull request 'fix(mermaid): render diagrams on web via JS-interop (#851)' (#860) from fix/851-mermaid-web-render into main

brenno commented

2026-07-25 12:05:44 +00:00

Author

Owner

Gebouwd en gemerged: PR #860 (merge 4cca3aeb), op main geverifieerd. Oorzaak: webview_flutter_web implementeert runJavaScriptReturningResult niet, dus de WebView-renderer gaf op web stil null. Fix: op web draait mermaid nu rechtstreeks in de app-pagina — de gebundelde mermaid.min.js via eigen-origin

Gebouwd en gemerged: PR #860 (merge 4cca3aeb), op main geverifieerd. Oorzaak: webview_flutter_web implementeert runJavaScriptReturningResult niet, dus de WebView-renderer gaf op web stil null. Fix: op web draait mermaid nu rechtstreeks in de app-pagina — de gebundelde mermaid.min.js via eigen-origin <script src> (mag onder script-src 'self', geen eval), mermaid.render via dart:js_interop; conditional import houdt de WebView op desktop/mobiel; gedeelde config (mermaid_config.dart) zodat de paden niet uiteenlopen. Geverifieerd in de echte webbouw: mermaid.render levert een geldige SVG in de Flutter-web-DOM onder de productie-CSP, geen CSP-fouten. Security-architect: akkoord (de app-CSP is op script-uitvoering strikter dan de oude WebView; securityLevel strict + sanitizeMermaidSvg blijven). make check + secrets + sast groen. Niet in scope hier: online video/audio-embeds op web (die gaan nog via webview_flutter_web met dezelfde beperking, maar remote embeds zijn op web al door de CSP geblokkeerd) — dat raakt #852, dat apart loopt.

brenno closed this issue

2026-07-25 12:05:44 +00:00

brenno referenced this issue

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

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

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