Visualisatie-template

Een Kroescontrol-branded HTML-template voor het maken van visualisaties bij build-plannen (modus 2) en stakeholder-overzichten (modus 3). Deze pagina laat zien hoe de template eruitziet, hoe je hem inline gebruikt, en hoe je een Claude-sessie vraagt er een te genereren.

Pattern-doc: workspace/baseline/patterns/visualization.md.

Inline-voorbeeld

Het blok hieronder is precies hoe een ingevulde visualisatie eruitziet — default dark. De volledige template (mét mermaid, theme-toggle en lucide-iconen) zie je in standalone modus.

Volledige interactieve preview: docs.kroescontrol.nl/visualization-template.html — opent direct in de browser met mermaid, lucide en theme-toggle.

Lokaal kopieren (om te bewerken):

curl -O https://docs.kroescontrol.nl/visualization-template.html
open visualization-template.html      # macOS
# xdg-open visualization-template.html # Linux

Hoe je het gebruikt

Standalone HTML (modus 2 / 3)

1. Kopieer baseline/patterns/visualization-template.html uit de workspace-repo
2. Vul de {{ placeholders }} in (titel, modus, content)
3. Zet data-mode="2" of data-mode="3" op het wrapper-<div>
4. Plaats naar locatie volgens het pattern: airflow/projects/{x}/visuals/<task-id>-plan.html

Inline in deze docs (Nextra MDX)

Kopieer alleen het blok tussen <!-- KC_INLINE_START --> en <!-- KC_INLINE_END -->. CSS is gescoped onder .kc-visualization — geen layout-bleed.

Voor mermaid in MDX: gebruik next/script met de juiste init-volgorde (initialize vóór run, met fallback bij parse-errors):

import Script from 'next/script'
 
<Script
  src="https://docs.kroescontrol.nl/lib/mermaid.min.js"
  onLoad={() => {
    if (!window.mermaid) return
    window.mermaid.initialize({
      startOnLoad: false,
      theme: 'base',
      themeVariables: { primaryColor: '#1a1f2e', primaryBorderColor: '#c22757', lineColor: '#94a3b8' }
    })
    Promise.resolve(window.mermaid.run({ querySelector: '.kc-visualization .mermaid' }))
      .catch(() => {
        document.querySelectorAll('.kc-visualization .mermaid').forEach(el => {
          el.classList.replace('mermaid', 'mermaid-fallback')
        })
      })
  }}
/>

Aan Claude vragen

Stuur de URL van deze pagina aan je Claude-sessie en zeg:

Maak hier een visualisatie van — modus 2 voor [onderwerp]. Vul de template uit skroes/workspace/baseline/patterns/visualization-template.html. Bewaar de prompt naast het output-bestand (.prompt.md).

Of gebruik de slash-command /viz (lokale Claude Code skill) — die vraagt modus, onderwerp en doelgroep, en schrijft direct naar de juiste output-locatie.

Modus-keuze

Modus 1 (Begrip) hoort in markdown, niet in deze HTML-template.

Volledige uitleg + checklist: pattern-doc op GitHub.