feat(mermaid): diagrammen volgen de kleuren van de gekozen stijl #2094

Merged

brenno merged 1 commit from feature/mermaid-style-colors into main

2026-09-14 17:19:44 +00:00

brenno commented

2026-09-14 17:07:00 +00:00

Owner

Samenvatting

Mermaid-diagrammen (vooral Gantt) rendeerden altijd met het vaste neutral-thema, waardoor de balken en knopen de kleuren van de gekozen stijl negeerden. Deze PR laat diagrammen de themeVariables uit het ThemeProfile volgen — op de voorvertoning, in de presentatiemodus, én in de PDF/DOCX/HTML-export.

lib/services/mermaid_theme.dart (nieuw): mapt een ThemeProfile naar Mermaid themeVariables (accent → balk/knoop, tekst → lijn, severity-critical → kritieke/vandaag-lijn, checklistUnchecked → done) en injecteert die als een %%{init}%%-directive. Tekst op een accentkleurige balk krijgt een contrastkleur via de bestaande nearestContrastingHex.
doc_mermaid_view.dart: de gedupliceerde _injectDarkThemeIntoInit is vervangen door de gedeelde injectIntoMermaidInit uit mermaid_theme.dart.
gantt_preview.dart / text_previews.dart: mermaid-bron krijgt mermaidWithThemeColors voordat de MermaidDiagram-widget hem rendert.
document_export_service.dart: de PDF/DOCX renderMermaid-resolver wrapt de bron met mermaidWithThemeColors.
marp_html_service_render_script.dart: de HTML-export initialiseert mermaid met de themeVariables via Object.assign.

De directive-injectie gebruikt hetzelfde mechanisme als de bestaande donkere-lezermodus (mermaidWithDarkTheme): theme/themeVariables staan bewust niet in de secure-lijst, dus een per-diagram directive mag ze overschrijven.

Test plan

13 unit-tests in test/mermaid_theme_test.dart (kleurmapping, directive-injectie, merge, frontmatter, cache-sleutel)
Bestaande mermaidWithDarkTheme-tests blijven groen (refactor is gedragsequivalent)
make check volledig groen (10589+ tests, coverage, golden-suite)
Golden type_gantt eerst rood (bewijst visueel effect), daarna geüpdatet
Beeldkeuring met draaiende app (geen computer-use beschikbaar; gebruiker keurt visueel)

Generated with Devin

## Samenvatting Mermaid-diagrammen (vooral Gantt) rendeerden altijd met het vaste `neutral`-thema, waardoor de balken en knopen de kleuren van de gekozen stijl negeerden. Deze PR laat diagrammen de `themeVariables` uit het `ThemeProfile` volgen — op de voorvertoning, in de presentatiemodus, én in de PDF/DOCX/HTML-export. - **`lib/services/mermaid_theme.dart`** (nieuw): mapt een `ThemeProfile` naar Mermaid `themeVariables` (accent → balk/knoop, tekst → lijn, severity-critical → kritieke/vandaag-lijn, checklistUnchecked → done) en injecteert die als een `%%{init}%%`-directive. Tekst op een accentkleurige balk krijgt een contrastkleur via de bestaande `nearestContrastingHex`. - **`doc_mermaid_view.dart`**: de gedupliceerde `_injectDarkThemeIntoInit` is vervangen door de gedeelde `injectIntoMermaidInit` uit `mermaid_theme.dart`. - **`gantt_preview.dart`** / **`text_previews.dart`**: mermaid-bron krijgt `mermaidWithThemeColors` voordat de `MermaidDiagram`-widget hem rendert. - **`document_export_service.dart`**: de PDF/DOCX `renderMermaid`-resolver wrapt de bron met `mermaidWithThemeColors`. - **`marp_html_service_render_script.dart`**: de HTML-export initialiseert mermaid met de `themeVariables` via `Object.assign`. De directive-injectie gebruikt hetzelfde mechanisme als de bestaande donkere-lezermodus (`mermaidWithDarkTheme`): `theme`/`themeVariables` staan bewust niet in de `secure`-lijst, dus een per-diagram directive mag ze overschrijven. #### Test plan - [x] 13 unit-tests in `test/mermaid_theme_test.dart` (kleurmapping, directive-injectie, merge, frontmatter, cache-sleutel) - [x] Bestaande `mermaidWithDarkTheme`-tests blijven groen (refactor is gedragsequivalent) - [x] `make check` volledig groen (10589+ tests, coverage, golden-suite) - [x] Golden `type_gantt` eerst rood (bewijst visueel effect), daarna geüpdatet - [ ] Beeldkeuring met draaiende app (geen computer-use beschikbaar; gebruiker keurt visueel) Generated with [Devin](https://devin.ai)

brenno added 1 commit

2026-09-14 17:07:00 +00:00

feat(mermaid): diagrammen volgen de kleuren van de gekozen stijl

scans / scans (pull_request) Successful in 2m58s

Details

static-gate / static-gate (pull_request) Successful in 6m6s

Details

c9fd433bff

Mermaid rendeerde altijd met het vaste `neutral`-thema, zodat Gantt-balken
en flowchart-knopen de stijlkleuren van het deck negeerden. Nu wordt een
`%%{init: {"themeVariables": …}}%%`-directive per diagram geïnjecteerd met
de accent-, tekst- en severity-kleuren uit het ThemeProfile — op de
voorvertoning, in de presentatiemodus, én in de PDF/DOCX/HTML-export.

De directive-injectie is gedeeld met de bestaande donkere-lezermodus:
`injectIntoMermaidInit` vervangt de gedupliceerde `_injectDarkThemeIntoInit`.
Tekst op een accentkleurige balk krijgt een contrastkleur via de bestaande
`nearestContrastingHex`-util, zodat de balk leesbaar blijft ongeacht of
het accent donker of licht is.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

brenno merged commit 96cf3844e0 into main

2026-09-14 17:19:44 +00:00

brenno referenced this pull request from a commit

2026-09-14 17:19:45 +00:00

feat(mermaid): diagrammen volgen de kleuren van de gekozen stijl (#2094)