---
title: Reference architecture diagram
description: Create reference architecture diagram pages.
image: https://developers.cloudflare.com/cf-twitter-card.png
---

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt  
> Use this file to discover all available pages before exploring further. 

[Skip to content](#%5Ftop) 

# Reference architecture diagram

## Purpose

To provide a visual reference and explanation of using Cloudflare for a specific solution.

Disambiguation

This page describes the content strategy for a reference architecture diagram. For help with Cloudflare products, refer to [Reference architectures diagrams](https://developers.cloudflare.com/reference-architecture/diagrams/).

## Tone

instructional, straightforward

## content\_type

YAML

```
pcx_content_type: reference-architecture-diagramproducts:  - product-a  - product-b  - product-c
```

For more details, refer to [pcx\_content\_type](https://developers.cloudflare.com/style-guide/frontmatter/custom-properties/#pcx%5Fcontent%5Ftype).

## Components

### Most used

* [PublicStats](https://developers.cloudflare.com/style-guide/components/public-stats/):  
The `PublicStats` component allows you to reference specific values about Cloudflare's network without maintaining those values in multiple files.
* [Diagrams](https://developers.cloudflare.com/style-guide/documentation-content-strategy/component-attributes/diagrams/): Particularly helpful for image captions.

### Required

[**Title**](https://developers.cloudflare.com/style-guide/documentation-content-strategy/component-attributes/titles/): Short verb phrase in second-person imperative. Do not use gerund phrases.

[**Reference diagram**](https://developers.cloudflare.com/style-guide/documentation-content-strategy/component-attributes/reference-diagram/): A single diagram that reflects the overall reference architecture.

### Optional

[**Notes/warnings**](https://developers.cloudflare.com/style-guide/documentation-content-strategy/component-attributes/notes-tips-warnings/)

**Screenshots**

[**Related links**](https://developers.cloudflare.com/style-guide/documentation-content-strategy/component-attributes/links/): Bulleted list of links to associated resources.

## Template

```
---pcx_content_type: reference-architecture-diagramtitle: Cloudflare Reference Architecture Diagramdescription: Architecture diagram showing how to <use case> with <Cloudflare products>. Includes component callouts and links to supporting documentation.---
# Cloudflare Reference Architecture Diagram---title: Cloudflare Reference Architecture Diagrampcx_content_type: reference-architecture-diagramproducts:  - cloudflare-one  - cloudflare-wan  - cloudflare-network-firewallweight: 1meta:    title: "Reference Architecture Diagram: An example Cloudflare solution"---
## Cloudflare Reference Architecture Diagram
Provide a description as to what the diagram below contains.
![Example reference architecture diagram](/images/reference-architecture/cloudflare-one-reference-architecture-images/cf1-ref-arch-14.svg "The above is an example reference architecture diagram")
1. Call out2. Any numbered items3. In the diagram4. To explain their meaning/use
Provide some context to the diagram. What it relates to and link to any supporting content.
```

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/documentation-content-strategy/content-types/reference-architecture-diagram/#page","headline":"Reference architecture diagram · Cloudflare Style Guide","description":"Create reference architecture diagram pages.","url":"https://developers.cloudflare.com/style-guide/documentation-content-strategy/content-types/reference-architecture-diagram/","inLanguage":"en","image":"https://developers.cloudflare.com/cf-twitter-card.png","dateModified":"2026-04-24","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/style-guide/","name":"Style Guide"}},{"@type":"ListItem","position":3,"item":{"@id":"/style-guide/documentation-content-strategy/","name":"Product docs content strategy"}},{"@type":"ListItem","position":4,"item":{"@id":"/style-guide/documentation-content-strategy/content-types/","name":"Content types"}},{"@type":"ListItem","position":5,"item":{"@id":"/style-guide/documentation-content-strategy/content-types/reference-architecture-diagram/","name":"Reference architecture diagram"}}]}
```