Gå til indholdet

C4-arkitektur (LikeC4)

Status: under opbygning. Vi dokumenterer al software-arkitektur med C4-modellen, skrevet som LikeC4-DSL (*.c4) — se beslutningen i ../adr/0002-c4-med-likec4.md. model.c4 er single source of truth; billeder + interaktiv viewer genereres fra den.

C4 kort fortalt

Fire zoom-niveauer — vi bruger normalt kun de to første:

Niveau Viser Bruger vi?
1 · System Context Systemet + brugere + eksterne systemer (ingen teknologi) Ja
2 · Container De deploybare dele inde i systemet (web-app, API, DB, worker …) + teknologi Ja
3 · Component Komponenter inde i én container Kun ved behov
4 · Code Klasser/kode Nej (springes over)

Plus supplerende: System Landscape (hele porteføljen), Dynamic (et flow), Deployment (kør-på-infra).

⚠️ Vigtigt begreb: en C4-"Container" er IKKE en Docker/OCI-container. Det er et deploybart/ eksekverbart element (fx en web-app, et API, en database, en worker). Vi bruger "container" om OCI andre steder i repoet — forveksl dem ikke.

Konventioner

  • Minimum Context + Container pr. system. Skip Code-niveau.
  • Ét diagram = ét view på ét niveau; bland aldrig niveauer.
  • Titel + (ved behov) beskrivelse på hvert view. Predikat-rækkefølge er betydende (exclude rammer kun det include allerede har taget med).
  • Diagrammer opdateres i samme PR som den arkitekturændring de afspejler (levende dokumentation).
  • Værktøjsvalg er fanget i ADR-0002; ændres det, skrives en ny ADR.

Filer

  • model.c4 — hele modellen (specification + model + views). Aktuelt: historisk System Landskab, Website OS Context + Container samt D1-oplæggets Context + Container. Udvid trinvist pr. system.
  • assets/ — genererede billeder (PNG) som MkDocs embedder. Genereres (ikke håndlavet) — se nedenfor.

Render lokalt (kræver Node ≥ 22)

# Interaktiv preview i browseren (hot reload) — brug denne til at validere/justere views:
npx likec4@1.59.1 serve

# Validér DSL:
npx likec4@1.59.1 validate

# Eksportér billeder til MkDocs (kræver Playwright/Chromium — CLI'en prompter install):
npx likec4@1.59.1 export png -o assets
# → assets/index.png, assets/websiteos_context.png, assets/websiteos_container.png

Kør export png og commit billederne i assets/ når du ændrer model.c4, så portalen (MkDocs) viser det opdaterede diagram. (Vi kan senere flytte dette til et CI-step.)

Den rigtige, interaktive viewer (senere)

Samme model.c4 kan drive LikeC4's egen interaktive, zoombare viewer som et separat Cloudflare Pages-site — nul genoptegning:

npx likec4@1.59.1 build -o dist   # statisk interaktivt site (Node ≥ 22)

Se ../../docs-portal.md for hvordan man kobler både MkDocs-portalen og (senere) LikeC4-vieweren på Cloudflare Pages.

Diagrammer

Website Factory — D1-oplæg, september 2026

Status: DISKUSSIONSOPLÆG — ingen beslutning truffet. Se arkitekturgrundlaget. Staging og produktion bruger separate ressourcer; containerdiagrammet viser ét miljø med to eksempel-kunder.

Website Factory — systemkontekst

Website Factory — containere

Historisk Website OS-oplæg, juli 2026

Diagrammerne nedenfor viser det tidligere Vercel/Neon/Payload/Inngest-grundlag, ikke D1-forslaget.

Når billederne er genereret (export png -o assets), vises de her:

Melsens — System Landskab

Website OS — System Context

Website OS — Containere

Ses billederne ikke endnu? Så er export png ikke kørt/committet endnu — kør kommandoen ovenfor.