colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(datamodel): Mermaid ER-diagrammen voor alle actuele deelmodellen

Browse Source 
Voegt docs/datamodel/diagrammen/ toe: één self-contained HTML per
deelmodel (instroom, aanmelding, behandelplan, diagnose,
intake-behandeladvies, rapportage, screening, wachtlijst), elk met een
Mermaid erDiagram, blueprint-vormgeving en sleep/scroll pan-zoom
(mermaid.js + svg-pan-zoom via CDN, geen serverside build nodig).

Per diagram alleen sleutel-/FK-attributen en de kernrelaties uit de §2/§3
entiteiten-/cardinaliteitensecties van het bijbehorende deelmodel, niet elk
veld — bedoeld als navigeerbaar overzicht naast de tabelvorm, niet als
vervanging ervan.

Scope-keuzes:
- model-intake.md en datamodel-discovery.md zijn overgeslagen: eerstgenoemde
  is volledig vervangen door model-intake-behandeladvies.md, laatstgenoemde
  is een prosedocument zonder entiteitenstructuur.
- model-aanmelding.md toont alleen de nog geldige PERSOON/CLIENT-kern;
  AANMELDING/VERWIJZING/ZORGEPISODE zijn vervangen door model-instroom.md
  en daar al gediagrammeerd.
- model-screening.md krijgt een expliciete waarschuwing in titel en
  bronregel: het losse screeningsbesluit is achterhaald door besluit B21
  (screeningsbesluit = acceptatiebesluit, nu care_acceptance_decision in
  model-instroom.md).
- model-behandelplan.md, model-rapportage.md en model-wachtlijst.md tonen
  een statusnotitie (in herziening resp. deels herzien resp. voorlopig
  onderzoeksmodel) conform hun documentstatus.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
colinislit
2026-07-29 08:01:38 +02:00
parent d5b583e24a
commit 0db3ec2ce1
8 changed files with 2637 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
docs/datamodel/diagrammen/model-aanmelding-erd.html Normal file
View File

