Mermaid-flowchart mist pijlpunten (flutter_svg rendert geen <marker>) #941

New issue

Closed

opened 2026-07-28 00:44:37 +00:00 by brenno · 1 comment

brenno commented

2026-07-28 00:44:37 +00:00

Owner

Wat er misgaat

Een Mermaid-flowchart (bv. de kat-beslisboom) toont de verbindingslijnen zonder pijlpunten. Daardoor is de richting van de pijlen formeel niet af te lezen: je ziet dat twee knopen verbonden zijn, maar niet welke kant het op loopt.

Oorzaak

Mermaid tekent elke pijlpunt met een SVG-<marker> (marker-end="url(#…)"). flutter_svg (vector_graphics) rendert <marker> niet — het negeert ze — en sanitize_svg.dart haalt ze er dan ook uit (de allow-list spiegelt precies wat de lezer aankan). Gevolg: de lijnen blijven, de pijlpunten verdwijnen.

Oplossing

Dezelfde aanpak als de stijl-inliner (svg_style_inline.js, #862): terwijl de SVG in de DOM hangt, per edge met een marker het eindpunt en de richting meten (getPointAtLength) en er een expliciete <polygon>-driehoek neerzetten die flutter_svg wél tekent. sanitize_svg.dart laat polygon/points/fill staan. Werkt voor beide renderpaden (desktop-WebView en web) omdat beide de inliner al aanroepen.

Geldt voor de presentatie/preview/thumbnail/export via flutter_svg; de offline-HTML-export rendert mermaid native en had de pijlen al.

**Wat er misgaat** Een Mermaid-flowchart (bv. de kat-beslisboom) toont de verbindingslijnen zonder pijlpunten. Daardoor is de richting van de pijlen formeel niet af te lezen: je ziet dat twee knopen verbonden zijn, maar niet welke kant het op loopt. **Oorzaak** Mermaid tekent elke pijlpunt met een SVG-`<marker>` (`marker-end="url(#…)"`). `flutter_svg` (vector_graphics) rendert `<marker>` niet — het negeert ze — en `sanitize_svg.dart` haalt ze er dan ook uit (de allow-list spiegelt precies wat de lezer aankan). Gevolg: de lijnen blijven, de pijlpunten verdwijnen. **Oplossing** Dezelfde aanpak als de stijl-inliner (`svg_style_inline.js`, #862): terwijl de SVG in de DOM hangt, per edge met een marker het eindpunt en de richting meten (`getPointAtLength`) en er een expliciete `<polygon>`-driehoek neerzetten die flutter_svg wél tekent. `sanitize_svg.dart` laat `polygon`/`points`/`fill` staan. Werkt voor beide renderpaden (desktop-WebView en web) omdat beide de inliner al aanroepen. Geldt voor de presentatie/preview/thumbnail/export via flutter_svg; de offline-HTML-export rendert mermaid native en had de pijlen al.

brenno added the

bug

in-progress

labels

2026-07-28 00:44:37 +00:00

brenno referenced this issue from a commit

2026-07-28 01:00:58 +00:00

fix(present): teken mermaid-pijlpunten als polygon zodat de richting zichtbaar is (#941)

brenno referenced this issue

2026-07-28 01:13:14 +00:00

fix(present): teken mermaid-pijlpunten als polygon zodat de richting zichtbaar is (#941) #943

brenno referenced this issue from a commit

2026-07-28 01:13:16 +00:00

Merge pull request 'fix(present): teken mermaid-pijlpunten als polygon zodat de richting zichtbaar is (#941)' (#943) from fix/941-mermaid-arrowheads into main

brenno commented

2026-07-28 01:13:30 +00:00

Author

Owner

Verholpen in #943, gemerged naar main (commit fdd7c118). svg_style_inline.js zet mermaids marker-pijlpunten nu om in expliciete <polygon>-driehoeken (eindpunt + richting via getPointAtLength), die flutter_svg wél tekent. Geverifieerd op de macOS-app: de pijlpunten verschijnen correct op de kat-beslisboom. Regressietest in test/sanitize_svg_test.dart.

Verholpen in #943, gemerged naar main (commit fdd7c118). `svg_style_inline.js` zet mermaids marker-pijlpunten nu om in expliciete `<polygon>`-driehoeken (eindpunt + richting via getPointAtLength), die flutter_svg wél tekent. Geverifieerd op de macOS-app: de pijlpunten verschijnen correct op de kat-beslisboom. Regressietest in `test/sanitize_svg_test.dart`.

brenno

2026-07-28 01:13:30 +00:00