<mxfile host="app.diagrams.net" modified="2026-04-17T12:00:00.000Z" agent="Claude" version="24.7.17">
  <diagram id="c4-component-docs" name="C4 Component - Docs Container">
    <mxGraphModel dx="1400" dy="900" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1600" pageHeight="1100" math="0" shadow="0">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>

        <mxCell id="title" value="Component Diagram — Documentation Site" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=20;fontStyle=1;fontColor=#1F2937;" vertex="1" parent="1">
          <mxGeometry x="380" y="20" width="740" height="40" as="geometry"/>
        </mxCell>
        <mxCell id="subtitle" value="[C4 Level 3 — Component | Container: MkDocs Documentation Site]" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=2;fontColor=#6B7280;" vertex="1" parent="1">
          <mxGeometry x="200" y="55" width="1100" height="25" as="geometry"/>
        </mxCell>

        <!-- Visitor -->
        <mxCell id="visitor" value="&lt;b&gt;Developer / Visitor&lt;/b&gt;&lt;br&gt;&lt;br&gt;Reads docs, views&lt;br&gt;architecture diagrams,&lt;br&gt;cost dashboard." style="shape=mxgraph.c4.person2;whiteSpace=wrap;html=1;align=center;fillColor=#08427B;fontColor=#ffffff;strokeColor=#073B6F;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="700" y="85" width="180" height="150" as="geometry"/>
        </mxCell>

        <!-- GitHub Actions (CI) -->
        <mxCell id="github_ci" value="&lt;b&gt;GitHub Actions&lt;/b&gt;&lt;br&gt;[External System]&lt;br&gt;&lt;br&gt;deploy-docs.yml,&lt;br&gt;cost-report.yml,&lt;br&gt;generate-cv.yml" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#999999;fontColor=#ffffff;strokeColor=#8C8C8C;arcSize=5;fontSize=10;align=center;" vertex="1" parent="1">
          <mxGeometry x="1290" y="200" width="200" height="120" as="geometry"/>
        </mxCell>

        <!-- Container boundary -->
        <mxCell id="docs_boundary" value="Documentation Site [Container: MkDocs Material + Azure Static Web Apps]" style="swimlane;fontStyle=1;fillColor=none;strokeColor=#438DD5;startSize=32;rounded=1;arcSize=3;fontSize=12;fontColor=#438DD5;strokeWidth=2;dashed=1;dashPattern=8 4;" vertex="1" parent="1">
          <mxGeometry x="50" y="290" width="1480" height="600" as="geometry"/>
        </mxCell>

        <!-- MkDocs Build Engine -->
        <mxCell id="comp_mkdocs" value="&lt;b&gt;MkDocs Build Engine&lt;/b&gt;&lt;br&gt;[Component: MkDocs Material]&lt;br&gt;&lt;br&gt;Reads docs/**/*.md.&lt;br&gt;Outputs static HTML site." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#85BBF0;fontColor=#23445D;strokeColor=#6196CA;arcSize=5;fontSize=10;align=center;" vertex="1" parent="docs_boundary">
          <mxGeometry x="560" y="60" width="280" height="115" as="geometry"/>
        </mxCell>

        <!-- draw.io Export Step -->
        <mxCell id="comp_drawio" value="&lt;b&gt;draw.io Export Step&lt;/b&gt;&lt;br&gt;[Component: drawio-export-action]&lt;br&gt;&lt;br&gt;Exports *.drawio → *.png in CI.&lt;br&gt;Output: docs/assets/*.png." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#85BBF0;fontColor=#23445D;strokeColor=#6196CA;arcSize=5;fontSize=10;align=center;" vertex="1" parent="docs_boundary">
          <mxGeometry x="40" y="60" width="300" height="115" as="geometry"/>
        </mxCell>

        <!-- Architecture & ADR Pages -->
        <mxCell id="comp_arch" value="&lt;b&gt;Architecture Pages&lt;/b&gt;&lt;br&gt;[Component: Markdown + PNG]&lt;br&gt;&lt;br&gt;Overview, Frontend, Backend pages.&lt;br&gt;Embeds exported PNG diagrams." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#85BBF0;fontColor=#23445D;strokeColor=#6196CA;arcSize=5;fontSize=10;align=center;" vertex="1" parent="docs_boundary">
          <mxGeometry x="850" y="60" width="280" height="115" as="geometry"/>
        </mxCell>

        <!-- Cost Dashboard Page -->
        <mxCell id="comp_cost" value="&lt;b&gt;Cost Dashboard Page&lt;/b&gt;&lt;br&gt;[Component: MkDocs page]&lt;br&gt;&lt;br&gt;cost-dashboard.md.&lt;br&gt;Auto-committed weekly by cost-report.yml." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#85BBF0;fontColor=#23445D;strokeColor=#6196CA;arcSize=5;fontSize=10;align=center;" vertex="1" parent="docs_boundary">
          <mxGeometry x="1140" y="60" width="290" height="115" as="geometry"/>
        </mxCell>

        <!-- Coverage Report Page -->
        <mxCell id="comp_cov" value="&lt;b&gt;Coverage Report Page&lt;/b&gt;&lt;br&gt;[Component: MkDocs page]&lt;br&gt;&lt;br&gt;development/coverage.md.&lt;br&gt;Unit + API test coverage stats." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#85BBF0;fontColor=#23445D;strokeColor=#6196CA;arcSize=5;fontSize=10;align=center;" vertex="1" parent="docs_boundary">
          <mxGeometry x="40" y="310" width="290" height="115" as="geometry"/>
        </mxCell>

        <!-- API Reference Page -->
        <mxCell id="comp_api" value="&lt;b&gt;API Reference Page&lt;/b&gt;&lt;br&gt;[Component: MkDocs page]&lt;br&gt;&lt;br&gt;FastAPI OpenAPI reference.&lt;br&gt;Swagger-style endpoint docs." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#85BBF0;fontColor=#23445D;strokeColor=#6196CA;arcSize=5;fontSize=10;align=center;" vertex="1" parent="docs_boundary">
          <mxGeometry x="340" y="310" width="280" height="115" as="geometry"/>
        </mxCell>

        <!-- SWA Auth Layer -->
        <mxCell id="comp_swa_auth" value="&lt;b&gt;SWA Auth Layer&lt;/b&gt;&lt;br&gt;[Component: SWA + EasyAuth]&lt;br&gt;&lt;br&gt;allowedRoles: authenticated (dev).&lt;br&gt;Public on prod slot." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#85BBF0;fontColor=#23445D;strokeColor=#6196CA;arcSize=5;fontSize=10;align=center;" vertex="1" parent="docs_boundary">
          <mxGeometry x="630" y="310" width="280" height="115" as="geometry"/>
        </mxCell>

        <!-- MkDocs Dev Server (local) -->
        <mxCell id="comp_devserver" value="&lt;b&gt;MkDocs Dev Server&lt;/b&gt;&lt;br&gt;[Component: mkdocs serve]&lt;br&gt;&lt;br&gt;Local: docker-compose docs:8080.&lt;br&gt;VITE_DOCS_URL=http://localhost:8080." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#85BBF0;fontColor=#23445D;strokeColor=#6196CA;arcSize=5;fontSize=10;align=center;" vertex="1" parent="docs_boundary">
          <mxGeometry x="920" y="310" width="280" height="115" as="geometry"/>
        </mxCell>

        <!-- Planning Pages -->
        <mxCell id="comp_planning" value="&lt;b&gt;Planning Pages&lt;/b&gt;&lt;br&gt;[Component: Markdown]&lt;br&gt;&lt;br&gt;roadmap.md, wip.md.&lt;br&gt;Updated by sync-memory skill." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#85BBF0;fontColor=#23445D;strokeColor=#6196CA;arcSize=5;fontSize=10;align=center;" vertex="1" parent="docs_boundary">
          <mxGeometry x="1210" y="310" width="230" height="115" as="geometry"/>
        </mxCell>

        <!-- External: Azure SWA hosting -->
        <mxCell id="ext_swa" value="&lt;b&gt;Azure Static Web App&lt;/b&gt;&lt;br&gt;[Container]&lt;br&gt;&lt;br&gt;docs.sven-relijveld.com (prod)&lt;br&gt;dev-docs.sven-relijveld.com (dev)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#999999;fontColor=#ffffff;strokeColor=#8C8C8C;arcSize=5;fontSize=10;align=center;" vertex="1" parent="1">
          <mxGeometry x="640" y="960" width="260" height="90" as="geometry"/>
        </mxCell>

        <!-- External: Entra ID -->
        <mxCell id="ext_entra" value="&lt;b&gt;Microsoft Entra ID&lt;/b&gt;&lt;br&gt;[External System]&lt;br&gt;&lt;br&gt;OIDC SSO for dev docs slot" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#999999;fontColor=#ffffff;strokeColor=#8C8C8C;arcSize=5;fontSize=10;align=center;" vertex="1" parent="1">
          <mxGeometry x="1250" y="960" width="200" height="90" as="geometry"/>
        </mxCell>

        <!-- Relationships -->
        <!-- Visitor → MkDocs built site (via SWA) -->
        <mxCell id="e1" value="Browses" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;" edge="1" source="visitor" target="comp_swa_auth" parent="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="790" y="265"/>
              <mxPoint x="820" y="265"/>
            </Array>
          </mxGeometry>
        </mxCell>
        <!-- GitHub CI → drawio export -->
        <mxCell id="e2" value="Triggers" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;" edge="1" source="github_ci" target="comp_drawio" parent="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1290" y="260"/>
              <mxPoint x="190" y="260"/>
            </Array>
          </mxGeometry>
        </mxCell>
        <!-- GitHub CI → cost dashboard -->
        <mxCell id="e3" value="Auto-commits" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;" edge="1" source="github_ci" target="comp_cost" parent="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1490" y="260"/>
              <mxPoint x="1490" y="133"/>
              <mxPoint x="1285" y="133"/>
            </Array>
          </mxGeometry>
        </mxCell>
        <!-- drawio export → arch pages (provides PNGs) -->
        <mxCell id="e4" value="Provides PNGs" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;" edge="1" source="comp_drawio" target="comp_arch" parent="docs_boundary">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="190" y="205"/>
              <mxPoint x="990" y="205"/>
            </Array>
          </mxGeometry>
        </mxCell>
        <!-- MkDocs engine reads all pages -->
        <mxCell id="e5" value="Builds" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;" edge="1" source="comp_mkdocs" target="comp_arch" parent="docs_boundary">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="e6" value="Builds" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;" edge="1" source="comp_mkdocs" target="comp_cost" parent="docs_boundary">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="e7" value="Builds" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;" edge="1" source="comp_mkdocs" target="comp_cov" parent="docs_boundary">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="700" y="205"/>
              <mxPoint x="185" y="205"/>
            </Array>
          </mxGeometry>
        </mxCell>
        <!-- SWA auth → Entra -->
        <mxCell id="e8" value="OIDC login (dev)" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;" edge="1" source="comp_swa_auth" target="ext_entra" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <!-- SWA auth → SWA hosting -->
        <mxCell id="e9" value="Served by" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;" edge="1" source="comp_swa_auth" target="ext_swa" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>

        <!-- Legend -->
        <mxCell id="legend_bg" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F9FAFB;strokeColor=#D1D5DB;arcSize=5;" vertex="1" parent="1">
          <mxGeometry x="30" y="90" width="310" height="165" as="geometry"/>
        </mxCell>
        <mxCell id="leg_title" value="Legend" style="text;html=1;strokeColor=none;fillColor=none;fontSize=11;fontStyle=1;fontColor=#374151;" vertex="1" parent="1">
          <mxGeometry x="45" y="98" width="60" height="20" as="geometry"/>
        </mxCell>
        <mxCell id="leg_p" value="" style="shape=mxgraph.c4.person2;fillColor=#08427B;fontColor=#ffffff;strokeColor=#073B6F;" vertex="1" parent="1">
          <mxGeometry x="50" y="124" width="22" height="26" as="geometry"/>
        </mxCell>
        <mxCell id="leg_p_l" value="Person" style="text;html=1;strokeColor=none;fillColor=none;fontSize=10;" vertex="1" parent="1">
          <mxGeometry x="80" y="129" width="80" height="18" as="geometry"/>
        </mxCell>
        <mxCell id="leg_c" value="" style="rounded=1;fillColor=#85BBF0;strokeColor=#6196CA;" vertex="1" parent="1">
          <mxGeometry x="50" y="156" width="22" height="16" as="geometry"/>
        </mxCell>
        <mxCell id="leg_c_l" value="Component (this container)" style="text;html=1;strokeColor=none;fillColor=none;fontSize=10;" vertex="1" parent="1">
          <mxGeometry x="80" y="156" width="200" height="18" as="geometry"/>
        </mxCell>
        <mxCell id="leg_e" value="" style="rounded=1;fillColor=#999999;strokeColor=#8C8C8C;" vertex="1" parent="1">
          <mxGeometry x="50" y="180" width="22" height="16" as="geometry"/>
        </mxCell>
        <mxCell id="leg_e_l" value="External Container / System" style="text;html=1;strokeColor=none;fillColor=none;fontSize=10;" vertex="1" parent="1">
          <mxGeometry x="80" y="180" width="200" height="18" as="geometry"/>
        </mxCell>
        <mxCell id="leg_b" value="" style="rounded=1;fillColor=none;strokeColor=#438DD5;dashed=1;dashPattern=8 4;strokeWidth=2;" vertex="1" parent="1">
          <mxGeometry x="50" y="204" width="22" height="16" as="geometry"/>
        </mxCell>
        <mxCell id="leg_b_l" value="Container Boundary" style="text;html=1;strokeColor=none;fillColor=none;fontSize=10;" vertex="1" parent="1">
          <mxGeometry x="80" y="204" width="140" height="18" as="geometry"/>
        </mxCell>
        <mxCell id="leg_new" value="★ New diagram" style="text;html=1;strokeColor=none;fillColor=#FEF9C3;rounded=1;arcSize=10;fontSize=9;fontStyle=2;fontColor=#374151;" vertex="1" parent="1">
          <mxGeometry x="42" y="230" width="265" height="20" as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
