# nuvriq/grc-grid architecture

> Architecture diagram of the GitHub repository nuvriq/grc-grid, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nuvriq/grc-grid
- Repository: https://github.com/nuvriq/grc-grid

## Overview

GRC Grid is a standalone marketing website presenting a proposed governance, risk and compliance product—not a live enterprise system. Visitors explore an assurance journey, relationship-graph examples, agent concepts, capabilities and integrations; JavaScript updates these interactive sections in the page. The README identifies the three active website files and says the contact link opens email. Agent and integration interactions are illustrative, with no backend or live enterprise connections.

Main entry points: [`app.js`](https://github.com/nuvriq/grc-grid/blob/main/app.js) (Page interactions), [`index.html`](https://github.com/nuvriq/grc-grid/blob/main/index.html) (Marketing page), [`style.css`](https://github.com/nuvriq/grc-grid/blob/main/style.css) (Layout and styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Website page"]
  node_page["Marketing page<br/>[index.html]"]
  node_styles["Layout and styling<br/>[style.css]"]
  node_scripts["Page interactions<br/>[app.js]"]
end

subgraph group_interactions["Interactive sections"]
  node_journey["Assurance journey<br/>[app.js]"]
  node_graphs["Graph selector<br/>[app.js]"]
  node_agents["Agent concepts<br/>[app.js]"]
  node_capabilities["Capability catalog<br/>[app.js]"]
  node_integrations["Integration filters<br/>[app.js]"]
end

node_visitor(("Website visitor"))
node_browser(("Web browser"))
node_email["Email client"]

node_visitor -->|"opens page"| node_browser
node_browser -->|"loads"| node_page
node_page -->|"links stylesheet"| node_styles
node_page -->|"loads script"| node_scripts
node_visitor -->|"uses controls"| node_scripts
node_scripts -->|"updates section"| node_journey
node_scripts -->|"updates section"| node_graphs
node_scripts -->|"updates section"| node_agents
node_scripts -->|"renders cards"| node_capabilities
node_scripts -->|"filters items"| node_integrations
node_visitor -->|"opens contact link"| node_email

click node_page "https://github.com/nuvriq/grc-grid/blob/main/index.html"
click node_styles "https://github.com/nuvriq/grc-grid/blob/main/style.css"
click node_scripts "https://github.com/nuvriq/grc-grid/blob/main/app.js"
click node_journey "https://github.com/nuvriq/grc-grid/blob/main/app.js"
click node_graphs "https://github.com/nuvriq/grc-grid/blob/main/app.js"
click node_agents "https://github.com/nuvriq/grc-grid/blob/main/app.js"
click node_capabilities "https://github.com/nuvriq/grc-grid/blob/main/app.js"
click node_integrations "https://github.com/nuvriq/grc-grid/blob/main/app.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_page,node_styles,node_scripts,node_browser,node_email toneBlue
class node_journey,node_graphs,node_agents,node_capabilities,node_integrations toneAmber
class node_visitor toneIndigo
```

## Components

### Website page

- [Marketing page](https://github.com/nuvriq/grc-grid/blob/main/index.html): `index.html`
- [Layout and styling](https://github.com/nuvriq/grc-grid/blob/main/style.css): `style.css`
- [Page interactions](https://github.com/nuvriq/grc-grid/blob/main/app.js): `app.js`

### Interactive sections

- [Assurance journey](https://github.com/nuvriq/grc-grid/blob/main/app.js): `app.js`
- [Graph selector](https://github.com/nuvriq/grc-grid/blob/main/app.js): `app.js`
- [Agent concepts](https://github.com/nuvriq/grc-grid/blob/main/app.js): `app.js`
- [Capability catalog](https://github.com/nuvriq/grc-grid/blob/main/app.js): `app.js`
- [Integration filters](https://github.com/nuvriq/grc-grid/blob/main/app.js): `app.js`

### Other components

- **Website visitor**
- **Web browser**
- **Email client**

## Connections

- Website visitor → Web browser: opens page
- Web browser → Marketing page: loads
- Marketing page → Layout and styling: links stylesheet
- Marketing page → Page interactions: loads script
- Website visitor → Page interactions: uses controls
- Page interactions → Assurance journey: updates section
- Page interactions → Graph selector: updates section
- Page interactions → Agent concepts: updates section
- Page interactions → Capability catalog: renders cards
- Page interactions → Integration filters: filters items
- Website visitor → Email client: opens contact link