图表

描述流程、架构或某种其他形式的技术的视觉图示。我们建议使用 SVG 文件 或 Mermaid 图表。

所有内容类型

图表以引人入胜的方式解释复杂的主题，并帮助用户直观地理解特定解决方案、流程或产品之间的交互。

使用 SVG 文件代替 PNG 或 JPEG，因为当用户想要放大时，SVG 具有很好的缩放性。为您的 SVG 使用清晰且直接的 Alt text（替代文本），以便屏幕阅读器使用。

我们使用仓库中的定期运行的脚本 ↗来优化 SVG 文件。

![替代文本](/link/to/image.svg "位于图像下方的说明文字")

![简单的流程图，显示了设计中重要元素之间的交互。](~/assets/images/firewall/simple-flow.png "流程图示例")

使用 Mermaid 图表来展示产品或流程。如果它们适用于您的用例，相比其他图表，Mermaid 图表是更优的选择，因为它们更容易搜索和修改。

我们的 Mermaid 图表基于 rehype-mermaid ↗ 和 mermaid ↗。

flowchart LR
accTitle: Tunnels diagram
accDescr: The example in this diagram has three tunnel routes. Tunnels 1 and 2 have top priority and Tunnel 3 is secondary.

subgraph Cloudflare
direction LR
B[Cloudflare <br/> data center]
C[Cloudflare <br/> data center]
D[Cloudflare <br/> data center]
end

A((User)) --> Cloudflare --- E[Anycast IP]
E[Anycast IP] --> F[/Tunnel 1 / <br/> priority 1/] --> I{{Customer <br/> data center/ <br/> network 1}}
E[Anycast IP] --> G[/Tunnel 2 / <br/> priority 1/] --> J{{Customer <br/> data center/ <br/> network 2}}
E[Anycast IP] --> H[/Tunnel 3 / <br/> priority 2/] --> K{{Customer <br/> data center/ <br/> network 3}}

```mermaid
flowchart LR
accTitle: Tunnels diagram
accDescr: The example in this diagram has three tunnel routes. Tunnels 1 and 2 have top priority and Tunnel 3 is secondary.

subgraph Cloudflare
direction LR
B[Cloudflare <br/> data center]
C[Cloudflare <br/> data center]
D[Cloudflare <br/> data center]
end

A((User)) --> Cloudflare --- E[Anycast IP]
E[Anycast IP] --> F[/Tunnel 1 / <br/> priority 1/] --> I{{Customer <br/> data center/ <br/> network 1}}
E[Anycast IP] --> G[/Tunnel 2 / <br/> priority 1/] --> J{{Customer <br/> data center/ <br/> network 2}}
E[Anycast IP] --> H[/Tunnel 3 / <br/> priority 2/] --> K{{Customer <br/> data center/ <br/> network 3}}
```

• 屏幕截图