---
title: Diagrams · Cloudflare Style Guide
description: Images that depict a process, architecture, or some other form of technology.
lastUpdated: 2024-08-13T19:56:56.000Z
source_url:
  html: https://kate-fixes-idpoktalogin.preview.developers.cloudflare.com/style-guide/documentation-content-strategy/component-attributes/diagrams/index.md
  md: https://kate-fixes-idpoktalogin.preview.developers.cloudflare.com/style-guide/documentation-content-strategy/component-attributes/diagrams/
---

## Definition

Images that depict a process, architecture, or some other form of technology.

## Used in

All content types

## Overview

Diagrams explain complex topics in a compelling way and help users visualize a specific solution, process, or interaction between products.

## Template

```md
![Alt text](/link/to/image.svg "Caption to go under the image")
```

## Example

![A simple flow diagram shows interactions between important elements of the design.](https://developers.cloudflare.com/_astro/simple-flow.DifdHPUG_Z1rqtoN.webp)

## Additional information

Always try to use SVG images for diagrams. Bitmap formats like PNG and JPEG do not scale well, and often users will zoom into diagrams to explore the details.

The alt (alternative) text on diagrams is used by screen readers and is read out as part of the surrounding content. Ensure the alt text is straightforward and fits in the context of the content.