@@ -0,0 +1,332 @@
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aanmelding — entiteit-relatiediagram</title>
<style>
:root {
--bg: #F5FAF9;
--surface: #FFFFFF;
--surface-2: #EAF3F1;
--border: #CFE1DE;
--text: #12211F;
--text-muted: #4C6B66;
--accent: #0F766E;
--font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0A1615;
--surface: #10201E;
--surface-2: #15302C;
--border: #1F3A36;
--text: #E6F5F2;
--text-muted: #8FB6B0;
--accent: #34D6C4;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overscroll-behavior: none;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Toolbar */
.toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.title-group {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.title-group h1 {
font-size: 0.95rem;
margin: 0;
font-weight: 700;
white-space: nowrap;
}
.title-group .source {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.controls {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.controls button {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.controls button:hover { border-color: var(--accent); color: var(--accent); }
.controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.controls button { transition: border-color 120ms, color 120ms; }
}
/* Diagram canvas */
.canvas-wrap {
flex: 1 1 auto;
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
#08211D;
}
.canvas-wrap .hint {
position: absolute;
left: 16px;
bottom: 14px;
font-family: var(--font-mono);
font-size: 11px;
color: #6FBFB2;
z-index: 2;
pointer-events: none;
}
#diagram {
width: 100%;
height: 100%;
}
#diagram svg {
width: 100%;
height: 100%;
display: block;
}
.loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #6FBFB2;
font-family: var(--font-mono);
font-size: 13px;
}
</style>
</head>
<body>
<div class="app">
<div class="toolbar">
<div class="title-group">
<h1>Aanmelding — entiteit-relatiediagram</h1>
<span class="source">model-aanmelding.md §2 · 11 entiteiten · 12 relaties · AANMELDING/VERWIJZING/ZORGEPISODE vervangen door model-instroom.md (niet getoond)</span>
</div>
<div class="controls">
<button id="zoom-out" title="Uitzoomen" aria-label="Uitzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-in" title="Inzoomen" aria-label="Inzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke="currentColor" stroke-width="2"/><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-fit" title="Passend maken" aria-label="Passend maken">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="zoom-reset" title="Reset (100%)" aria-label="Reset naar 100%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M2 2v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="canvas-wrap">
<div class="loading" id="loading">Diagram wordt geladen…</div>
<div id="diagram" class="mermaid">
erDiagram
PERSOON {
uuid id PK
string achternaam
date geboortedatum
string bsn
}
ADRES {
uuid id PK
uuid persoon_id FK
string adrestype
string postcode
date geldig_tot
}
CONTACTGEGEVEN {
uuid id PK
uuid persoon_id FK
string contacttype
string waarde
boolean voorkeur
}
CLIENT {
uuid id PK
uuid persoon_id FK
string clientnummer
date client_sinds
string huisarts_situatie
}
CLIENTRELATIE {
uuid id PK
uuid client_id FK
uuid persoon_id FK
string relatie
string rol
date geldig_van
}
VERWIJZER {
uuid id PK
uuid praktijk_instelling_id FK
string naam
string verwijzertype
string agb_code
}
PRAKTIJK_INSTELLING {
uuid id PK
string naam
string soort
string agb_code
}
CLIENT_HUISARTS {
uuid id PK
uuid client_id FK
uuid verwijzer_id FK
uuid praktijk_instelling_id FK
date geldig_van
}
VERZEKERING {
uuid id PK
uuid client_id FK
string uzovi_code
string polisnummer
date geldig_van
}
TOESTEMMING {
uuid id PK
uuid client_id FK
string toestemmingstype
string status
date datum
}
CLIENTPORTAAL_ACCOUNT {
uuid id PK
uuid client_id FK
}
PERSOON ||--o{ ADRES : "persoon_id"
PERSOON ||--o{ CONTACTGEGEVEN : "persoon_id"
PERSOON ||--o| CLIENT : "persoon_id"
CLIENT ||--o{ CLIENTRELATIE : "client_id"
PERSOON ||--o{ CLIENTRELATIE : "persoon_id"
PRAKTIJK_INSTELLING |o--o{ VERWIJZER : "praktijk_instelling_id"
CLIENT ||--o{ CLIENT_HUISARTS : "client_id"
VERWIJZER |o--o{ CLIENT_HUISARTS : "verwijzer_id"
PRAKTIJK_INSTELLING |o--o{ CLIENT_HUISARTS : "praktijk_instelling_id"
CLIENT ||--o{ VERZEKERING : "client_id"
CLIENT ||--o{ TOESTEMMING : "client_id"
CLIENT ||--o| CLIENTPORTAAL_ACCOUNT : "client_id"
</div>
<div class="hint">sleep om te pannen · scroll om te zoomen</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: false,
theme: "base",
themeVariables: {
background: "#08211D",
primaryColor: "#0E2E29",
primaryBorderColor: "#57D8C6",
primaryTextColor: "#EAFBF7",
lineColor: "#57D8C6",
textColor: "#EAFBF7",
tertiaryColor: "#123B35",
attributeBackgroundColorOdd: "#0E2E29",
attributeBackgroundColorEven: "#123B35",
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
fontSize: "13px"
}
});
(async () => {
await mermaid.run({ querySelector: "#diagram" });
document.getElementById("loading").remove();
const svgEl = document.querySelector("#diagram svg");
svgEl.removeAttribute("style");
const panZoom = svgPanZoom(svgEl, {
panEnabled: true,
zoomEnabled: true,
controlIconsEnabled: false,
fit: true,
center: true,
minZoom: 0.15,
maxZoom: 8,
zoomScaleSensitivity: 0.35
});
document.getElementById("zoom-in").addEventListener("click", () => panZoom.zoomIn());
document.getElementById("zoom-out").addEventListener("click", () => panZoom.zoomOut());
document.getElementById("zoom-fit").addEventListener("click", () => { panZoom.fit(); panZoom.center(); });
document.getElementById("zoom-reset").addEventListener("click", () => { panZoom.reset(); });
window.addEventListener("resize", () => { panZoom.resize(); panZoom.fit(); panZoom.center(); });
})();
</script>
</body>
</html>

336
docs/datamodel/diagrammen/model-behandelplan-erd.html Normal file
View File

@@ -0,0 +1,336 @@
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Behandelplan — entiteit-relatiediagram</title>
<style>
:root {
--bg: #F5FAF9;
--surface: #FFFFFF;
--surface-2: #EAF3F1;
--border: #CFE1DE;
--text: #12211F;
--text-muted: #4C6B66;
--accent: #0F766E;
--font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0A1615;
--surface: #10201E;
--surface-2: #15302C;
--border: #1F3A36;
--text: #E6F5F2;
--text-muted: #8FB6B0;
--accent: #34D6C4;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overscroll-behavior: none;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Toolbar */
.toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.title-group {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.title-group h1 {
font-size: 0.95rem;
margin: 0;
font-weight: 700;
white-space: nowrap;
}
.title-group .source {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.controls {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.controls button {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.controls button:hover { border-color: var(--accent); color: var(--accent); }
.controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.controls button { transition: border-color 120ms, color 120ms; }
}
/* Diagram canvas */
.canvas-wrap {
flex: 1 1 auto;
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
#08211D;
}
.canvas-wrap .hint {
position: absolute;
left: 16px;
bottom: 14px;
font-family: var(--font-mono);
font-size: 11px;
color: #6FBFB2;
z-index: 2;
pointer-events: none;
}
#diagram {
width: 100%;
height: 100%;
}
#diagram svg {
width: 100%;
height: 100%;
display: block;
}
.loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #6FBFB2;
font-family: var(--font-mono);
font-size: 13px;
}
</style>
</head>
<body>
<div class="app">
<div class="toolbar">
<div class="title-group">
<h1>Behandelplan — entiteit-relatiediagram</h1>
<span class="source">model-behandelplan.md §2 · 12 entiteiten · 20 relaties · in structurele herziening — zie besluitenlog §5 B11 (één levend behandelplan met formele snapshots i.p.v. losse versie-records)</span>
</div>
<div class="controls">
<button id="zoom-out" title="Uitzoomen" aria-label="Uitzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-in" title="Inzoomen" aria-label="Inzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke="currentColor" stroke-width="2"/><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-fit" title="Passend maken" aria-label="Passend maken">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="zoom-reset" title="Reset (100%)" aria-label="Reset naar 100%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M2 2v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="canvas-wrap">
<div class="loading" id="loading">Diagram wordt geladen…</div>
<div id="diagram" class="mermaid">
erDiagram
ZORGEPISODE {
uuid id PK
}
DIAGNOSE {
uuid id PK
}
INTAKE {
uuid id PK
}
MEDEWERKER {
uuid id PK
}
PERSOON {
uuid id PK
}
BEHANDELPLAN {
uuid id PK
uuid zorgepisode_id FK
uuid vervangt_plan_id FK
uuid gebaseerd_op_intake_id FK
uuid opgesteld_door FK
uuid regiebehandelaar_id FK
uuid vastgesteld_door FK
integer versienummer
string status
date vastgesteld_op
}
BEHANDELPLAN_DIAGNOSE {
uuid behandelplan_id FK
uuid diagnose_id FK
}
BEHANDELDOEL {
uuid id PK
uuid behandelplan_id FK
uuid diagnose_id FK
uuid overgenomen_van_doel_id FK
string omschrijving
string prioriteit
string status
}
INTERVENTIE {
uuid id PK
uuid behandelplan_id FK
uuid uitvoerder_id FK
string interventietype
string extern_systeem
string extern_kenmerk
}
INTERVENTIE_DOEL {
uuid interventie_id FK
uuid behandeldoel_id FK
}
EVALUATIEMOMENT {
uuid id PK
uuid behandelplan_id FK
uuid uitgevoerd_door FK
string evaluatietype
date gepland_op
string uitkomst
}
BEHANDELPLAN_AKKOORD {
uuid id PK
uuid behandelplan_id FK
uuid gegeven_door_persoon_id FK
uuid vastgelegd_door FK
date datum
string wijze
string gegeven_door_type
}
ZORGEPISODE ||--o{ BEHANDELPLAN : "zorgepisode_id"
BEHANDELPLAN |o--o| BEHANDELPLAN : "vervangt_plan_id (self)"
INTAKE |o--o{ BEHANDELPLAN : "gebaseerd_op_intake_id (0..1)"
BEHANDELPLAN ||--o{ BEHANDELPLAN_DIAGNOSE : "diagnoses"
DIAGNOSE ||--o{ BEHANDELPLAN_DIAGNOSE : "plannen"
BEHANDELPLAN ||--o{ BEHANDELDOEL : "doelen"
DIAGNOSE |o--o{ BEHANDELDOEL : "diagnose_id (optioneel)"
BEHANDELDOEL |o--o{ BEHANDELDOEL : "overgenomen_van_doel_id (self)"
BEHANDELPLAN ||--o{ INTERVENTIE : "interventies"
INTERVENTIE ||--o{ INTERVENTIE_DOEL : "doelkoppelingen"
BEHANDELDOEL ||--o{ INTERVENTIE_DOEL : "interventiekoppelingen"
BEHANDELPLAN ||--o{ EVALUATIEMOMENT : "evaluatiemomenten"
BEHANDELPLAN ||--o{ BEHANDELPLAN_AKKOORD : "akkoorden"
MEDEWERKER ||--o{ BEHANDELPLAN : "opgesteld_door"
MEDEWERKER |o--o{ BEHANDELPLAN : "regiebehandelaar_id"
MEDEWERKER |o--o{ BEHANDELPLAN : "vastgesteld_door"
MEDEWERKER |o--o{ INTERVENTIE : "uitvoerder_id"
MEDEWERKER |o--o{ EVALUATIEMOMENT : "uitgevoerd_door"
MEDEWERKER ||--o{ BEHANDELPLAN_AKKOORD : "vastgelegd_door"
PERSOON |o--o{ BEHANDELPLAN_AKKOORD : "gegeven_door_persoon_id"
</div>
<div class="hint">sleep om te pannen · scroll om te zoomen</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: false,
theme: "base",
themeVariables: {
background: "#08211D",
primaryColor: "#0E2E29",
primaryBorderColor: "#57D8C6",
primaryTextColor: "#EAFBF7",
lineColor: "#57D8C6",
textColor: "#EAFBF7",
tertiaryColor: "#123B35",
attributeBackgroundColorOdd: "#0E2E29",
attributeBackgroundColorEven: "#123B35",
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
fontSize: "13px"
}
});
(async () => {
await mermaid.run({ querySelector: "#diagram" });
document.getElementById("loading").remove();
const svgEl = document.querySelector("#diagram svg");
svgEl.removeAttribute("style");
const panZoom = svgPanZoom(svgEl, {
panEnabled: true,
zoomEnabled: true,
controlIconsEnabled: false,
fit: true,
center: true,
minZoom: 0.15,
maxZoom: 8,
zoomScaleSensitivity: 0.35
});
document.getElementById("zoom-in").addEventListener("click", () => panZoom.zoomIn());
document.getElementById("zoom-out").addEventListener("click", () => panZoom.zoomOut());
document.getElementById("zoom-fit").addEventListener("click", () => { panZoom.fit(); panZoom.center(); });
document.getElementById("zoom-reset").addEventListener("click", () => { panZoom.reset(); });
window.addEventListener("resize", () => { panZoom.resize(); panZoom.fit(); panZoom.center(); });
})();
</script>
</body>
</html>

345
docs/datamodel/diagrammen/model-diagnose-erd.html Normal file
View File

@@ -0,0 +1,345 @@
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Diagnose — entiteit-relatiediagram</title>
<style>
:root {
--bg: #F5FAF9;
--surface: #FFFFFF;
--surface-2: #EAF3F1;
--border: #CFE1DE;
--text: #12211F;
--text-muted: #4C6B66;
--accent: #0F766E;
--font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0A1615;
--surface: #10201E;
--surface-2: #15302C;
--border: #1F3A36;
--text: #E6F5F2;
--text-muted: #8FB6B0;
--accent: #34D6C4;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overscroll-behavior: none;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Toolbar */
.toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.title-group {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.title-group h1 {
font-size: 0.95rem;
margin: 0;
font-weight: 700;
white-space: nowrap;
}
.title-group .source {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.controls {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.controls button {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.controls button:hover { border-color: var(--accent); color: var(--accent); }
.controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.controls button { transition: border-color 120ms, color 120ms; }
}
/* Diagram canvas */
.canvas-wrap {
flex: 1 1 auto;
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
#08211D;
}
.canvas-wrap .hint {
position: absolute;
left: 16px;
bottom: 14px;
font-family: var(--font-mono);
font-size: 11px;
color: #6FBFB2;
z-index: 2;
pointer-events: none;
}
#diagram {
width: 100%;
height: 100%;
}
#diagram svg {
width: 100%;
height: 100%;
display: block;
}
.loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #6FBFB2;
font-family: var(--font-mono);
font-size: 13px;
}
</style>
</head>
<body>
<div class="app">
<div class="toolbar">
<div class="title-group">
<h1>Diagnose — entiteit-relatiediagram</h1>
<span class="source">model-diagnose.md §2–§3 · 13 entiteiten · 19 relaties</span>
</div>
<div class="controls">
<button id="zoom-out" title="Uitzoomen" aria-label="Uitzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-in" title="Inzoomen" aria-label="Inzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke="currentColor" stroke-width="2"/><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-fit" title="Passend maken" aria-label="Passend maken">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="zoom-reset" title="Reset (100%)" aria-label="Reset naar 100%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M2 2v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="canvas-wrap">
<div class="loading" id="loading">Diagram wordt geladen…</div>
<div id="diagram" class="mermaid">
erDiagram
ZORGEPISODE {
uuid id PK
}
INTAKE {
uuid id PK
}
MEDEWERKER {
uuid id PK
}
BEHANDELPLAN {
uuid id PK
}
DIAGNOSE {
uuid id PK
uuid zorgepisode_id FK
uuid dsm_classificatie_id FK
uuid gesteld_tijdens_intake_id FK
uuid definitief_door FK
uuid geregistreerd_door FK
uuid vervangen_door_diagnose_id FK
string verificatiestatus
string klinische_status
string afgeleide_icd10_code
}
DSM_CLASSIFICATIE {
uuid id PK
uuid dsm_hoofdgroep_id FK
string dsm_code
string omschrijving
boolean selecteerbaar
}
DSM_HOOFDGROEP {
uuid id PK
string code
string omschrijving
}
DSM_ICD10_MAPPING {
uuid id PK
uuid dsm_classificatie_id FK
string icd10_code
boolean voorkeur
string lijstversie
}
HOOFDDIAGNOSE_AANWIJZING {
uuid id PK
uuid zorgepisode_id FK
uuid diagnose_id FK
uuid aangewezen_door FK
date geldig_van
date geldig_tot
}
HONOS_AFNAME {
uuid id PK
uuid zorgepisode_id FK
uuid afgenomen_door FK
string instrument
date afgenomen_op
}
HONOS_ITEMSCORE {
uuid id PK
uuid honos_afname_id FK
string honos_item
int score
}
ZORGVRAAGTYPERING {
uuid id PK
uuid zorgepisode_id FK
uuid honos_afname_id FK
uuid gekozen_door FK
string soort
string gekozen_zorgvraagtype
date gekozen_op
}
ZORGVRAAGTYPE_ADVIES {
uuid id PK
uuid zorgvraagtypering_id FK
string zorgvraagtype
int rangorde
}
ZORGEPISODE ||--o{ DIAGNOSE : "zorgepisode_id (extern, module zorgepisode)"
INTAKE |o--o{ DIAGNOSE : "gesteld_tijdens_intake_id (extern, module intake)"
DSM_CLASSIFICATIE ||--o{ DIAGNOSE : "dsm_classificatie_id"
DSM_HOOFDGROEP ||--o{ DSM_CLASSIFICATIE : "dsm_hoofdgroep_id"
DSM_CLASSIFICATIE ||--o{ DSM_ICD10_MAPPING : "dsm_classificatie_id (mapping naar ICD-10)"
ZORGEPISODE ||--o{ HOOFDDIAGNOSE_AANWIJZING : "zorgepisode_id (extern)"
DIAGNOSE ||--o{ HOOFDDIAGNOSE_AANWIJZING : "diagnose_id"
DIAGNOSE |o--o| DIAGNOSE : "vervangen_door_diagnose_id (self)"
ZORGEPISODE ||--o{ HONOS_AFNAME : "zorgepisode_id (extern)"
HONOS_AFNAME ||--o{ HONOS_ITEMSCORE : "honos_afname_id (max 19 items)"
HONOS_AFNAME ||--o| ZORGVRAAGTYPERING : "honos_afname_id (uniek)"
ZORGEPISODE ||--o{ ZORGVRAAGTYPERING : "zorgepisode_id (extern)"
ZORGVRAAGTYPERING ||--o{ ZORGVRAAGTYPE_ADVIES : "zorgvraagtypering_id"
MEDEWERKER ||--o{ DIAGNOSE : "geregistreerd_door (extern, module medewerker)"
MEDEWERKER |o--o{ DIAGNOSE : "definitief_door (optioneel, extern)"
MEDEWERKER ||--o{ HONOS_AFNAME : "afgenomen_door (extern)"
MEDEWERKER ||--o{ ZORGVRAAGTYPERING : "gekozen_door (extern)"
MEDEWERKER ||--o{ HOOFDDIAGNOSE_AANWIJZING : "aangewezen_door (extern)"
BEHANDELPLAN }o--o{ DIAGNOSE : "adresseert diagnose (extern, module behandelplan)"
</div>
<div class="hint">sleep om te pannen · scroll om te zoomen</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: false,
theme: "base",
themeVariables: {
background: "#08211D",
primaryColor: "#0E2E29",
primaryBorderColor: "#57D8C6",
primaryTextColor: "#EAFBF7",
lineColor: "#57D8C6",
textColor: "#EAFBF7",
tertiaryColor: "#123B35",
attributeBackgroundColorOdd: "#0E2E29",
attributeBackgroundColorEven: "#123B35",
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
fontSize: "13px"
}
});
(async () => {
await mermaid.run({ querySelector: "#diagram" });
document.getElementById("loading").remove();
const svgEl = document.querySelector("#diagram svg");
svgEl.removeAttribute("style");
const panZoom = svgPanZoom(svgEl, {
panEnabled: true,
zoomEnabled: true,
controlIconsEnabled: false,
fit: true,
center: true,
minZoom: 0.15,
maxZoom: 8,
zoomScaleSensitivity: 0.35
});
document.getElementById("zoom-in").addEventListener("click", () => panZoom.zoomIn());
document.getElementById("zoom-out").addEventListener("click", () => panZoom.zoomOut());
document.getElementById("zoom-fit").addEventListener("click", () => { panZoom.fit(); panZoom.center(); });
document.getElementById("zoom-reset").addEventListener("click", () => { panZoom.reset(); });
window.addEventListener("resize", () => { panZoom.resize(); panZoom.fit(); panZoom.center(); });
})();
</script>
</body>
</html>

390
docs/datamodel/diagrammen/model-instroom-erd.html Normal file
View File

@@ -0,0 +1,390 @@
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Instroom — entiteit-relatiediagram</title>
<style>
:root {
--bg: #F5FAF9;
--surface: #FFFFFF;
--surface-2: #EAF3F1;
--border: #CFE1DE;
--text: #12211F;
--text-muted: #4C6B66;
--accent: #0F766E;
--font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0A1615;
--surface: #10201E;
--surface-2: #15302C;
--border: #1F3A36;
--text: #E6F5F2;
--text-muted: #8FB6B0;
--accent: #34D6C4;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overscroll-behavior: none;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Toolbar */
.toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.title-group {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.title-group h1 {
font-size: 0.95rem;
margin: 0;
font-weight: 700;
white-space: nowrap;
}
.title-group .source {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.controls {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.controls button {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.controls button:hover { border-color: var(--accent); color: var(--accent); }
.controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.controls button { transition: border-color 120ms, color 120ms; }
}
/* Diagram canvas */
.canvas-wrap {
flex: 1 1 auto;
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
#08211D;
}
.canvas-wrap .hint {
position: absolute;
left: 16px;
bottom: 14px;
font-family: var(--font-mono);
font-size: 11px;
color: #6FBFB2;
z-index: 2;
pointer-events: none;
}
#diagram {
width: 100%;
height: 100%;
}
#diagram svg {
width: 100%;
height: 100%;
display: block;
}
.loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #6FBFB2;
font-family: var(--font-mono);
font-size: 13px;
}
</style>
</head>
<body>
<div class="app">
<div class="toolbar">
<div class="title-group">
<h1>Instroom — entiteit-relatiediagram</h1>
<span class="source">model-instroom.md §2–§3 · 20 entiteiten · 29 relaties</span>
</div>
<div class="controls">
<button id="zoom-out" title="Uitzoomen" aria-label="Uitzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-in" title="Inzoomen" aria-label="Inzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke="currentColor" stroke-width="2"/><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-fit" title="Passend maken" aria-label="Passend maken">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="zoom-reset" title="Reset (100%)" aria-label="Reset naar 100%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M2 2v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="canvas-wrap">
<div class="loading" id="loading">Diagram wordt geladen…</div>
<div id="diagram" class="mermaid">
erDiagram
PERSOON {
uuid id PK
}
referral_request {
uuid id PK
uuid person_id FK
timestamp initiated_at
string initiator_type
text presenting_need_text
}
referral_submission {
uuid id PK
timestamp received_at
string channel
}
submission_document {
uuid id PK
uuid submission_id FK
string document_type
}
submission_request_link {
uuid submission_id FK
uuid referral_request_id FK
timestamp established_at
}
submission_duplicate_assessment {
uuid submission_id FK
uuid duplicate_of_submission_id FK
timestamp assessed_at
}
referral_case {
uuid id PK
uuid person_id FK
timestamp opened_at
string wettelijk_kader
}
submission_case_assignment {
uuid submission_id FK
uuid referral_case_id FK
timestamp assigned_at
}
request_case_link {
uuid referral_request_id FK
uuid referral_case_id FK
date since
}
case_consolidation {
uuid primary_case_id FK
uuid related_case_id FK
timestamp designated_at
}
screening_activity {
uuid id PK
uuid referral_case_id FK
string activity_type
}
case_information_request {
uuid id PK
uuid referral_case_id FK
uuid resolved_by_submission_id FK
timestamp requested_at
}
care_acceptance_decision {
uuid id PK
uuid referral_case_id FK
uuid replaces_decision_id FK
string decision_outcome
string follow_up_route
}
case_withdrawal {
uuid id PK
uuid referral_case_id FK
timestamp withdrawn_at
}
professional_referral {
uuid id PK
uuid referral_request_id FK
uuid replaces_referral_id FK
date referral_date
}
municipal_care_assignment {
uuid id PK
uuid referral_request_id FK
uuid replaces_assignment_id FK
string legal_framework
}
legal_mandate {
uuid id PK
uuid referral_case_id FK
string mandate_type
}
crisis_encounter_note {
uuid id PK
uuid referral_case_id FK
string fact_type
}
clinical_care_episode {
uuid id PK
uuid originating_decision_id FK
uuid originating_mandate_id FK
uuid possible_continuation_of_episode_id FK
timestamp started_at
}
case_urgency_assessment {
uuid id PK
uuid referral_case_id FK
string urgency_level
}
episode_team_involvement {
uuid id PK
uuid clinical_care_episode_id FK
string team_reference
}
PERSOON |o--o{ referral_request : "person_id"
PERSOON |o--o{ referral_case : "person_id"
referral_submission ||--o{ submission_document : "documenten"
referral_submission ||--o{ submission_request_link : "koppelingen"
referral_request ||--|{ submission_request_link : "min 1 submission"
referral_submission ||--o{ submission_duplicate_assessment : "als duplicaat"
referral_submission ||--o{ submission_duplicate_assessment : "als origineel"
referral_case ||--|{ submission_case_assignment : "min 1 toewijzing"
referral_submission ||--o{ submission_case_assignment : "toewijzingen"
referral_case ||--|{ request_case_link : "min 1 request"
referral_request ||--|{ request_case_link : "normaliter 1 case"
referral_case ||--o{ case_consolidation : "primary (leidend)"
referral_case ||--o| case_consolidation : "related (uniek)"
referral_case ||--o{ screening_activity : "activiteiten"
referral_case ||--o{ case_information_request : "informatieverzoeken"
referral_submission |o--o| case_information_request : "resolved_by (0..1)"
referral_case ||--o{ care_acceptance_decision : "besluiten"
care_acceptance_decision |o--o| care_acceptance_decision : "vervangt (self)"
referral_case ||--o{ case_withdrawal : "intrekkingen"
referral_request ||--o{ professional_referral : "verwijzingen"
professional_referral |o--o| professional_referral : "vervangt (self)"
referral_request ||--o{ municipal_care_assignment : "toewijzingen"
municipal_care_assignment |o--o| municipal_care_assignment : "vervangt (self)"
referral_case ||--o{ legal_mandate : "mandaten"
referral_case ||--o{ crisis_encounter_note : "notities"
care_acceptance_decision ||--o| clinical_care_episode : "XOR met mandaat"
legal_mandate ||--o| clinical_care_episode : "XOR met besluit"
clinical_care_episode |o--o| clinical_care_episode : "mogelijke vervolg (self)"
referral_case ||--o{ case_urgency_assessment : "beoordelingen"
clinical_care_episode ||--o{ episode_team_involvement : "team-betrokkenheid"
</div>
<div class="hint">sleep om te pannen · scroll om te zoomen</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: false,
theme: "base",
themeVariables: {
background: "#08211D",
primaryColor: "#0E2E29",
primaryBorderColor: "#57D8C6",
primaryTextColor: "#EAFBF7",
lineColor: "#57D8C6",
textColor: "#EAFBF7",
tertiaryColor: "#123B35",
attributeBackgroundColorOdd: "#0E2E29",
attributeBackgroundColorEven: "#123B35",
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
fontSize: "13px"
}
});
(async () => {
await mermaid.run({ querySelector: "#diagram" });
document.getElementById("loading").remove();
const svgEl = document.querySelector("#diagram svg");
svgEl.removeAttribute("style");
const panZoom = svgPanZoom(svgEl, {
panEnabled: true,
zoomEnabled: true,
controlIconsEnabled: false,
fit: true,
center: true,
minZoom: 0.15,
maxZoom: 8,
zoomScaleSensitivity: 0.35
});
document.getElementById("zoom-in").addEventListener("click", () => panZoom.zoomIn());
document.getElementById("zoom-out").addEventListener("click", () => panZoom.zoomOut());
document.getElementById("zoom-fit").addEventListener("click", () => { panZoom.fit(); panZoom.center(); });
document.getElementById("zoom-reset").addEventListener("click", () => { panZoom.reset(); });
window.addEventListener("resize", () => { panZoom.resize(); panZoom.fit(); panZoom.center(); });
})();
</script>
</body>
</html>

295
docs/datamodel/diagrammen/model-intake-behandeladvies-erd.html Normal file
View File

@@ -0,0 +1,295 @@
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Intake en behandeladvies — entiteit-relatiediagram</title>
<style>
:root {
--bg: #F5FAF9;
--surface: #FFFFFF;
--surface-2: #EAF3F1;
--border: #CFE1DE;
--text: #12211F;
--text-muted: #4C6B66;
--accent: #0F766E;
--font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0A1615;
--surface: #10201E;
--surface-2: #15302C;
--border: #1F3A36;
--text: #E6F5F2;
--text-muted: #8FB6B0;
--accent: #34D6C4;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overscroll-behavior: none;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Toolbar */
.toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.title-group {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.title-group h1 {
font-size: 0.95rem;
margin: 0;
font-weight: 700;
white-space: nowrap;
}
.title-group .source {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.controls {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.controls button {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.controls button:hover { border-color: var(--accent); color: var(--accent); }
.controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.controls button { transition: border-color 120ms, color 120ms; }
}
/* Diagram canvas */
.canvas-wrap {
flex: 1 1 auto;
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
#08211D;
}
.canvas-wrap .hint {
position: absolute;
left: 16px;
bottom: 14px;
font-family: var(--font-mono);
font-size: 11px;
color: #6FBFB2;
z-index: 2;
pointer-events: none;
}
#diagram {
width: 100%;
height: 100%;
}
#diagram svg {
width: 100%;
height: 100%;
display: block;
}
.loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #6FBFB2;
font-family: var(--font-mono);
font-size: 13px;
}
</style>
</head>
<body>
<div class="app">
<div class="toolbar">
<div class="title-group">
<h1>Intake en behandeladvies — entiteit-relatiediagram</h1>
<span class="source">model-intake-behandeladvies.md §1–§2 · 7 entiteiten · 7 relaties</span>
</div>
<div class="controls">
<button id="zoom-out" title="Uitzoomen" aria-label="Uitzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-in" title="Inzoomen" aria-label="Inzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke="currentColor" stroke-width="2"/><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-fit" title="Passend maken" aria-label="Passend maken">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="zoom-reset" title="Reset (100%)" aria-label="Reset naar 100%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M2 2v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="canvas-wrap">
<div class="loading" id="loading">Diagram wordt geladen…</div>
<div id="diagram" class="mermaid">
erDiagram
clinical_care_episode {
uuid id PK
}
care_program {
uuid id PK
}
clinical_intake_assessment {
uuid id PK
uuid clinical_care_episode_id FK
string initiation_reason
string status
timestamp planned_at
}
intake_contact {
uuid id PK
uuid clinical_intake_assessment_id FK
timestamp occurred_at
string contact_type
int planned_duration_minutes
}
child_safety_check {
uuid id PK
uuid clinical_intake_assessment_id FK
boolean responsible_for_minors
boolean safety_concern
boolean action_taken
}
intake_mdt_review {
uuid id PK
timestamp occurred_at
text participants
}
treatment_advice {
uuid id PK
uuid clinical_intake_assessment_id FK
uuid mdt_review_id FK
uuid replaces_advice_id FK
uuid recommended_care_program FK
string outcome
timestamp decided_at
}
clinical_care_episode ||--o{ clinical_intake_assessment : "clinical_care_episode_id"
clinical_intake_assessment ||--o{ intake_contact : "clinical_intake_assessment_id"
clinical_intake_assessment ||--o| child_safety_check : "clinical_intake_assessment_id"
clinical_intake_assessment ||--o{ treatment_advice : "clinical_intake_assessment_id"
treatment_advice |o--o| treatment_advice : "vervangt (self)"
intake_mdt_review |o--o| treatment_advice : "mdt_review_id"
care_program |o--o{ treatment_advice : "recommended_care_program"
</div>
<div class="hint">sleep om te pannen · scroll om te zoomen</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: false,
theme: "base",
themeVariables: {
background: "#08211D",
primaryColor: "#0E2E29",
primaryBorderColor: "#57D8C6",
primaryTextColor: "#EAFBF7",
lineColor: "#57D8C6",
textColor: "#EAFBF7",
tertiaryColor: "#123B35",
attributeBackgroundColorOdd: "#0E2E29",
attributeBackgroundColorEven: "#123B35",
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
fontSize: "13px"
}
});
(async () => {
await mermaid.run({ querySelector: "#diagram" });
document.getElementById("loading").remove();
const svgEl = document.querySelector("#diagram svg");
svgEl.removeAttribute("style");
const panZoom = svgPanZoom(svgEl, {
panEnabled: true,
zoomEnabled: true,
controlIconsEnabled: false,
fit: true,
center: true,
minZoom: 0.15,
maxZoom: 8,
zoomScaleSensitivity: 0.35
});
document.getElementById("zoom-in").addEventListener("click", () => panZoom.zoomIn());
document.getElementById("zoom-out").addEventListener("click", () => panZoom.zoomOut());
document.getElementById("zoom-fit").addEventListener("click", () => { panZoom.fit(); panZoom.center(); });
document.getElementById("zoom-reset").addEventListener("click", () => { panZoom.reset(); });
window.addEventListener("resize", () => { panZoom.resize(); panZoom.fit(); panZoom.center(); });
})();
</script>
</body>
</html>

339
docs/datamodel/diagrammen/model-rapportage-erd.html Normal file
View File

@@ -0,0 +1,339 @@
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rapportage — entiteit-relatiediagram</title>
<style>
:root {
--bg: #F5FAF9;
--surface: #FFFFFF;
--surface-2: #EAF3F1;
--border: #CFE1DE;
--text: #12211F;
--text-muted: #4C6B66;
--accent: #0F766E;
--font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0A1615;
--surface: #10201E;
--surface-2: #15302C;
--border: #1F3A36;
--text: #E6F5F2;
--text-muted: #8FB6B0;
--accent: #34D6C4;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overscroll-behavior: none;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Toolbar */
.toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.title-group {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.title-group h1 {
font-size: 0.95rem;
margin: 0;
font-weight: 700;
white-space: nowrap;
}
.title-group .source {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.controls {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.controls button {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.controls button:hover { border-color: var(--accent); color: var(--accent); }
.controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.controls button { transition: border-color 120ms, color 120ms; }
}
/* Diagram canvas */
.canvas-wrap {
flex: 1 1 auto;
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
#08211D;
}
.canvas-wrap .hint {
position: absolute;
left: 16px;
bottom: 14px;
font-family: var(--font-mono);
font-size: 11px;
color: #6FBFB2;
z-index: 2;
pointer-events: none;
}
#diagram {
width: 100%;
height: 100%;
}
#diagram svg {
width: 100%;
height: 100%;
display: block;
}
.loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #6FBFB2;
font-family: var(--font-mono);
font-size: 13px;
}
</style>
</head>
<body>
<div class="app">
<div class="toolbar">
<div class="title-group">
<h1>Rapportage — entiteit-relatiediagram</h1>
<span class="source">model-rapportage.md §2 · 14 entiteiten · 18 relaties · deels herzien — zie besluitenlog-datamodel-2026-07-18.md §§6, 8</span>
</div>
<div class="controls">
<button id="zoom-out" title="Uitzoomen" aria-label="Uitzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-in" title="Inzoomen" aria-label="Inzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke="currentColor" stroke-width="2"/><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-fit" title="Passend maken" aria-label="Passend maken">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="zoom-reset" title="Reset (100%)" aria-label="Reset naar 100%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M2 2v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="canvas-wrap">
<div class="loading" id="loading">Diagram wordt geladen…</div>
<div id="diagram" class="mermaid">
erDiagram
ZORGEPISODE {
uuid id PK
}
MEDEWERKER {
uuid id PK
}
PERSOON {
uuid id PK
}
INTAKE {
uuid id PK
}
CONTACTMOMENT {
uuid id PK
}
BEHANDELPLAN {
uuid id PK
}
BEHANDELDOEL {
uuid id PK
}
RAPPORTAGE {
uuid id PK
uuid zorgepisode_id FK
uuid auteur_medewerker_id FK
uuid auteur_persoon_id FK
uuid bevestigd_door_medewerker_id FK
uuid vorige_versie_id FK
uuid intake_id FK
uuid contactmoment_id FK
uuid behandelplan_id FK
string rapportagetype_code
text vrije_tekst
string status_code
}
RAPPORTAGESECTIE {
uuid id PK
uuid rapportage_id FK
string sectietype_code
text tekst
}
RAPPORTAGE_DOELKOPPELING {
uuid rapportage_id FK
uuid behandeldoel_id FK
string voortgang_code
}
AI_BRONVERWIJZING {
uuid id PK
string eigenaar_entiteit
uuid eigenaar_id
string bron_entiteit
uuid bron_id
text bron_content_hash
}
INCIDENTDETAIL {
uuid rapportage_id PK, FK
string incidentcategorie_code
text aard
boolean merkbare_gevolgen
}
INCIDENT_BETROKKENE {
uuid id PK
uuid incident_rapportage_id FK
uuid medewerker_id FK
string naam_vrij
}
OVERDRACHTSSAMENVATTING {
uuid id PK
uuid zorgepisode_id FK
uuid bevestigd_door_medewerker_id FK
text samenvatting_tekst
timestamp periode_van
string status_code
}
ZORGEPISODE ||--o{ RAPPORTAGE : "zorgepisode_id"
MEDEWERKER |o--o{ RAPPORTAGE : "auteur_medewerker_id"
PERSOON |o--o{ RAPPORTAGE : "auteur_persoon_id"
MEDEWERKER |o--o{ RAPPORTAGE : "bevestigd_door_medewerker_id"
RAPPORTAGE |o--o| RAPPORTAGE : "vorige_versie_id (self)"
CONTACTMOMENT |o--o{ RAPPORTAGE : "contactmoment_id"
INTAKE |o--o{ RAPPORTAGE : "intake_id"
BEHANDELPLAN |o--o{ RAPPORTAGE : "behandelplan_id"
RAPPORTAGE ||--o{ RAPPORTAGE_DOELKOPPELING : "rapportage_id"
BEHANDELDOEL ||--o{ RAPPORTAGE_DOELKOPPELING : "behandeldoel_id"
RAPPORTAGE ||--o{ RAPPORTAGESECTIE : "secties (max 1 per sectietype)"
RAPPORTAGE ||--o| INCIDENTDETAIL : "1-op-1 (alleen bij type incident)"
INCIDENTDETAIL ||--o{ INCIDENT_BETROKKENE : "betrokkenen"
MEDEWERKER |o--o{ INCIDENT_BETROKKENE : "medewerker_id (optioneel, xor naam_vrij)"
RAPPORTAGE |o--o{ AI_BRONVERWIJZING : "eigenaar (polymorf, indien eigenaar_entiteit=rapportage)"
OVERDRACHTSSAMENVATTING |o--o{ AI_BRONVERWIJZING : "eigenaar (polymorf, indien eigenaar_entiteit=overdrachtssamenvatting)"
ZORGEPISODE ||--o{ OVERDRACHTSSAMENVATTING : "zorgepisode_id"
MEDEWERKER |o--o{ OVERDRACHTSSAMENVATTING : "bevestigd_door_medewerker_id"
</div>
<div class="hint">sleep om te pannen · scroll om te zoomen</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: false,
theme: "base",
themeVariables: {
background: "#08211D",
primaryColor: "#0E2E29",
primaryBorderColor: "#57D8C6",
primaryTextColor: "#EAFBF7",
lineColor: "#57D8C6",
textColor: "#EAFBF7",
tertiaryColor: "#123B35",
attributeBackgroundColorOdd: "#0E2E29",
attributeBackgroundColorEven: "#123B35",
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
fontSize: "13px"
}
});
(async () => {
await mermaid.run({ querySelector: "#diagram" });
document.getElementById("loading").remove();
const svgEl = document.querySelector("#diagram svg");
svgEl.removeAttribute("style");
const panZoom = svgPanZoom(svgEl, {
panEnabled: true,
zoomEnabled: true,
controlIconsEnabled: false,
fit: true,
center: true,
minZoom: 0.15,
maxZoom: 8,
zoomScaleSensitivity: 0.35
});
document.getElementById("zoom-in").addEventListener("click", () => panZoom.zoomIn());
document.getElementById("zoom-out").addEventListener("click", () => panZoom.zoomOut());
document.getElementById("zoom-fit").addEventListener("click", () => { panZoom.fit(); panZoom.center(); });
document.getElementById("zoom-reset").addEventListener("click", () => { panZoom.reset(); });
window.addEventListener("resize", () => { panZoom.resize(); panZoom.fit(); panZoom.center(); });
})();
</script>
</body>
</html>

303
docs/datamodel/diagrammen/model-screening-erd.html Normal file
View File

@@ -0,0 +1,303 @@
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Screening — entiteit-relatiediagram (achterhaald)</title>
<style>
:root {
--bg: #F5FAF9;
--surface: #FFFFFF;
--surface-2: #EAF3F1;
--border: #CFE1DE;
--text: #12211F;
--text-muted: #4C6B66;
--accent: #0F766E;
--font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0A1615;
--surface: #10201E;
--surface-2: #15302C;
--border: #1F3A36;
--text: #E6F5F2;
--text-muted: #8FB6B0;
--accent: #34D6C4;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overscroll-behavior: none;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Toolbar */
.toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.title-group {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.title-group h1 {
font-size: 0.95rem;
margin: 0;
font-weight: 700;
white-space: nowrap;
}
.title-group .source {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.controls {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.controls button {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.controls button:hover { border-color: var(--accent); color: var(--accent); }
.controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.controls button { transition: border-color 120ms, color 120ms; }
}
/* Diagram canvas */
.canvas-wrap {
flex: 1 1 auto;
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
#08211D;
}
.canvas-wrap .hint {
position: absolute;
left: 16px;
bottom: 14px;
font-family: var(--font-mono);
font-size: 11px;
color: #6FBFB2;
z-index: 2;
pointer-events: none;
}
#diagram {
width: 100%;
height: 100%;
}
#diagram svg {
width: 100%;
height: 100%;
display: block;
}
.loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #6FBFB2;
font-family: var(--font-mono);
font-size: 13px;
}
</style>
</head>
<body>
<div class="app">
<div class="toolbar">
<div class="title-group">
<h1>Screening — entiteit-relatiediagram (achterhaald)</h1>
<span class="source">model-screening.md §2 · 8 entiteiten · 11 relaties · ACHTERHAALD door B21 (screeningsbesluit = acceptatiebesluit, geen apart voorafgaand besluit meer) — zie model-instroom.md (care_acceptance_decision)</span>
</div>
<div class="controls">
<button id="zoom-out" title="Uitzoomen" aria-label="Uitzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-in" title="Inzoomen" aria-label="Inzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke="currentColor" stroke-width="2"/><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-fit" title="Passend maken" aria-label="Passend maken">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="zoom-reset" title="Reset (100%)" aria-label="Reset naar 100%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M2 2v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="canvas-wrap">
<div class="loading" id="loading">Diagram wordt geladen…</div>
<div id="diagram" class="mermaid">
erDiagram
AANMELDING {
uuid id PK
}
MEDEWERKER {
uuid id PK
}
VERWIJZER {
uuid id PK
}
DOCUMENT {
uuid id PK
}
SCREENING {
uuid id PK
uuid aanmelding_id FK
uuid screener_id FK
date gestart_op
string status
string urgentie_id
}
SCREENING_ACTIVITEIT {
uuid id PK
uuid screening_id FK
uuid uitgevoerd_door FK
string type_id
timestamp uitgevoerd_op
boolean crisis_signaal
}
SCREENING_BESLUIT {
uuid id PK
uuid screening_id FK
uuid genomen_door FK
string uitkomst_id
string urgentie_id
text motivatie
}
INFORMATIE_UITVRAAG {
uuid id PK
uuid screening_id FK
uuid gericht_aan_verwijzer_id FK
uuid uitgevraagd_door FK
uuid ontvangen_document_id FK
string type_id
string status
}
AANMELDING ||--o{ SCREENING : "aanmelding_id"
SCREENING ||--o{ SCREENING_ACTIVITEIT : "activiteiten"
SCREENING ||--o| SCREENING_BESLUIT : "besluit (max 1)"
SCREENING ||--o{ INFORMATIE_UITVRAAG : "uitvragen"
MEDEWERKER ||--o{ SCREENING_ACTIVITEIT : "uitgevoerd_door"
MEDEWERKER |o--o{ SCREENING : "screener_id"
MEDEWERKER ||--o{ SCREENING_BESLUIT : "genomen_door"
MEDEWERKER ||--o{ INFORMATIE_UITVRAAG : "uitgevraagd_door"
VERWIJZER |o--o{ INFORMATIE_UITVRAAG : "gericht_aan_verwijzer_id"
DOCUMENT |o--o{ INFORMATIE_UITVRAAG : "ontvangen_document_id"
SCREENING_BESLUIT |o--o| AANMELDING : "onderbouwing uitkomst (0..1)"
</div>
<div class="hint">sleep om te pannen · scroll om te zoomen</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: false,
theme: "base",
themeVariables: {
background: "#08211D",
primaryColor: "#0E2E29",
primaryBorderColor: "#57D8C6",
primaryTextColor: "#EAFBF7",
lineColor: "#57D8C6",
textColor: "#EAFBF7",
tertiaryColor: "#123B35",
attributeBackgroundColorOdd: "#0E2E29",
attributeBackgroundColorEven: "#123B35",
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
fontSize: "13px"
}
});
(async () => {
await mermaid.run({ querySelector: "#diagram" });
document.getElementById("loading").remove();
const svgEl = document.querySelector("#diagram svg");
svgEl.removeAttribute("style");
const panZoom = svgPanZoom(svgEl, {
panEnabled: true,
zoomEnabled: true,
controlIconsEnabled: false,
fit: true,
center: true,
minZoom: 0.15,
maxZoom: 8,
zoomScaleSensitivity: 0.35
});
document.getElementById("zoom-in").addEventListener("click", () => panZoom.zoomIn());
document.getElementById("zoom-out").addEventListener("click", () => panZoom.zoomOut());
document.getElementById("zoom-fit").addEventListener("click", () => { panZoom.fit(); panZoom.center(); });
document.getElementById("zoom-reset").addEventListener("click", () => { panZoom.reset(); });
window.addEventListener("resize", () => { panZoom.resize(); panZoom.fit(); panZoom.center(); });
})();
</script>
</body>
</html>

297
docs/datamodel/diagrammen/model-wachtlijst-erd.html Normal file
View File

@@ -0,0 +1,297 @@
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wachtlijst — entiteit-relatiediagram</title>
<style>
:root {
--bg: #F5FAF9;
--surface: #FFFFFF;
--surface-2: #EAF3F1;
--border: #CFE1DE;
--text: #12211F;
--text-muted: #4C6B66;
--accent: #0F766E;
--font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0A1615;
--surface: #10201E;
--surface-2: #15302C;
--border: #1F3A36;
--text: #E6F5F2;
--text-muted: #8FB6B0;
--accent: #34D6C4;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overscroll-behavior: none;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Toolbar */
.toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.title-group {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.title-group h1 {
font-size: 0.95rem;
margin: 0;
font-weight: 700;
white-space: nowrap;
}
.title-group .source {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.controls {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.controls button {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.controls button:hover { border-color: var(--accent); color: var(--accent); }
.controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.controls button { transition: border-color 120ms, color 120ms; }
}
/* Diagram canvas */
.canvas-wrap {
flex: 1 1 auto;
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(87,216,198,0.07) 0 1px, transparent 1px 28px),
#08211D;
}
.canvas-wrap .hint {
position: absolute;
left: 16px;
bottom: 14px;
font-family: var(--font-mono);
font-size: 11px;
color: #6FBFB2;
z-index: 2;
pointer-events: none;
}
#diagram {
width: 100%;
height: 100%;
}
#diagram svg {
width: 100%;
height: 100%;
display: block;
}
.loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #6FBFB2;
font-family: var(--font-mono);
font-size: 13px;
}
</style>
</head>
<body>
<div class="app">
<div class="toolbar">
<div class="title-group">
<h1>Wachtlijst — entiteit-relatiediagram</h1>
<span class="source">model-wachtlijst.md §2–§3 · 9 entiteiten · 8 relaties · voorlopig onderzoeksmodel, niet bouwrijp</span>
</div>
<div class="controls">
<button id="zoom-out" title="Uitzoomen" aria-label="Uitzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-in" title="Inzoomen" aria-label="Inzoomen">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="8" y1="3" x2="8" y2="13" stroke="currentColor" stroke-width="2"/><line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button id="zoom-fit" title="Passend maken" aria-label="Passend maken">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="zoom-reset" title="Reset (100%)" aria-label="Reset naar 100%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M2 2v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="canvas-wrap">
<div class="loading" id="loading">Diagram wordt geladen…</div>
<div id="diagram" class="mermaid">
erDiagram
WACHTLIJSTPLAATSING {
uuid id PK
string soort
uuid aanmelding_id FK
uuid zorgepisode_id FK
uuid afdeling_id FK
uuid zorgprogramma_id FK
date teldatum
string status
}
WACHTLIJSTACTIVITEIT {
uuid id PK
uuid wachtlijstplaatsing_id FK
uuid uitgevoerd_door FK
string type
date datum
}
WACHTLIJSTOPSCHORTING {
uuid id PK
uuid wachtlijstplaatsing_id FK
date begindatum
date einddatum
string reden
}
referral_case {
uuid id PK
}
clinical_care_episode {
uuid id PK
}
AFDELING {
uuid id PK
}
ZORGPROGRAMMA {
uuid id PK
}
MEDEWERKER {
uuid id PK
}
VESTIGING {
uuid id PK
}
referral_case ||--o{ WACHTLIJSTPLAATSING : "aanmelding_id (soort aanmeld)"
clinical_care_episode ||--o{ WACHTLIJSTPLAATSING : "zorgepisode_id (soort behandel)"
AFDELING ||--o{ WACHTLIJSTPLAATSING : "afdeling_id"
ZORGPROGRAMMA |o--o{ WACHTLIJSTPLAATSING : "zorgprogramma_id (optioneel)"
WACHTLIJSTPLAATSING ||--o{ WACHTLIJSTACTIVITEIT : "wachtlijstplaatsing_id"
WACHTLIJSTPLAATSING ||--o{ WACHTLIJSTOPSCHORTING : "wachtlijstplaatsing_id"
MEDEWERKER ||--o{ WACHTLIJSTACTIVITEIT : "uitgevoerd_door"
VESTIGING |o--o{ AFDELING : "vestiging_id (voorgesteld, open §7.2)"
</div>
<div class="hint">sleep om te pannen · scroll om te zoomen</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: false,
theme: "base",
themeVariables: {
background: "#08211D",
primaryColor: "#0E2E29",
primaryBorderColor: "#57D8C6",
primaryTextColor: "#EAFBF7",
lineColor: "#57D8C6",
textColor: "#EAFBF7",
tertiaryColor: "#123B35",
attributeBackgroundColorOdd: "#0E2E29",
attributeBackgroundColorEven: "#123B35",
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
fontSize: "13px"
}
});
(async () => {
await mermaid.run({ querySelector: "#diagram" });
document.getElementById("loading").remove();
const svgEl = document.querySelector("#diagram svg");
svgEl.removeAttribute("style");
const panZoom = svgPanZoom(svgEl, {
panEnabled: true,
zoomEnabled: true,
controlIconsEnabled: false,
fit: true,
center: true,
minZoom: 0.15,
maxZoom: 8,
zoomScaleSensitivity: 0.35
});
document.getElementById("zoom-in").addEventListener("click", () => panZoom.zoomIn());
document.getElementById("zoom-out").addEventListener("click", () => panZoom.zoomOut());
document.getElementById("zoom-fit").addEventListener("click", () => { panZoom.fit(); panZoom.center(); });
document.getElementById("zoom-reset").addEventListener("click", () => { panZoom.reset(); });
window.addEventListener("resize", () => { panZoom.resize(); panZoom.fit(); panZoom.center(); });
})();
</script>
</body>
</html>