---
title: Reference diagram · Cloudflare Style Guide
description: A single diagram that portrays all or part of Cloudflare's platform
  and how Cloudflare would align with a customer's infrastructure or use case.
lastUpdated: 2024-08-13T19:56:56.000Z
chatbotDeprioritize: true
source_url:
  html: https://developers.cloudflare.com/style-guide/documentation-content-strategy/component-attributes/reference-diagram/
  md: https://developers.cloudflare.com/style-guide/documentation-content-strategy/component-attributes/reference-diagram/index.md
---

## Definition

A single diagram that portrays all or part of Cloudflare's platform and how Cloudflare would align with a customer's infrastructure or use case.

## Used in

[Reference architecture](https://developers.cloudflare.com/style-guide/documentation-content-strategy/content-types/reference-architecture/), [Reference architecture diagram](https://developers.cloudflare.com/style-guide/documentation-content-strategy/content-types/reference-architecture-diagram/)

## Structure

A single diagram that shows a complete Cloudflare architecture aligned with a specific infrastructure or use case. Whenever possible, the image should be an SVG. For more information, refer to [Diagrams](https://developers.cloudflare.com/style-guide/documentation-content-strategy/component-attributes/diagrams/).

## Examples

![A fully deployed SASE solution with Cloudflare protects every aspect of your business. Ensuring all access to applications is secured and all threats from the Internet mitigated.](https://developers.cloudflare.com/_astro/cf1-ref-arch-21.B4dzMu9Q_1OT1sz.svg)

![Connecting and routing traffic can be created using various methods such as Cloudflare Network Interconnect, IPSEC tunnels, WARP Connector and cloudflared.](https://developers.cloudflare.com/_astro/cf1-ref-arch-14.BMsYJBWD_155tSw.svg)
