# gatsbyjs/gatsby architecture

> Architecture diagram of the GitHub repository gatsbyjs/gatsby, 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/gatsbyjs/gatsby
- Repository: https://github.com/gatsbyjs/gatsby

## Overview

Gatsby is a React framework for building content-rich sites and apps. The documented workflow is to load content from sources, query it through a uniform GraphQL interface, create pages, render them with a mix of static, deferred, or server-side strategies, and deploy the resulting site. The graph also shows job execution, remote-image handling, and adapter output as internal layers. README capabilities guide the high-level flow; sampled source is limited, so links to unsampled subsystems are omitted or kept at documented boundaries.

Main entry points: [`packages/gatsby/src`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src) (Gatsby framework), [`packages/gatsby/src/utils/adapter/manager.ts`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/adapter/manager.ts) (Site assets and routes), [`packages/gatsby-plugin-utils/src/polyfill-remote-file/http-routes.ts`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-utils/src/polyfill-remote-file/http-routes.ts) (Remote image routes), [`packages/gatsby/src/utils/jobs/manager.ts`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/jobs/manager.ts) (Plugin jobs)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Site authoring"]
  node_gatsby["Gatsby framework"]
end

subgraph group_content["Content and data"]
  node_source[("Content sources")]
  node_data["Data sourcing"]
  node_graphql["GraphQL interface"]
  node_jobs["Plugin jobs<br/>[manager.ts]"]
  node_remote["Remote image routes<br/>[http-routes.ts]"]
end

subgraph group_runtime["Rendering runtime"]
  node_page["Page creation"]
  node_render["Page rendering"]
end

subgraph group_delivery["Site delivery"]
  node_adapter["Adapter manager<br/>[manager.ts]"]
  node_output["Site assets and routes<br/>[manager.ts]"]
end

node_developer(("Site developer"))
node_visitor(("Site visitor"))
node_host(("CDN or host"))

node_developer -->|"configures site"| node_gatsby
node_source -->|"provides content"| node_data
node_gatsby -->|"loads data"| node_data
node_data -->|"exposes data"| node_graphql
node_gatsby -->|"provides queries"| node_graphql
node_gatsby -->|"runs plugin jobs"| node_jobs
node_gatsby -->|"creates pages"| node_page
node_graphql -->|"supplies query data"| node_page
node_page -->|"selects rendering"| node_render
node_visitor -->|"requests page"| node_render
node_render -->|"serves app"| node_visitor
node_adapter -->|"assembles routes"| node_output
node_output -->|"deploys assets"| node_host
node_remote -.->|"serves image files"| node_visitor

click node_gatsby "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src"
click node_data "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src"
click node_graphql "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src"
click node_jobs "https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/jobs/manager.ts"
click node_remote "https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-utils/src/polyfill-remote-file/http-routes.ts"
click node_page "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src"
click node_render "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src"
click node_adapter "https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/adapter/manager.ts"
click node_output "https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/adapter/manager.ts"

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_gatsby toneBlue
class node_source,node_data,node_graphql,node_jobs,node_remote toneAmber
class node_page,node_render toneMint
class node_adapter,node_output toneRose
class node_developer,node_visitor,node_host toneIndigo
```

## Components

### Site authoring

- [Gatsby framework](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src): `packages/gatsby/src`

### Content and data

- **Content sources**
- [Data sourcing](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src): `packages/gatsby/src`
- [GraphQL interface](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src): `packages/gatsby/src`
- [Plugin jobs](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/jobs/manager.ts): `packages/gatsby/src/utils/jobs/manager.ts`
- [Remote image routes](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-utils/src/polyfill-remote-file/http-routes.ts): `packages/gatsby-plugin-utils/src/polyfill-remote-file/http-routes.ts`

### Rendering runtime

- [Page creation](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src): `packages/gatsby/src`
- [Page rendering](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src): `packages/gatsby/src`

### Site delivery

- [Adapter manager](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/adapter/manager.ts): `packages/gatsby/src/utils/adapter/manager.ts`
- [Site assets and routes](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/adapter/manager.ts): `packages/gatsby/src/utils/adapter/manager.ts`

### Other components

- **Site developer**
- **Site visitor**
- **CDN or host**

## Connections

- Site developer → Gatsby framework: configures site
- Content sources → Data sourcing: provides content
- Gatsby framework → Data sourcing: loads data
- Data sourcing → GraphQL interface: exposes data
- Gatsby framework → GraphQL interface: provides queries
- Gatsby framework → Plugin jobs: runs plugin jobs
- Gatsby framework → Page creation: creates pages
- GraphQL interface → Page creation: supplies query data
- Page creation → Page rendering: selects rendering
- Site visitor → Page rendering: requests page
- Page rendering → Site visitor: serves app
- Adapter manager → Site assets and routes: assembles routes
- Site assets and routes → CDN or host: deploys assets
- Remote image routes → Site visitor: serves image files