From 5c6168ff7cecd5559ea8c72d3a938d85bd150c90 Mon Sep 17 00:00:00 2001 From: Ali Amori Kadhim Date: Tue, 12 May 2026 12:40:18 +0200 Subject: [PATCH] docs: add high-level system architecture diagram for mono-repo (PDC & VTH) To preview Mermaid diagrams in VS Code, install the following extension: https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart --- architecture-diagram.mmd | 110 +++++++++++++++++++++++++++ dependencies-diagram.mmd | 155 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 265 insertions(+) create mode 100644 architecture-diagram.mmd create mode 100644 dependencies-diagram.mmd diff --git a/architecture-diagram.mmd b/architecture-diagram.mmd new file mode 100644 index 00000000..137403cd --- /dev/null +++ b/architecture-diagram.mmd @@ -0,0 +1,110 @@ +flowchart TB + + %% ──────────────────────────────── + %% PDC DOMEIN + %% ──────────────────────────────── + subgraph PDC["PDC Domein"] + direction TB + + subgraph PDC_INFRA["Infrastructuur"] + PDC_DB[("PostgreSQL")] + end + + subgraph PDC_HUB["CMS Kern"] + PDC_STRAPI["pdc-dashboard (Strapi)"] + end + + subgraph PDC_CONSUMERS["Frontend & Diensten"] + PDC_FRONT["Online loket website"] + PDC_SC["pdc-sc (Samenwerkende Catalogi) API"] + end + + subgraph PDC_API["API- & Uitbreidingslaag"] + OOA["overige-objecten-api REST API"] + SAE["strapi-admin-extensions REST API"] + end + end + + %% ──────────────────────────────── + %% VTH DOMEIN + %% ──────────────────────────────── + subgraph VTH["VTH (Toezicht en Handhaving) Domein"] + direction TB + + subgraph VTH_INFRA["Infrastructuur"] + VTH_DB[("PostgreSQL")] + end + + subgraph VTH_HUB["CMS Kern"] + VTH_STRAPI["vth-dashboard (Strapi)"] + end + + subgraph VTH_CONSUMERS["Frontend"] + VTH_FRONT["vth-frontend"] + end + end + + + %% ──────────────────────────────── + %% EXTERNE DIENSTEN + %% ──────────────────────────────── + subgraph EXT["Externe Diensten"] + direction LR + FLO["FLO Legal API"] + OPENFORMS["Open Forms API"] + MATOMO["Matomo"] + KCM["KCM klanttevredenheidsonderzoeken"] + PANDO["Pandosearch"] + end + + %% ──────────────────────────────── + %% EXTERNE AFNEMERS + %% ──────────────────────────────── + subgraph CONSUMERS["Externe Afnemers"] + direction LR + KISS["KISS Dashboard"] + SC_NET["samenwerkende-catalogi.nl XML-afnemers"] + end + + %% ════════════════════════════════ + %% VERBINDINGEN — PDC + %% ════════════════════════════════ + PDC_DB -->|"gegevens opgeslagen in"| PDC_STRAPI + PDC_STRAPI -->|"GraphQL"| PDC_FRONT + PDC_STRAPI -->|"GraphQL"| PDC_SC + PDC_STRAPI -->|"GraphQL"| OOA + PDC_STRAPI -.->|"KISS-voorbeeld via preview-plugin → GET "| OOA + SAE -->|"CSV-upload → POST /api/v2/objects"| OOA + + %% ════════════════════════════════ + %% VERBINDINGEN — VTH + %% ════════════════════════════════ + VTH_DB -->|"gegevens opgeslagen in"| VTH_STRAPI + VTH_STRAPI -->|"GraphQL"| VTH_FRONT + + %% ════════════════════════════════ + %% GEDEELDE PAKKETTEN + %% ════════════════════════════════ + %% PKG_UI -.->|"npm-afhankelijkheid"| PDC_FRONT + %% PKG_UI -.->|"npm-afhankelijkheid"| VTH_FRONT + %% PKG_UTILS -.->|"npm-afhankelijkheid"| PDC_FRONT + %% PKG_UTILS -.->|"npm-afhankelijkheid"| VTH_FRONT + %% PKG_SC_PKG -.->|"npm-afhankelijkheid"| PDC_SC + %% PKG_A11Y -.->|"npm-afhankelijkheid"| PDC_FRONT + %% PKG_A11Y -.->|"npm-afhankelijkheid"| VTH_FRONT + + %% ════════════════════════════════ + %% EXTERNE DIENSTEN via frontends + %% ════════════════════════════════ + PDC_FRONT -.->|"formulieren insluiten"| OPENFORMS + PDC_FRONT -.->|"beslissingen insluiten"| FLO + PDC_FRONT -.->|"statistieken"| MATOMO + PDC_FRONT -.->|"zoeken"| PANDO + PDC_FRONT -.->|"Feedbackformulier"| KCM + VTH_FRONT -.->|"statistieken"| MATOMO + + %% ════════════════════════════════ + %% UITVOER NAAR EXTERNE AFNEMERS + %% ════════════════════════════════ + OOA -->|"Kennisartikelen\nVAC-data + HTML-opmaak"| KISS + PDC_SC -->|"XML-feed Samenwerkende Catalogi"| SC_NET diff --git a/dependencies-diagram.mmd b/dependencies-diagram.mmd new file mode 100644 index 00000000..688381c8 --- /dev/null +++ b/dependencies-diagram.mmd @@ -0,0 +1,155 @@ +flowchart TB + + %% ───────────────────────────────────── + %% PDC DOMEIN — Applicaties + %% ───────────────────────────────────── + subgraph PDC["PDC Domein"] + direction TB + PDC_FRONT["Online loket website"] + PDC_DASH["pdc-dashboard (Strapi)"] + PDC_SC["pdc-sc (Samenwerkende Catalogi) REST API"] + OOA["overige-objecten-api REST API"] + SAE["strapi-admin-extensions REST API"] + end + + %% ───────────────────────────────────── + %% VTH DOMEIN — Applicaties + %% ───────────────────────────────────── + subgraph VTH["VTH (Toezicht en Handhaving) Domein"] + direction TB + VTH_DASH["vth-dashboard (Strapi)"] + VTH_FRONT["vth-frontend (Toezicht en Handhaving website)"] + end + + %% ───────────────────────────────────── + %% LOKALE WORKSPACE PAKKETTEN + %% ───────────────────────────────────── + subgraph LOCAL["Lokale Workspace Pakketten (@frameless)"] + direction LR + PKG_UI["@frameless/ui"] + PKG_UTILS["@frameless/utils"] + PKG_A11Y["@frameless/editoria11y"] + PKG_SC_PKG["@frameless/samenwerkende-catalogi"] + end + + %% ───────────────────────────────────── + %% EXTERNE FRAMELESS PAKKETTEN (GitHub) + %% ───────────────────────────────────── + subgraph FRAMELESS_GH["Extern · github.com/frameless/strapi-v5-extensions"] + direction TB + subgraph STRAPI_PLUGINS_GRP["Strapi Plugins"] + direction LR + SP1["@frameless/content-compliance-checker"] + SP2["@frameless/preview-button"] + SP3["@frameless/strapi-plugin-env-label"] + SP4["@frameless/strapi-plugin-flo-legal-embed"] + SP5["@frameless/strapi-plugin-language"] + SP6["@frameless/strapi-plugin-nl-government-fields"] + SP7["@frameless/strapi-plugin-notes"] + SP8["@frameless/strapi-plugin-old-slugs"] + SP9["@frameless/strapi-plugin-open-forms-embed"] + SP10["@frameless/strapi-tiptap-editor"] + end + subgraph CATALOGI_GRP["Cataloguspakketten"] + direction LR + CP1["@frameless/catalogi-data"] + CP2["@frameless/upl"] + end + end + + %% ───────────────────────────────────── + %% UTRECHT DESIGN SYSTEM + %% ───────────────────────────────────── + subgraph UTRECHT["@utrecht/* · NL Utrecht Design System"] + direction TB + subgraph UTR_CORE_GRP["Kerncomponenten"] + direction LR + UC1["@utrecht/component-library-react"] + UC2["@utrecht/component-library-css"] + UC3["@utrecht/web-component-library-react"] + UC4["@utrecht/design-tokens"] + UC5["@utrecht/backdrop-css"] + end + subgraph UTR_FORMS_GRP["Formuliercomponenten"] + direction LR + UF1["@utrecht/open-forms-container-css"] + UF2["@utrecht/open-forms-container-react"] + UF3["@utrecht/flo-legal-decision-tree-client"] + UF4["@utrecht/flolegal-decision-tree-css"] + end + subgraph UTR_CSS_GRP["Aanvullende stijlen"] + direction LR + UA1["@utrecht/focus-ring-css"] + UA2["@utrecht/form-label-css"] + UA3["@utrecht/multiline-data-css"] + UA4["@utrecht/spotlight-section-css"] + UA5["@utrecht/textbox-css"] + end + end + + %% ───────────────────────────────────── + %% OVERIGE EXTERNE PAKKETTEN + %% ───────────────────────────────────── + OPEN_FORMS["@open-formulieren/sdk"] + NLDS["@nl-design-system-unstable/documentation"] + + %% ══════════════════════════════════════ + %% VERBINDINGEN — pdc-dashboard + %% ══════════════════════════════════════ + PDC_DASH --> STRAPI_PLUGINS_GRP + + %% ══════════════════════════════════════ + %% VERBINDINGEN — pdc-frontend + %% ══════════════════════════════════════ + PDC_FRONT --> PKG_UI + PDC_FRONT --> PKG_UTILS + PDC_FRONT --> PKG_A11Y + PDC_FRONT --> UTR_CORE_GRP + PDC_FRONT --> UTR_FORMS_GRP + PDC_FRONT --> UTR_CSS_GRP + PDC_FRONT --> OPEN_FORMS + PDC_FRONT --> NLDS + + %% ══════════════════════════════════════ + %% VERBINDINGEN — pdc-sc + %% ══════════════════════════════════════ + PDC_SC --> PKG_SC_PKG + PDC_SC --> UTR_CORE_GRP + + %% ══════════════════════════════════════ + %% VERBINDINGEN — overige-objecten-api + %% ══════════════════════════════════════ + OOA --> PKG_UI + OOA --> PKG_UTILS + OOA --> UTR_CORE_GRP + + %% ══════════════════════════════════════ + %% VERBINDINGEN — strapi-admin-extensions + %% ══════════════════════════════════════ + SAE --> PKG_UTILS + + %% ══════════════════════════════════════ + %% VERBINDINGEN — vth-dashboard + %% ══════════════════════════════════════ + VTH_DASH --> STRAPI_PLUGINS_GRP + + %% ══════════════════════════════════════ + %% VERBINDINGEN — vth-frontend + %% ══════════════════════════════════════ + VTH_FRONT --> PKG_UI + VTH_FRONT --> PKG_UTILS + VTH_FRONT --> PKG_A11Y + VTH_FRONT --> UTR_CORE_GRP + + %% ══════════════════════════════════════ + %% VERBINDINGEN — lokale pakketten + %% ══════════════════════════════════════ + PKG_UI --> UTR_CORE_GRP + PKG_SC_PKG --> CATALOGI_GRP + + %% ══════════════════════════════════════ + %% KLIKBARE LINK — externe GitHub repo + %% ══════════════════════════════════════ + click FRAMELESS_GH href "https://github.com/frameless/strapi-v5-extensions" _blank + click STRAPI_PLUGINS_GRP href "https://github.com/frameless/strapi-v5-extensions" _blank + click CATALOGI_GRP href "https://github.com/frameless/strapi-v5-extensions" _blank