0db3ec2ce1
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>
391 lines
11 KiB
HTML
391 lines
11 KiB
HTML
<!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>
|