# catkinfox/opengraph architecture

> Architecture diagram of the GitHub repository catkinfox/opengraph, 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/catkinfox/opengraph
- Repository: https://github.com/catkinfox/opengraph
- Video tour (about a minute): https://gitdiagram.com/catkinfox/opengraph/video

## Overview

This October CMS plugin generates cached, text-overlaid OpenGraph images for CMS pages. The principal workflow is page rendering → component settings and title selection → image generation or cache reuse → an image URL exposed to the page’s OpenGraph markup. Administrators configure assets and typography and can clear the cache. The README documents these capabilities; the component and generator implementations were sampled, while the markup partial’s contents were not, so its rendering link follows the documented behavior.

Main entry points: [`classes/ImageGenerator.php`](https://github.com/catkinfox/opengraph/blob/main/classes/ImageGenerator.php) (Image generator), [`components/OpenGraphImage.php`](https://github.com/catkinfox/opengraph/blob/main/components/OpenGraphImage.php) (OpenGraph component), [`models/Settings.php`](https://github.com/catkinfox/opengraph/blob/main/models/Settings.php) (Image settings), [`models/settings/fields.yaml`](https://github.com/catkinfox/opengraph/blob/main/models/settings/fields.yaml) (Settings form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pageflow["Page image flow"]
  node_component["OpenGraph component<br/>[OpenGraphImage.php]"]
  node_markup["OpenGraph markup<br/>[default.htm]"]
  node_image_url["Generated image URL"]
end

subgraph group_configuration["Image settings"]
  node_settings["Image settings<br/>[Settings.php]"]
  node_settings_ui["Settings form<br/>[fields.yaml]"]
  node_asset_store[("Uploaded assets")]
end

subgraph group_generation["Generation and cache"]
  node_generator["Image generator<br/>[ImageGenerator.php]"]
  node_imagick["Imagick extension"]
  node_media_cache[("Media cache")]
end

node_visitor(("Page request"))
node_cms["October CMS"]
node_admin(("Site administrator"))

node_visitor -->|"requests page"| node_cms
node_cms -->|"renders component"| node_component
node_admin -->|"configures"| node_settings_ui
node_settings_ui -->|"updates"| node_settings
node_settings -->|"stores uploads"| node_asset_store
node_component -->|"reads settings"| node_settings
node_component -->|"requests image"| node_generator
node_generator -->|"renders image"| node_imagick
node_generator -->|"checks cache"| node_media_cache
node_generator -->|"writes image"| node_media_cache
node_generator -->|"returns URL"| node_component
node_component -->|"provides image URL"| node_markup
node_settings -->|"clears cache"| node_media_cache

click node_component "https://github.com/catkinfox/opengraph/blob/main/components/OpenGraphImage.php"
click node_markup "https://github.com/catkinfox/opengraph/blob/main/components/opengraphimage/default.htm"
click node_settings "https://github.com/catkinfox/opengraph/blob/main/models/Settings.php"
click node_settings_ui "https://github.com/catkinfox/opengraph/blob/main/models/settings/fields.yaml"
click node_generator "https://github.com/catkinfox/opengraph/blob/main/classes/ImageGenerator.php"

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_component,node_markup,node_image_url toneBlue
class node_settings,node_settings_ui,node_asset_store toneAmber
class node_generator,node_imagick,node_media_cache,node_visitor toneMint
class node_cms,node_admin toneIndigo
```

## Components

### Page image flow

- [OpenGraph component](https://github.com/catkinfox/opengraph/blob/main/components/OpenGraphImage.php): `components/OpenGraphImage.php`
- [OpenGraph markup](https://github.com/catkinfox/opengraph/blob/main/components/opengraphimage/default.htm): `components/opengraphimage/default.htm`
- **Generated image URL**

### Image settings

- [Image settings](https://github.com/catkinfox/opengraph/blob/main/models/Settings.php): `models/Settings.php`
- [Settings form](https://github.com/catkinfox/opengraph/blob/main/models/settings/fields.yaml): `models/settings/fields.yaml`
- **Uploaded assets**

### Generation and cache

- [Image generator](https://github.com/catkinfox/opengraph/blob/main/classes/ImageGenerator.php): `classes/ImageGenerator.php`
- **Imagick extension**
- **Media cache**

### Other components

- **Page request**
- **October CMS**
- **Site administrator**

## Connections

- Page request → October CMS: requests page
- October CMS → OpenGraph component: renders component
- Site administrator → Settings form: configures
- Settings form → Image settings: updates
- Image settings → Uploaded assets: stores uploads
- OpenGraph component → Image settings: reads settings
- OpenGraph component → Image generator: requests image
- Image generator → Imagick extension: renders image
- Image generator → Media cache: checks cache
- Image generator → Media cache: writes image
- Image generator → OpenGraph component: returns URL
- OpenGraph component → OpenGraph markup: provides image URL
- Image settings → Media cache: clears cache